<main>
<div class="cursor"></div>
<div class="contents">
<div class="moveImg">
<div class="textWrap">
<div class="line">
<div class="left">
<div class="spanWrap">
<span class="spanSlow">All it takes is</span>
</div>
</div>
<div class="right">
<div class="spanWrap">
<span class="spanSlow">All it takes is</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<span class="spanFast">faith and trust.</span>
</div>
</div>
<div class="right">
<div class="spanWrap">
<span class="spanFast">faith and trust.</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<span class="spanSlow">믿음과 신뢰만</span>
</div>
</div>
<div class="right">
<div class="spanWrap">
<span class="spanSlow">믿음과 신뢰만</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<span class="spanFast">있으면 돼.</span>
</div>
</div>
<div class="right">
<div class="spanWrap">
<span class="spanFast">있으면 돼.</span>
</div>
</div>
</div>
</div>
<div class="imgWrap">
<img src="../assets/img/bg23@2.jpg" alt="이미지입니다.">
</div>
</div>
</div>
</main>
/* textWrap */
.textWrap {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -30%);
color: #fff;
font-size: 4vw;
line-height: 1.5;
font-family: 'NEXONLv1Gothic';
}
.textWrap .line {
width: 100%;
display: flex;
}
.textWrap .line .left {
width: 50vw;
color: #F0F600;
overflow: hidden;
transform: skewY(-15deg);
}
.textWrap .line .left .spanWrap {
width: 100vw;
text-align: center;
}
.textWrap .line .right {
width: 50vw;
overflow: hidden;
transform: skewY(15deg);
}
.textWrap .line .right .spanWrap {
width: 100vw;
text-align: center;
transform: translateX(-50vw);
}
.textWrap span {
display: inline-block;
}
/* imgWrap */
.imgWrap {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
width: 50%;
}
.imgWrap img {
width: 100%;
}
function mouseMove(e){
// 기준점 변경
let positionSlow = (e.pageX - ($(window).width()/2)) * 0.1;
let positionFast = (e.pageX - ($(window).width()/2)) * 0.2;
gsap.to(".spanSlow", {duration: .4, x: positionSlow});
gsap.to(".spanFast", {duration: .4, x: -positionFast});
// page좌표 출력
let pageX = e.pageX;
let pageY = e.pageY;
$(".pageX").text(parseInt(pageX) + "px");
$(".pageY").text(parseInt(pageY) + "px");
};
$(window).on("mousemove", mouseMove);
// 소스보기 실행함수
modal();
