I don't regret the things I've done, but those I did not do.
내가 한 일들을 후회하진 않지만, 하지 않은 일들은 후회해.
I don't regret the things I've done, but those I did not do.
내가 한 일들을 후회하진 않지만, 하지 않은 일들은 후회해.
마우스 이펙트 - 조명효과
<main>
<div class="cursor"></div>
<div class="contents">
<p>I don't regret the things I've done, <em>but those I did not do.</em></p>
<p>내가 한 일들을 후회하진 않지만, <em>하지 않은 일들은 후회해.</em></p>
</div>
</main>
.contents {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
flex-direction: column;
overflow: hidden;
}
.contents p {
max-width: 70vw;
font-size: 3vw;
text-align: justify;
color: #fff;
}
.contents p:first-child {
font-size: 2vw;
line-height: 2;
}
.contents p em {
color: orange;
border-bottom: 2px dashed orange;
font-style: normal;
}
.cursor {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: url(../assets/img/bg15@2.jpg) center center;
background-attachment: fixed;
background-size: cover;
border: 5px solid #fff;
overflow: hidden;
z-index: -1;
}
const width = $(".cursor").width()/2;
const height = $(".cursor").height()/2;
$(window).mousemove(function(e){
gsap.to(".cursor", {duration: 0.5, left: e.pageX - width, top: e.pageY - height});
// page좌표 출력
let pageX = e.pageX;
let pageY = e.pageY;
$(".pageX").text(parseInt(pageX) + "px");
$(".pageY").text(parseInt(pageY) + "px");
})
// 소스보기 실행함수
modal();