If it's something you can't say in "front", don't say in "back" either
"앞"에서 할 수 없는 말이라면, "뒤"에서도 하지마라.
If it's something you can't say in "front", don't say in "back" either
"앞"에서 할 수 없는 말이라면, "뒤"에서도 하지마라.
마우스 이펙트 - 마우스 방향에 따라 움직이기
<body class="bg bg9 blue">
<!-- contents -->
<main>
<div class="cursor"></div>
<div class="moveWrap">
<article class="moveImage">
<div class="mImg">
<img src="../assets/img/bg8@2.jpg" alt="이미지">
</div>
<div class="mText">
<p>If it's something you can't say in "front", don't say in "back" either</p>
<p>"앞"에서 할 수 없는 말이라면, "뒤"에서도 하지마라.</p>
</div>
</article>
</div>
</main>
<!-- contents -->
<!-- info -->
<div class="info">
<h1><a href="./index.html">mouse Effect 05 - 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 class="active"><a href="javascriptME05.html">5</a></li>
</ul>
<ul>
<li><a href="jqureyME01.html">1</a></li>
<li><a href="jqureyME02.html">2</a></li>
<li><a href="jqureyME03.html">3</a></li>
<li><a href="jqureyME04.html">4</a></li>
<li><a href="jqureyME05.html">5</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>
</ul>
</div>
<div class="info bottom">
<button>소스보기</button>
</div>le>
</main>
.moveWrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.moveImage {
position: relative;
}
.moveImage .mImg {
width: 50vw;
height: 60vh;
overflow: hidden;
position: relative;
transition: tranform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
.moveImage:hover .mImg {
transform: scale(1.025);
}
.moveImage .mImg img {
left: -5%;
top: -5%;
width: 100%;
position: absolute;
width: 110%;
height: 110%;
object-fit: cover;
transition: tranform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
.moveImage .mText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.3em;
white-space: nowrap;
background: rgba(0, 0, 0, 0.3);
padding: 1vw;
font-family: 'NEXONLv1Gothic';
line-height: 1.6;
text-align: center;
}
.cursor {
position: absolute;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
z-index: 10000;
user-select: none;
pointer-events: none;
}
let moveImage = document.querySelector('.moveImage');
function mouseMove(e) {
//커서 움직이기
gsap.to('.cursor', {
duration: .2,
left: e.pageX-10,
top: e.pageY-10
});
//1. 좌표값을 가운데로 정렬
let pageX = e.pageX;
let pageY = e.pageY;
let standardX = window.innerWidth/2 - pageX;
let standardY = window.innerHeight/2 - pageY;
//2. img x축 -> 마우스 값/20, y축 -> 마우스 값/20
let x = standardX/20;
let y = standardY/20;
let img = document.querySelector(".moveImage img");
img.style.transform = "translate("+ x + "px," + y + "px)";
//출력
document.querySelector(".pageX").textContent = pageX;
document.querySelector(".pageY").textContent = pageY;
}
moveImage.addEventListener("mousemove", mouseMove);