마우스 효과 만들기 6
스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다.
마우스 이펙트 : 텍스트 효과
텍스트가 움직이며 왼쪽에서는 오렌지색, 오른쪽에서는 흰색으로 나타납니다.
HTML 코드
이미지와 텍스트를 .mouse__img와 .mouse__text로 구분하고 왼쪽 글씨는 .left에, 오른쪽 글씨는 .right에 작성하였습니다.
<main id="main">
<section id="mouseType">
<div class="mouse__cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="../assets/img/effect_bg10@2x-min.jpg" alt="이미지">
</figure>
</div>
<div class="mouse__text">
<div class="line">
<div class="left">
<div class="spanWrap">
<span class="spanSlow">Pain Past</span>
</div>
</div>
<div class="right">
<div class="spanWrap">
<span class="spanSlow">Pain Past</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<span class="spanFast">is pleasure</span>
</div>
</div>
<div class="right">
<div class="spanWrap">
<span class="spanFast">is pleasure</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>
</section>
</main>
CSS 코드
mouse__cursor는 기존의 마우스 커서를 따라다녀야 하기 때문에, position: absolute;를 사용하여 위치를 잡아줍니다. 이후에 스크립트를 이용해 top 값과 left 값의 변화를 주어 마우스를 따라다니는 것처럼 보이게 할 예정입니다. 이전에 했던 유형들과 비슷하지만, 텍스트 효과를 주기 위해 transform: skew() 속성을 이용해 기울기를 주었고, overflow: hidden 속성을 이용해 각각의 구역에서 벗어나는 글씨는 사라지도록 하였습니다. 이를 통해 왼쪽과 오른쪽 구역에서 글씨 색이 달라지는 듯한 효과를 줄 수 있습니다.
✔point 속성 몇가지
- transform: skew() : 기울기 변형을 줄 수 있습니다.
- overflow: hidden : 해당 요소를 벗어나는 자식요소를 숨김처리 합니다.
.mouse__wrap {
color: #fff;
width: 100%;
height: 100vh;
cursor: none;
}
.mouse__img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.mouse__text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -20%);
font-size: 3vw;
line-height: 1.5;
font-weight: 500;
}
.mouse__text .line {
width: 100%;
display: flex;
}
.mouse__text .line .left {
width: 50vw;
color: orange;
overflow: hidden;
transform: skew(0deg, -15deg);
}
.mouse__text .line .left .spanWrap {
width: 100vw;
text-align: center;
}
.mouse__text .line .right {
width: 50vw;
color: #fff;
overflow: hidden;
transform: skew(0deg, 15deg);
}
.mouse__text .line .right .spanWrap {
width: 100vw;
text-align: center;
transform: translateX(-50vw);
}
.mouse__text span {
display: inline-block;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255,255,255,0.9);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse__cursor.hover {
mix-blend-mode: difference;
transform: scale(5);
}
스크립트 작성하기
전체 스크립트 보기
const mouseMove = (e) =>{ //마우스가 움직이는 경우에 실행시킬 함수 mouseMove를 작성합니다. 여기서 e는 마우스 커서를 의미합니다.
let positionSlow = (e.pageX - (window.innerWidth / 2)) * 0.1; // e.pageX를 통해 구한 커서의 x축 좌표값에서 (window.innerWidth / 2)를 빼 가운데를 기준으로 오차를 만듭니다. 이후 0.1을 곱해 오차의 값이 너무 크지 않도록 조정합니다.(너무 커서 줄이기 위해 곱함)
let positionFast = (e.pageX - (window.innerWidth / 2)) * 0.2; // 위와 같지만 조금 더 빠르게 움직이이도록 오차를 키웠습니다.(0.2곱)
gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); //gsap를 이용해 애니메이션을 주었습니다. (느리게 움직이는 글씨)
gsap.to(".spanFast", {duration: 0.4, x: -positionFast}); // 반대편으로 움직여야하기 때문에 -positionFast로 움직이도록 하였습니다.(빠르게 움직이는 글씨)
gsap.to(".mouse__cursor", {duration: 0.3, left: e.pageX - 5, top: e.pageY - 5}); // 새로 만든 커서가 마우스 커서를 따라 움직이도록 애니메이션을 주었습니다.
};
window.addEventListener("mousemove", mouseMove); // 마우스가 움직이는 mousemove이벤트가 발생할 때, mouseMove함수가 실행됩니다.
//마우스 커서가 글씨 위에 올라가면 반전 효과 + 원이 다섯배 커지기
// 여기는 간단하니까,, 설명 생략하겠습니다😆
const text = document.querySelectorAll(".mouse__text .spanWrap span");
const cursor = document.querySelector(".mouse__cursor");
text.forEach(text => {
text.addEventListener("mouseenter", ()=>{
cursor.classList.add("hover");
});
text.addEventListener("mouseleave", ()=>{
cursor.classList.remove("hover");
});
});
댓글