728x90
마우스 이펙트 효과를 GSAP를 적용해봤어요 !
body를 먼저 볼게요 !
<body class="img02 bg03 font02">
<header id="header">
<h1>Javascript Mouse Effect02</h1>
<p>마우스 이펙트 - 2</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>
<li ><a href="mouseEffect06.html">6</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>Fix you course on a <span>star</span> and you'll <span>navigate any storm</span></P>
<P>당신의 <span>별</span>을 보고 방향을 정해라. 그러면 <span>폭풍 속에서도 항해</span>를 계속 해 나갈 수 있을것이다</P>
</div>
</div>
</main>
<!--main-->
<footer id="footer">
<a href="mailto:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>mouse_cursor 가 2개있네요? ?
왜 ? why ? 2개의 마우스 커서가 마우스포인터를 따라다니게 할거니까요
각각의 커서가 2가지 이펙트를 보여줄거고 <header>영역 <footer>영역, <span> 태그 부분에 효과를 부여할거에요
<script>안을 살펴 볼게요 !
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
//커서 좌푯값 할당
window.addEventListener("mousemove", e => {
//기존방식
// cursor.style.left= e.pageX+"px";
// cursor.style.top= e.pageY+"px";
// cursor2.style.top= e.pageY+"px";
// cursor2.style.top= e.pageY+"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");
// })
//오버효과 forEach span
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");
});
});
//오버효과 forEach header
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");
});
});
//오버효과 forEach footer
document.querySelectorAll("footer").forEach(el=>{
el.addEventListener("mouseenter",() => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
el.addEventListener("mouseleave",() => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});기존 노가다 방식 & GSAP방식 GSAP !
| 기존 | GSAP : to() | |
| pageX pageY |
window.addEventListener("mousemove", e => { // cursor.style.left= e.pageX+"px"; // cursor.style.top= e.pageY+"px"; // cursor2.style.top= e.pageY+"px"; // cursor2.style.top= e.pageY+"px"; |
window.addEventListener("mousemove", e => { //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}); |
window.addEventListener("mousemove", e => {})를 통해서 마우스가 움직 일때마다 이벤트를 발생시킵니다.
기존엔 cursor에 스타일을 일일히 작업해야 했다면
gsap의 to함수를 이용하여 보기 좋게 작업했어요 !
기존방식은 프레임 드랍이 생기지만 gsap는 컴퓨터의 그래픽 카드리소스를 써서 좀더 부드럽게 사용이 가능해요
<script> forEach & getAttribute 2가지 방식을 연습해 볼거에요 !
forEach
// 오버효과 노가다
// 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");
// })
//오버효과 forEach
document.querySelectorAll(".mouse__text span").forEach(el=>{
// document.querySelectorAll(".mouse__text span")로 span목록을 뽑아와요!
// why? span 테그 위에서 이벤트를 발생시켜야하거든요 !
// forEach((el , i) 구문으로 반복시켜요 !
// el 은 document.querySelectorAll[0~5](".mouse__text span") 까지 반복해서 받는거에요
el.addEventListener("mouseenter",() => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
el.addEventListener("mouseleave",() => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});forEach()방식 & 화살표 함수를 쓰니 적을게 많이 줄어들어 편해졌어요 !
getAttribute()
document.querySelectorAll(".mouse__text span").forEach(span=>{
// document.querySelectorAll(".mouse__text span")로 span목록을 뽑아와요!
let attr = span.getAttribute("class");
// let attr = span.getAttribute("class"); 구문을통해서 span tag의 class명을 배열에 담아 가져와요
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
})
});getAttribute방식 & 화살표 함수를 쓰니 적을게 많이 줄어들어 편해졌어요 !
CSS효과를 볼게요
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgb(125, 255, 255);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9999;
border-radius: 50%;
background-color: rgb(0, 255, 255);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: aquamarine;
}
.mouse__cursor.active2 {
background-color: #00ffff80;
border-color: rgb(179, 255, 0);
transform: scale(7) ;
border-radius : 10px;
}
.mouse__cursor2.active2 {
background-color: #7fffd4a2;
border-color: rgb(255, 21, 0);
transform: scale(1) ;
border-radius : 10px;
}
.mouse__cursor.active3 {
background-color: rgba(255, 30, 0, 0.4);
border-color: rgb(255, 21, 0);
transform: scale(5) skew(140deg);
}
.mouse__cursor2.active3 {
background-color: rgba(255, 30, 0, 0.4);
border-color: rgb(255, 21, 0);
transform: scale(10) rotateX(720deg);
}요기서 마우스 이펙트 효과를 확인할수 있어요 !