마우스 클릭 효과

2019. 5. 16. 12:06·인터넷/티스토리 꾸미기

어느 곳을 클릭 할 때마다 효과를!

사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이죠. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드릴게요.

생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보죠!
출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag

CSS 코드

HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝.

div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#000000;
	border-radius:50%;
	animation:clickEffect 0.4s ease-out;
	z-index:99999;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:0.5em; height:0.5em;
		margin:-0.25em;
		border-width:0.5rem;
	}
	100%{
		opacity:0.2;
		width:15em; height:15em;
		margin:-7.5em;
		border-width:0.03rem;
	}
}

HTML 코드 HEAD와 HEAD 사이에 넣어주세요.

<script>
	function clickEffect(e){
  var d=document.createElement("div");
  d.className="clickEffect";
  d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
  document.body.appendChild(d);
  d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
}
	document.addEventListener('click',clickEffect);	
</script>

이 코드를 보면 border-color나 radius의 수치, clickEffect 쪽 수치도 가며 자신만의 스타일로 맞출 수 있습니다. 물론 그냥 사용해도 무리는 없을 듯 싶은데 border-color가 현재 검은색으로 맞추어져있으니 이 부분만 원하는 컬러로 수정해주세요. 그리고 정확히 말하면 클릭했을 때 효과가 아니고 마우스를 클릭 후 떼었을 때의 효과입니다. 이 차이정도만 알고 있으면 될 것 같아요. 쉽고 가볍지만 효과는 좋은 마우스 이펙트 효과를 알려드리며 이번 포스팅은 여기까지.

저작자표시 비영리 변경금지 (새창열림)
'인터넷/티스토리 꾸미기' 카테고리의 다른 글
  • 컨텐츠 라벨 4종 CSS
  • 컨텐츠 이미지 라운딩
  • TOP 스크롤링
  • 티스토리 스킨 뭐쓸까? (공식편)
D.ble
D.ble
웹 디자인 & 영상 강좌 그리고 꿀팁
    .Ble
    Web Design & Tips
    • 전체 카테고리
      • 포토샵
        • 무료추천폰트모음
        • 무료이미지
        • 그라디언트
        • 패턴
        • 포토샵 강좌
      • 인터넷
        • 인터넷 꿀팁
        • 티스토리 꾸미기
      • 동영상
        • 프리미어프로 : PR
        • 애프터 이펙트 : AE
      • 코딩코드
        • 바로쓰는코딩
      • 일상이야기
        • 국내여행
        • 영화리뷰
        • 잇템리뷰
      • 꽁기한생각
        • 잡다한지식
  • 인기 글

  • 최근 댓글

  • 최근 글

  • 태그

    Photoshop
    디자인
    포토샵
    상업적 무료 이용
    그라디언트
    무료 이미지
    포토샵 그라디언트
    포토샵 강좌
    pattern
    상업적 무료폰트
    Web Design
    Design
    gradient
    상업적 무료이용
    포토샵 패턴
    티스토리 꾸미기
    패턴
    웹디자인
    텍스트 효과
    무료폰트
  • 전체
    오늘
    어제
  • hELLO· Designed By정상우.v4.10.2
D.ble
마우스 클릭 효과
상단으로

티스토리툴바