본문 바로가기

TUTORIAL


JS Animation

JS Animation - Mouse Animation : Move

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="move-image">
    <div class="mimg"></div>
    <div class="mtext">SSang Sun</div>
</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;
    font-family: 'Abel', sans-serif;
    cursor: none;
}
.move-image {
    width: 400px; height: 600px;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) perspective(600px) rotatex(0deg) rotateY(10deg);
    transform-style: preserve-3d;
}
.mimg {
    position: relative;
    width: 400px; height: 600px;
    transform: translatez(80px) scale(0.8);
}
.mimg::before, .mimg::after {
    content:'';
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    background: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/dog.jpg);
    background-size: cover;
    border-radius: 10px;
}
.mimg::after {
    height: 30px;
    top: auto; bottom: -15px;
    background-size: 100% 30px;
    filter: blur(15px);
    z-index: -1;
}
.mtext {
    position: absolute; top: 0; left: 0;
    z-index: 2;
    width: 400px; height: 600px;
    border: 3px solid #fff;
    transform: translatez(150px) translatex(-18px) translatey(-20px) scale(0.5);
    background: linear-gradient(135deg, 
        rgba(255,255,255,1) 0%, 
        rgba(255,255,255,0.36) 35%, 
        rgba(255,255,255,0.07) 41%, 
        rgba(255,255,255,0) 51%, 
        rgba(255,255,255,0) 100%
    );
    text-align: center;
    font-size: 48px; color: #fff;
    text-transform: uppercase;
    line-height: 1050px;
    font-weight: bold;
    border-radius: 5px;
}
.mtext::after {
    content:'publisher';
    position: absolute; left: 0; bottom: 0;
    font-size: 20px;
    line-height: 75px;
    width: 100%;
    font-weight: normal;
    letter-spacing: 15px;
    text-indent: 12px;
}
.cursor {
    position: absolute;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.4);
    height: 40px;
    width: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 100%;
    z-index: 10000;
    user-select: none;
    pointer-events: none;
    cursor: none;
}


































































var $wrap = $(".move-image"),
    cursor = $(".cursor"),
    fmouseX = 0,
    fmouseY = 0,
    mouseX = 0,
    mouseY = 0,
    angleX = 0,
    angleY = 0,
    friction = 1/6;
        
$(window).mousemove(function(e){
    mouseX = Math.max(-100, Math.min(100, $(window).width()/2 - e.pageX));
    mouseY = Math.max(-100, Math.min(100, $(window).height()/2 - e.pageY));
    
    angleX = (12 * mouseX) / 100;
    angleY = (12 * mouseY) / 100;
    
    mX = e.pageX;
    mY = e.pageY;
        
    //console.log('mouseX = '+ mouseX);
    //console.log('mouseY = '+ mouseY);
    
    //console.log('angleX = '+ angleX);
    //console.log('angleY = '+ angleY);
});

function animate(){
    fmouseX += (angleX - fmouseX) * friction;
    fmouseY += (angleY - fmouseY) * friction;
    
    $wrap.css({'transform':'translate(-50%, -50%) perspective(600px) rotateX('+ fmouseY +'deg) rotateY('+ -fmouseX +'deg)'});
    
    window.requestAnimationFrame(animate);
    
    //console.log('fmouseX = '+ fmouseX);
    //console.log('fmouseY = '+ fmouseY);
};
animate();

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