단비의 코딩 공부 blog

[javascript]TweenMax.js로 마우스 커서 애니메이션 만들기 본문

javascript&jquery

[javascript]TweenMax.js로 마우스 커서 애니메이션 만들기

황굽달 2022. 11. 29. 09:01 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>

애니메이션 효과를 위해 jquery.js와 TweenMax.js를 가지고 와 설치해준다

 

1.html

    <body>
    	<div class="cursor">
    	</div>
        
        <div class="cursor-ring"></div>
        <a>여기!</a>
    </body>

2.css

    html, body, a {
        user-select: none;
        cursor: none !important;
      }
     body{backgroung-color:#000}
    .cursor {
    position: absolute;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: 1000;
    pointer-events: none;
    background: #fff;
    }
    .cursor.hide {
    visibility: hidden;
    }
    .cursor.hover {
    background: red;
    z-index: -1;
    }

    .cursor-ring {
    position: absolute;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 1000;
    pointer-events: none;
    }
    .cursor-ring.hover {
    z-index: -99;
    }

    a {
    display: inline-block;
    margin-left: 40px;
    margin-top: 40px;
    }

3.js

    $(document).on('mouseenter', (e) =>{
        let cursor = $('.cursor');
        cursor.removeClass("hide");
    });

    $(document).on('mouseleave', (e) =>{
        let cursor = $('.cursor');
        cursor.addClass("hide");
    });

    $(document).on('mousemove', (e) =>{
        let cursor = $('.cursor');
        TweenMax.to(cursor, .05, {
        x: e.pageX-5,
        y: e.pageY-5
        });
    });

    $(document).on('mousemove', (e) => {
        let cursor = $('.cursor-ring');
        TweenMax.to(cursor, .4, {
        x: e.pageX-12,
        y: e.pageY-12
        });
    });

    $(document).ready(() => {
    let cursor = $('.cursor');
        $('a').on("mouseover", () => {
            TweenMax.to(cursor, .20, {
        scale: 4,
        });
        cursor.addClass("hover");
        });
        $('a').on("mouseout", () => {
            TweenMax.to(cursor, .25, {
        scale: 1,
        });
        cursor.removeClass("hover");
        });
    });
저작자표시

'javascript&jquery' 카테고리의 다른 글

[javascript]날짜 지정 event (로또 회차)  (0) 2022.12.07
[Vanilla JS]study 5일차 - 함수  (0) 2022.12.07
[Vanilla JS]study 4일차 - 배열과 for in문  (0) 2022.11.29
[Vanilla JS]study 3일차 - 반복문  (0) 2022.11.24
[Vanilla JS]study 2일차 - 조건문  (0) 2022.11.23
'javascript&jquery' Related Articles more