When I lose confidence in myself The whole world becomes my enemy.
나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.
When I lose confidence in myself The whole world becomes my enemy.
나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.
마우스 이펙트 - 따라다니기 : 이미지 효과
<html>
<section id="mouseType01">
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="mouse__wrap">
<p>When I lose confidence in myself The whole world becomes my enemy.</p>
<p>나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.</p>
</div>
</section>
<div class="attr">
<ul>
<li>mousePageX : <span class="mousePageX">0</span>px</li>
<li>mousePageY : <span class="mousePageY">0</span>px</li>
<li>centerPageX : <span class="centerPageX">0</span>px</li>
<li>centerPageY : <span class="centerPageY">0</span>px</li>
</ul>
</div>
</html>
<style>
body::before {
background: rgba(0, 0, 0, 0.8);
}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mouse__img {
position: relative;
cursor: none;
}
.mouse__img figure {
position: relative;
width: 50vw;
height: 53vh;
/* overflow: hidden; */
background-color: #ccc;
border: 3px solid #fff;
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
.mouse__img figure:hover {
transform: scale(1.025);
}
.mouse__img figure img {
position: absolute;
left: -5%; top: -5%;
width: 110%;
height: 110%;
/* opacity: 0.4; */
object-fit: cover; /*background-size: cover;*/
}
.mouse__img figcaption {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 1.3vw;
line-height: 1.6;
white-space: nowrap;
}
.cursor {
position: absolute;
left: -30px; top: -30px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
z-index: 1000;
user-select: none;
pointer-events: none;
}
.cursor ul{
position: absolute;
left: 40px; top: 0;
white-space: nowrap;
}
</style>
<script>
const circle = document.querySelector(".cursor").getBoundingClientRect();
document.querySelector(".mouse__img").addEventListener("mousemove", e => {
gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2});
let mousePageX = e.pageX;
let mousePageY = e.pageY;
let centerPageX = window.innerWidth/2 - mousePageX;
let centerPageY = window.innerHeight/2 - mousePageY;
gsap.to(".mouse__img figure img", {duration: .3, x: -centerPageX/20, y: -centerPageY/20})
document.querySelector(".mousePageX").textContent = mousePageX;
document.querySelector(".mousePageY").textContent = mousePageY;
document.querySelector(".centerPageX").textContent = centerPageX;
document.querySelector(".centerPageY").textContent = centerPageY;
})
</script>