My youth, like a dream that shined nonstop
쉬지 않고 빛났던 꿈같은 my youth
My youth, like a dream that shined nonstop
쉬지 않고 빛났던 꿈같은 my youth
마우스 이펙트 - 조명효과
<main>
<section id="mouseType03">
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="mouse__wrap">
<p>My youth, <span>like a dream</span> that shined nonstop</p>
<p>쉬지 않고 빛났던 <span>꿈같은</span> my youth</p>
</div>
</section>
</main>
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;
cursor: none;
}
.mouse__wrap p {
font-size: 2.4vw;
line-height: 2;
font-weight: 300;
}
.mouse__wrap p:last-child {
font-size: 3vw;
font-weight: 400;
}
.mouse__wrap p span {
border-bottom: 0.15vw dashed orange;
color: orange;
}
.cursor {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 50%;
background: url(img/img15.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
border: 5px solid #fff;
}
function follow(e){
// const circle = document.querySelector(".cursor").clientWidth; //190: border 값 빠진 상태
// const circle = document.querySelector(".cursor").offsetWidth; //200: border 값 포함 상태
const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y
// console.log(circle);
// console.log(circle.width);
gsap.to(".cursor", {duration: .3, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2});
//출력용
document.querySelector(".pageX").innerText = e.pageX;
document.querySelector(".pageY").innerText = e.pageY;
}
window.addEventListener("mousemove", follow);