시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 기타효과 > 마우스 따라다니는 텍스트 효과 상세정보
사이트등록
클라우드태그
Javascript
PHP
HTML
ASP
MYSQL
CSS
Mobile
image
jquery
게시판
2023
2022
slide
현재접속자 새로고침
마우스 따라다니는 텍스트 효과
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기
소스분류 기타효과
다운로드 횟수 2 회
간단설명 마우스 따라다니는 텍스트 효과입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기
 




마우스를 따라다니는 텍스트 애니메이션 효과입니다.
웹페이지를 좀 더 역동적이고 매력적으로 만들 수 있습니다.

 

HTML 구조

<div class="cursor">

  <div class="text">move</div>

  <div class="text">move</div>

  <div class="text">move</div>

  <div class="text">move</div>

  <div class="text"><span>move</span></div>

</div>



CSS 소스

html, body {

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100vh;

  background: #161616;

  overflow: hidden;

}


.text {

  position: absolute;

  pointer-events: none;

  font-family: venn-extended, sans-serif;

  font-weight: 700;

  font-style: normal;

  font-size: 6em;

  -webkit-text-stroke: 1px #fff;

  /*font-weight: 500;

  text-transform: uppercase;*/

  color: #161616;

}


.text span {

  color: #fff;

}


.center {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



JS 소스

document.addEventListener("mousemove", e => {

  gsap.to(".text", {

    x: e.clientX,

    y: e.clientY,

    stagger: { // wrap advanced options in an object

      each: -0.02,

      ease: "power2.inOut",

    }

  })

})





구현된 화면은 사이트에서 확인 가능합니다. 

네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 20497222 보이는 도배방지키를 입력하세요.