Fall seven times, stand up eight.
7번 넘어져도 8번 일어나라.
Fall seven times, stand up eight.
7번 넘어져도 8번 일어나라.
마우스 이펙트 - 마우스 방향에 따라 움직이기
<main>
<div class="cursor"></div>
<div class="moveWrap">
<article class="moveImage">
<div class="mImg"><img src="../assets/img/bg2.jpg" alt="이미지"></div>
<div class="mText">
<p>Fall seven times, stand up eight.</p>
<p>7번 넘어져도 8번 일어나라.</p>
</div>
</article>
</div>
</main>
<!-- //contents -->
<!-- info -->
<div class="info">
<h1><a href="index.html">Mouse Effect04 - javascript</a></h1>
<p>마우스 이펙트 - 마우스 방향에 따라 움직이기</p>
</div>
<div class="info right">
<ul>
<li><a href="javascriptME01.html">1</a></li>
<li><a href="javascriptME02.html">2</a></li>
<li><a href="javascriptME03.html">3</a></li>
<li><a href="javascriptME04.html">4</a></li>
<li><a href="javascriptME05.html">5</a></li>
<li><a href="javascriptME06.html">6</a></li>
<li><a href="javascriptME07.html">7</a></li>
<li><a href="javascriptME08.html">8</a></li>
</ul>
<ul>
<li><a href="jqueryME01.html">1</a></li>
<li><a href="jqueryME02.html">2</a></li>
<li><a href="jqueryME03.html">3</a></li>
<li class="active"><a href="jqueryME04.html">4</a></li>
<li><a href="jqueryME05.html">5</a></li>
<li><a href="jqueryME06.html">6</a></li>
<li><a href="jqueryME07.html">7</a></li>
<li><a href="jqueryME08.html">8</a></li>
</ul>
</div>
<div class="info left list">
<ul>
<li>pageX : <span class="pageX">0</span></li>
<li>pageY : <span class="pageY">0</span></li>
<li>standardX : <span class="standardX">0</span></li>
<li>standardY : <span class="standardY">0</span></li>
<li>maxX : <span class="maxX">0</span></li>
<li>maxY : <span class="maxY">0</span></li>
<li>angleX : <span class="angleX">0</span></li>
<li>angleY : <span class="angleY">0</span></li>
</ul>
</div>
<!-- //info left -->
body {
cursor: none;
width: 100%;
height: 100vh;
overflow: hidden;
}
.moveWrap {
width: 100%;
height: 100vh;
overflow: hidden;
}
.moveImage {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) perspective(600px) rotateX(0) rotateY(0);
transform-style: preserve-3d;
will-change: transform;
transition: all 0.2s;
}
.moveImage .mImg {
width: 50vw;
position: relative;
}
.moveImage .mImg::before {
content: '';
position: absolute;
left: 5%; bottom: -3%;
width: 90%;
height: 40px;
background: url(../assets/img/bg21.jpg) no-repeat;
background-size: 100% 30px;
filter: blur(15px);
z-index: -1;
opacity: 0.9;
}
.moveImage .mImg img {
width: 100%;
border-radius: 5px;
}
.moveImage .mText{
font-family: 'NEXONLv1Gothic';
position: absolute;
left: 50%; top: 50%;
transform: translate3d(-50%, -50%, 150px);
text-align: center;
color: #fff;
background: rgba(0,0,0,.3);
padding: 2vw;
font-size: 1vw;
white-space: nowrap;
line-height: 1.6;
border-radius: 5px;
}
.cursor {
position: absolute;
width: 10px; height: 10px;
background: #fff;
border-radius: 50%;
z-index: 10000;
user-select: none;
pointer-events: none;
}
// 마우스 움직일때 좌표 출력용
$(window).mousemove(function(e){
let pageX = e.pageX;
let pageY = e.pageY;
// 전체 가로/세로 값 - 기준점을 가운데로 변경하기 위해
let standardX = $(window).width()/2-pageX;
let standardY = $(window).height()/2-pageY;
// 최댓값, 최솟값 설정
// 양수일때
// if(standardX >= 50) standardX = 50;
// if(standardY >= 50) standardY = 50;
// // 음수일때
// if(standardX <= -50) standardX = 50;
// if(standardY <= -50) standardY = 50;
// 최솟값은 -50, 최댓값은 50 설정
let maxX = Math.max(-100, Math.min(100, standardX));
let maxY = Math.max(-100, Math.min(100, standardY));
// 각도를 줄이는 설정
let angleX = maxX * 0.12;
let angleY = maxY * 0.12;
// 부드럽게 설정
let softX = 0;
let softY = 0;
softX += (angleX - softX) * 0.7;
softY += (angleY - softY) * 0.7;
// 이미지
$(".moveImage").css({"transform": "translate(-50%, -50%) perspective(600px) rotateX("+ softY +"deg) rotateY("+ -softX +"deg)"});
// gsap - 커서
gsap.to(".cursor", {duration: .3, left: pageX, top: pageY});
// page좌표 출력
$(".pageX").text(parseInt(pageX) + "px");
$(".pageY").text(parseInt(pageY) + "px");
$(".standardX").text(parseInt(standardX) + "px");
$(".standardY").text(parseInt(standardY) + "px");
$(".maxX").text(parseInt(maxX) + "px");
$(".maxY").text(parseInt(maxY) + "px");
$(".angleX").text(parseInt(angleX) + "px");
$(".angleY").text(parseInt(angleY) + "px");
});
// 소스보기 실행함수
modal();