Education is a method whereby one acquires a higher grade of prejudices.
교육은 더 높은 수준의 편견을 얻는 방법이다.
Education is a method whereby one acquires a higher grade of prejudices.
교육은 더 높은 수준의 편견을 얻는 방법이다.
마우스 이펙트 - 조명효과
<main>
<section id="mouseType01">
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="mouse__wrap">
<p><span>Education</span> is a method whereby one acquires a higher grade of <span>prejudices</span>.</p>
<p><span>교육</span>은 더 높은 수준의 <span>편견</span>을 얻는 방법이다.</p>
</div>
</section>
</main>
body::before {
background: rgba(75, 4, 16, 0.589);
}
.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.5vw;
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 rgb(0, 255, 55);
color: rgb(0, 255, 55);
}
.cursor {
position: absolute;
left: 0px; top: 0px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 50%;
background-image: url(img/slider_img10.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
border: 5px solid #fff;
}
const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0
function follow(e){
gsap.to(".cursor", {duration: .3, left: e.pageX-(circle.width/2), top: e.pageY-(circle.height/2)});
//출력용
document.querySelector(".pageX").innerHTML = e.pageX;
document.querySelector(".pageY").innerHTML = e.pageY;
};
window.addEventListener("mousemove", follow)