728x90
반응형
GSAP 사용하기
전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사이트의 소스를 가져와
보안해 주도록 합시다.
마우스 이펙트1 보러가기
https://coding23213.tistory.com/48
마우스 이펙트1 마우스 따라다니기
마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것
coding23213.tistory.com
GSAP의 사이트는 버벅거리는 애니메이션 효과를 부드럽게 만들어 주는 사이트 입니다.
GSAP
Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even neste
greensock.com
이사이트에 들어가서 소스르 받아서 footer밑에 script를 하나 따로 만들어 넣어주어야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>이제 이것을 이용해 마우스 이펙트를 만들어 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.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: 2vw;
line-height: 1.6;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: #f5b8ae;
}
.mouse__coursor {
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__coursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
user-select: none;
pointer-events: none;
transition: transform 0.6s;
}
.mouse__coursor.active {
transform: scale(0);
}
.mouse__coursor2.active {
transform: scale(3);
background-color: rgba(81, 201, 161, 0.3);
}
.mouse__coursor.active1 {
transform: scale(2);
}
.mouse__coursor2.active1 {
transform: scale(3) rotateY(720deg);
background-color: rgba(231, 187, 145, 0.3)
}
.mouse__coursor.active2 {
transform: scale(2);
}
.mouse__coursor2.active2 {
transform: scale(3) rotateX(720deg);
background-color: rgba(105, 177, 219, 0.3)
}
</style>
</head>
<body class="img02 bg07 font08">
<header id="header">
<h1>Javascript Mouse Effect02</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>
<li><a href="mouseeffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__coursor"></div>
<div class="mouse__coursor2"></div>
<div class="mouse__text">
<p>Life is a long lesson in <span>humility</span>.</p>
<p>인생은 <span>겸손</span>에 대한 오랜 수업이다.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//선택자
const cursor = document.querySelector(".mouse__coursor")
const cursor2 = document.querySelector(".mouse__coursor2")
//커서 좌표값 불러오기
window.addEventListener("mousemove", e =>{
// cursor.style.left = e.pageX + "px";
// cursor.style.top = e.pageY + "px";
// cursor2.style.left = e.pageX + "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");
// });
document.querySelectorAll(".mouse__text 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");
});
});
document.querySelectorAll("header h1").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active1");
cursor2.classList.add("active1");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active1");
cursor2.classList.remove("active1");
});
});
document.querySelectorAll("footer a").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
});
</script>
</body>
</html>우선 마우스 커서를 따라다니는 새로운 커서를 두개 만들어 주고, 특정단어에 마우스를 대면 커서가 움직이는 효과도 줍니다.
.mouse__coursor {
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__coursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
user-select: none;
pointer-events: none;
transition: transform 0.6s;
}
.mouse__coursor.active {
transform: scale(0);
}
.mouse__coursor2.active {
transform: scale(3);
background-color: rgba(81, 201, 161, 0.3);
}
.mouse__coursor.active1 {
transform: scale(2);
}
.mouse__coursor2.active1 {
transform: scale(3) rotateY(720deg);
background-color: rgba(231, 187, 145, 0.3)
}
.mouse__coursor.active2 {
transform: scale(2);
}
.mouse__coursor2.active2 {
transform: scale(3) rotateX(720deg);
background-color: rgba(105, 177, 219, 0.3)
}
※마우스 이펙트1에서 쓴 기본 불러오기
//선택자
const cursor = document.querySelector(".mouse__coursor")
const cursor2 = document.querySelector(".mouse__coursor2")
//커서 좌표값 불러오기
window.addEventListener("mousemove", e =>{
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
cursor2.style.left = e.pageX + "px";
cursor2.style.top = e.pageY + "px";
※GASP를 이용해 불러오기
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});gsap를 사용할때 는 .to()를 사용고 그안에 움직일 커서를넣고 {딜레이시간, 가로값, 세로값}을 넣어줍니다.(-를 넣어준이유는 마우스의 커서를 중앙으로 만들기 위해서 각커서의 폭과 넓이 값을 반으로 하여 빼준것입니다.)
그리고 커서를 특정 단어 대면 커서가 움직이는 효과를 줍니다.
※기본 이펙트 주는 법
오버 효과
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(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});mouse__text span을 기준으로 하여 마우스가 span에 진입했을때 효과가 나도록 하고 벗어 났을때 다시 원래 대로 돌아 가게 하였습니다.
사용된Javascript주단어
| GSAP | GreenSock Animation Platform의 약자로, JavaScript 기반의 웹 애니메이션 라이브러리입니다. HTML, CSS 및 JavaScript를 사용하여 다양한 웹 애니메이션을 만들 수 있습니다. |
| mouseenter | 마우스 커서가 요소의 경계선 안으로 진입했을 때 발생하는 이벤트입니다 |
| mouseleave | 마우스 커서가 요소의 경계선을 벗어났을 때 발생하는 이벤트입니다. |
| mousemove | 마우스 커서가 요소 내에서 움직일 때 발생하는 이벤트입니다 |
mouseenter와mousemove의 차이점
·mouseenter는 마우스 커서가 이벤트 대상 요소 내에 진입할 때 발생하며, mousemove는 마우스 커서가 움직일 때마다 발생합니다.이는 mousemove가 커서 움직임에 반응하기 위해 더 자주 발생하는 것을 의미 합니다.
·mouseenter는 이벤트 대상 요소 내에서만 발생하며 하위 요소에서 발생하지 않습니다. 반면에, mousemove는 이벤트 대상 요소 및 하위 요소에서 모두 발생할 수 있습니다.