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 class="active"><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><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;
}
function mouseMove(e){
let pageX = 0;
let pageY = 0;
let standardX = 0;
let standardY = 0;
let maxX = 0;
let maxY = 0;
let angleX = 0;
let angleY = 0;
let softX = 0;
let softY = 0;
// 마우스 값
pageX = e.pageX;
pageY = e.pageY;
// 기준점 가운데로 변경
standardX = window.innerWidth/2 - pageX;
standardY = window.innerHeight/2 - pageY;
// 최댓값, 최솟값
maxX = Math.max(-100, Math.min(100, standardX));
maxY = Math.max(-100, Math.min(100, standardY));
// 각도를 줄이는 설정
angleX = maxX * 0.12;
angleY = maxY * 0.12;
// 부드럽게 설정
softX += (angleX - softX) * 0.4;
softY += (angleY - softY) * 0.4;
// 이미지 움직임
const move = document.querySelector(".moveImage");
move.style.transform = "translate(-50%, -50%) perspective(600px) rotateX("+ softY +"deg) rotateY("+ -softX +"deg)";
// gsap - 커서
gsap.to(".cursor", {duration: .3, left: pageX, top: pageY});
// 출력
document.querySelector(".pageX").textContent = parseInt(pageX) + "px";
document.querySelector(".pageY").textContent = parseInt(pageY) + "px";
document.querySelector(".standardX").textContent = parseInt(standardX) + "px";
document.querySelector(".standardY").textContent = parseInt(standardY) + "px";
document.querySelector(".maxX").textContent = parseInt(maxX) + "px";
document.querySelector(".maxY").textContent = parseInt(maxY) + "px";
document.querySelector(".angleX").textContent = parseInt(angleX) + "px";
document.querySelector(".angleY").textContent = parseInt(angleY) + "px";
}
document.addEventListener("mousemove", mouseMove);
// 소스보기 실행함수
modal();