마우스 이펙트 ( 2 )
GSAP (GreenSock Animation Platform)은 자바스크립트로 애니메이션을 만들기 위한 라이브러리입니다.
[ 뒤늦게 따라오는 원이 귀엽죠? ]
VSCode
<body class="img02 bg06 font03">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li class="active"><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__cursor2"></div>
<div class="mouse__text">
<p>If you keep your <span>dream</span>, it's time to realize it.</p>
<p><span>꿈</span>을 계속 간직하고 있으면 반드시 실현할 때가 온다.</p>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
header
선택한 페이지를 쉽게 이동 할 수 있도록 버튼을 만들었습니다.
main
선택자엔 커서클래스, 명언이 들어갈 텍스트 클래스가 있고 중요한 단어,문장에 span태그를 줘서 마우스 이펙트 효과를 넣을 수 있게 만들었습니다.
footer
선택자엔 이메일 링크가 있습니다.
CSS
<style>
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.mouse__text p {
font-size: 2.2vw;
line-height: 1.9;
}
.mouse__text p:last-child {
font-size: 2.7vw;
}
.mouse__text p span {
color: rgb(255, 255, 18);
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
}
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9998;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
user-select: none;
pointer-events: none;
transition: transform 0.5s;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: rgba(255,166,0,0.6);
}
.mouse__cursor.active2 {
transform: scale(0);
}
.mouse__cursor2.active2 {
transform: scale(5) rotateX(360deg);
background-color: rgba(255, 41, 26, 0.6);
}
.mouse__cursor.active3 {
transform: scale(0);
}
.mouse__cursor2.active3 {
transform: scale(5) rotateY(720deg);
background-color: rgba(48, 250, 58, 0.6);
}
</style>.mouse__cursor
사용자가 클릭할 수 없는 동그란 원을 만들었습니다.
.mouse__cursor.active1~3
특정 상황이 되면 커서에 이펙트 효과를 주는 CSS입니다.
script
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
//커서 좌표값 할당
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});
//오버 효과
// document.querySelector(".mouse__text span").addEventListener("mouseenter", () => {
// cursor.classList.add("active");
// cursor2.classList.add("active");
// });
// document.querySelector(".mouse__text span").addEventListener("mouseleave", () => {
// cursor.classList.remove("active");
// cursor2.classList.remove("active");
// });
document.querySelectorAll(".mouse__text span").forEach(el => {
el.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
document.querySelectorAll("#header ul").forEach(el => {
el.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
document.querySelector("#footer").addEventListener("mouseenter", () => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
document.querySelector("#footer").addEventListener("mouseleave", () => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});
</script>
이 코드의 목적은 특정 속성에 커서가 다가가면 이펙트를 활성화 하는 코드입니다.
처음 써보는 코드가 있습니다. GSAP란 건데 설명해보자면,
GSAP (GreenSock Animation Platform) 은 자바스크립트로 애니메이션을 만들기 위한 라이브러리입니다.
매우 높은 성능과 크로스 브라우저 호환성을 가지고 있어서 많은 웹 개발자들에게 인기가 있습니다.
GSAP은 jQuery, React, Vue.js, Angular 등 다른 자바스크립트 프레임워크와 함께 사용할 수 있습니다.
또한 온라인 문서에서 상세한 사용 방법과 예제 코드를 제공하고 있으며, 오픈 소스 라이브러리이기 때문에 누구나 사용할 수 있습니다.
GSAP를 사용하여 좋은점이 커서 좌표값 할당을 불필요한 코드를 줄이며 한번에 쓸 수 있다는 점입니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>[ 외부 주소를 가져와 사용해야 합니다. ]
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
이 코드는 cursor 란 선택자가 커서를 따라다니게 됩니다.
이제 pageX, pageY 를 사용해 마우스 좌표값을 얻을겁니다.
pageX와 pageY는 마우스 이벤트에서 마우스 포인터의 위치를 나타내는 속성입니다.
pageX는 페이지(document)의 왼쪽 끝을 기준으로 마우스 포인터의 X좌표 값을 나타내며, pageY는 페이지(document)의 상단 끝을 기준으로 마우스 포인터의 Y좌표 값을 나타냅니다.
즉, 마우스 포인터가 브라우저 윈도우 내에서 어느 위치에 있는지 상대적인 값을 반환합니다. 이 값은 마우스 이벤트 객체의 프로퍼티로 제공되고 마우스 이벤트에서만 사용 가능하며, 브라우저 윈도우 내에서 마우스 포인터의 위치를 정확하게 파악하는 데 유용합니다.
document.querySelectorAll 메서드를 이용해 (.mouse__text span) 클래스 안에 있는 span 들을 찾습니다.
span이 여러개 이기 때문에 querySelector 뒤에 All이 붙습니다. 요소값이 여러개 이기 때문에 forEach( ) 문을 사용해줍니다.
그렇게 되면
mouseente와 mouseleave는 마우스 이벤트 중 하나로, 요소에 마우스 포인터가 들어가거나 나갈 때 발생하는 이벤트입니다.
mouseente는 마우스 포인터가 요소 안으로 들어갈 때 발생하며,
mouseleave는 마우스 포인터가 요소 밖으로 나갈 때 발생합니다.
이벤트가 발생하면 이벤트 핸들러에서 지정한 함수가 실행됩니다.
이렇게 되면 커서가 span 위치에 가있으면,
<div class="mouse__cursor"></div> 이 클래스에
cursor.classList.add("active");
active란 CSS가 붙어
<div class="mouse__cursor active"></div>
이런 형식이 되있는겁니다.
커서가 span 위치에서 벗어나면,
cursor.classList.remove("active");
이 코드가 추가되어 active가 사라(remove)지게 됩니다.
그러면 커서에 추가 돼있던 active CSS효과가 사라지게 되는겁니다.
이전글
(마우스 이펙트1)
https://ehcjswo.tistory.com/47
다음글
(마우스 이펙트3)