마우스 효과 만들기 2
스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다.
마우스 이펙트 : 마우스 따라다니기(GSAP)
이번 효과는 저번 유형과 비슷하지만 GSAP를 이용해 작성하여, 커서의 움직임이 더 부드러운 효과입니다.
HTML 코드
이번에는 기본 마우스 커서를 대신할 요소에 각 mouse__cursor, mouse__cursor2 클래스를 주어 두개 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다.
<section id="mousetype">
<div class="mouse__cursor"></div>
<div class="mouse__cursor2"></div>
<div class="mouse__wrap">
<p>The <span>future</span> depends on what We do in <span>present</span>.</p>
<p><span>미래</span>는 <span>현재</span> 우리가 무엇을 하는가에 달려있다.</p>
</div>
</section>
CSS 코드
mouse__cursor는 기존의 마우스 커서를 따라다녀야 하기 때문에, position: absolute;를 사용하여 위치를 잡아줍니다. 이후에 스크립트를 이용해 top 값과 left 값의 변화를 주어 마우스를 따라다니는 것처럼 보이게 할 예정입니다.
✔point 속성 몇가지
- user-select : 사용자가 해당 요소를 선택 불가능하도록 함
- pointer-events : 해당 요소가 포인터 이벤트의 대상이 되지 않도록 함
.mouse__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
overflow: hidden;
cursor: none;
}
.mouse__wrap p {
font-size: 2vw;
line-height: 2;
font-weight: 300;
}
.mouse__wrap p:last-child {
font-size: 3vw;
}
.mouse__wrap p span {
border-bottom: 1px dashed orange;
color: orange;
}
@media (max-width: 800px){
.mouse__wrap p {
padding: 0 20px;
font-size: 24px;
line-height: 1.5;
text-align: center;
margin-bottom: 10px;
}
.mouse__wrap p:last-child {
font-size: 40px;
line-height: 1.5;
text-align: center;
word-break: keep-all;
}
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background: rgba(255,255,255,0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9998;
border-radius: 50%;
background: rgba(255,255,255,0.1);
user-select: none;
pointer-events: none;
transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(10);
background: rgba(255,166,0,0.5);
}
스크립트 작성하기
전체 스크립트 보기
window.addEventListener("mousemove", e => {
// 커서 좌표값 할당
// cursor.style.left = e.pageX -5 + "px";
// cursor.style.top = e.pageY -5 + "px";
// cursor2.style.left = e.pageX -15 + "px";
// cursor2.style.top = e.pageY -15 + "px";
// GSAP
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});
// 엣날형식 : 화살표 함수에서는 this가 안됩니다.
// span.forEach( function(){
// this.addEventListener("mousseenter", function(){});
// });
// 오버효과
// mouseenter / mouseover / 이벤트 버블링(자식 요소에 이벤트 확산)
// 이벤트 요소에 자식 요소가 있으면 mouseenter를 사용합시다.
span.forEach(span => {
span.addEventListener("mouseenter", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
sourceBtn.forEach(btn => {
btn.addEventListener("mouseenter", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
});
btn.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
});
01. 먼저, 스크립트를 작성할 대상이 되는 요소들의 선택자를 만들어 줍니다.
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const span = document.querySelectorAll(".mouse__wrap p span");
const sourceBtn = document.querySelectorAll(".modal__btn");
02. 마우스가 움직이는 경우의 이벤트를 발생시킵니다. : addEventListener()의 mousemove 속성을 이용합니다. 여기서 e는 마우스 커서를 의미합니다.
window.addEventListener("mousemove", e => {});
03. gsap를 이용해 cursor, cursor2에 커서의 위치값을 지정해 줍니다.(애니메이션을 준다고 생각합니다.)
: gsap.to( 요소, {애니메이션 값} );
- duration : 애니메이션 지속시간
- left : 왼쪽 좌표 값(이동 위치)
- top : 위쪽 좌표 값(이동 위치)
// GSAP
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});
04. span 요소 위에 마우스가 올라갔을 때와 내려갔을 때의 이벤트를 작성합니다.
: 마우스가 올라가면 active 클래스를 추가하고, 반대의 경우 active 클래스를 제거합니다.
span.forEach(span => {
span.addEventListener("mouseenter", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
05. 소스보기 버튼 위에 마우스가 올라갔을 때와 내려갔을 때의 이벤트를 작성합니다.
: 마우스가 올라가면 active 클래스를 추가하고, 반대의 경우 active 클래스를 제거합니다.
sourceBtn.forEach(btn => {
btn.addEventListener("mouseenter", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
});
btn.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
댓글