본문 바로가기

TUTORIAL


JS Animation

JS Animation - Mouse Animation : Blend

JS Animation 튜토리얼입니다.
Javascript와 jQuery를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.

사용프로그램
codepen GO



CSS Reference GO

JavaScript Reference GO

jQuery Reference GO

CSS Animation GO

Codepen Webstoryboy GO

인스타그램 보기 GO

포폴 만들기 스터디 모임 GO

GSAP GO

웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공

+ 웹디자인 기능사 GO
+ CSS Animation GO
+ JS Animation GO
+ Parallax GO
+ Image Slider GO

Mouse 관련 애니메이션
JS Mouse Animation - Basic GO
JS Mouse Animation - GSAP GO
JS Mouse Animation - Blend GO
JS Mouse Animation - Move GO
JS Mouse Animation - Text GO

<div class="cursor"></div>

<div class="txt">
    <ul>
        <li><a href="#">ClientX</a></li>
        <li><a href="#">ClientX</a></li>
        <li><a href="#">PageX</a></li>
        <li><a href="#">PageY</a></li>
    </ul>
</div>








 













































@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');

body {
    width: 100%;
    height: 100vh;
    background-image:linear-gradient(to top, #007adf 0%, #00ecbc 100%);
    overflow: hidden;
    cursor: none;
    font-family: 'Abel', sans-serif;
}
.cursor {
    position: absolute;
    border: 2px solid #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    z-index: 1000;
    user-select: none;
    pointer-events: none;
    transition: transform 0.6s ease-in-out, border 0.2s ease-in-out;
    mix-blend-mode: difference;
}
.cursor.active {
    transform: scale(2);
    border: 0;
    background: #fff;
}
.txt {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.txt li a {
    font-size: 8vw;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    text-decoration: none;
    cursor: none;
}

































































var cursor = $(".cursor"),
    mouseX = 0,
    mouseY = 0;

$(document).mousemove(function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
});

TweenMax.to({}, 0.016, {
    repeat: -1,
    onRepeat: function(){
        TweenMax.set(cursor,{
            css:{
                left: mouseX-20,
                top: mouseY-20
            }
        })
    }
});

$(".txt li").mouseenter(function(){
    cursor.addClass("active");
});
$(".txt li").mouseleave(function(){
    cursor.removeClass("active");
});



































































  • 성공하였습니다.

    https://codepen.io/webstoryboy/pen/NQgByz

  • 황정훈 2019.08.12 22:24 댓글주소 수정/삭제 댓글쓰기

    쌤, 저만 그런건지 모르겠는데 여기 댓글 달기에 코드펜 링크 등록이 안되네요. 링크 넣으면
    "티스토리 운영정책에 의해 등록이 제한되었습니다" 라고 알림창 뜨면서 댓글달기가 안되요.

    그리고 유튜브 영상 설명란에 강의자료실 주소

    https://wtss.tistory.com/311

    로 수정 요청합니다~!