마우스 이펙트 02
마우스 이펙트에 대한 사이트 두번째 제작입니다.
위 사이트를 HTML, CSS, JAVASCRIPT를 만들었고 아래는 코드들입니다.
HTML
<body class="img02 bg02 Gmark">
<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__cursor"></div>
<div class="mouse__cursor2"></div>
<div class="mouse__text">
<p><span>I love the sea</span> because it gives up so much without complaining</p>
<p><span>나는 바다를 사랑한다.</span> 왜냐하면 바다는 아무런 불평도 없이 많은 것을 나눠주기 때문이다.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:kshkmn0929@naver.com">kshkmn0929@naver.com</a>
</footer>
<!-- footer -->
CSS
<style>
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.9;
}
.mouse__text p:last-child {
font-size: 2vw;
}
.mouse__text p span {
color: aquamarine;
}
.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;
transition: transform 0.3s;
}
.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.3s;
}
.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);
background-color: rgba(255, 166, 0, 0.6);
}
.mouse__cursor.active3 {
transform: scale(0);
}
.mouse__cursor2.active3 {
transform: scale(5);
background-color: rgba(255, 166, 0, 0.6);
}
</style>CSS 설명
justify-content : Flexbox 레이아웃에서 flex items의 주 축(main axis)을 따라 정렬하는 방법을 설정합니다.justify-content 속성은 flex-container에 적용되며, 값으로는 flex-start, flex-end, center, space-between, space-around 등이 있습니다.
flex-direction : Flexbox 레이아웃에서 주 축(main axis)을 설정합니다. flex-direction 속성은 flex-container에 적용되며, 값으로는 row, row-reverse, column, column-reverse 등이 있습니다.
overflow : overflow: 요소의 내용(content)이 요소의 크기를 초과할 때, 어떻게 처리할지를 설정합니다. overflow 속성은 요소에 적용되며, 값으로는 visible, hidden, scroll, auto 등이 있습니다.
z-index : 요소의 쌓임 순서(z-order)를 설정합니다. z-index 속성은 요소에 적용되며, 값으로는 숫자를 입력합니다. 숫자가 크면 해당 요소는 다른 요소 위에 쌓이고, 작으면 다른 요소 아래에 쌓입니다.
user-select : 사용자의 텍스트 선택 기능을 제어합니다. user-select 속성은 요소에 적용되며, 값으로는 auto, none, text, all 등이 있습니다.
pointer-events : 요소가 마우스 이벤트를 수신할지 여부를 설정합니다. pointer-events 속성은 요소에 적용되며, 값으로는 auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all 등이 있습니다.
transition: transform 0.3s : 요소에 변형(transform)이 적용될 때, 변형이 일어난 상태에서 지정된 시간(duration)만큼의 애니메이션 효과를 추가합니다. transition 속성은 요소에 적용되며, 값으로는 property, duration, timing-function, delay 등이 있습니다. 이 코드는 transform 속성의 변형에 대해 0.3s의 지연시간(delay)을 갖는 애니메이션을 적용합니다.
transform: scale() : 요소의 크기와 위치 등을 변경할 수 있는 속성으로, scale() 함수를 사용하여 요소를 확대 또는 축소할 수 있습니다. transform 속성은 요소에 적용되며, 값으로는 scale(), translate(), rotate(), skew() 등이 있습니다. 이 코드는 scale() 함수를 사용하여 요소를 확대 또는 축소합니다.
JAVASCRIPT
<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 + "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("active2");
cursor2.classList.add("active2");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
document.querySelectorAll("#header p").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});
});
</script>
Javascript 설명
GSAP(GreenSock Animation Platform)은 자바스크립트로 웹 애니메이션을 만들기 위한 라이브러리입니다. GSAP은 애니메이션의 성능이 우수하며, 매우 직관적이고 다양한 기능을 제공합니다.
다양한 애니메이션 기능: GSAP은 다양한 애니메이션 기능을 제공합니다. Tween, Timeline, ScrollTrigger 등의 클래스를 사용하여 다양한 애니메이션 효과를 만들 수 있습니다.
직관적인 문법: GSAP은 매우 직관적인 문법을 제공하여 애니메이션을 쉽게 만들 수 있습니다. TweenMax.to("#myElement", 1, {x: 100, y: 200})와 같이, 요소의 속성을 변경하는 TweenMax 객체를 생성하고, to() 메소드를 사용하여 속성을 변경할 수 있습니다.
높은 성능: GSAP은 애니메이션의 성능이 매우 우수합니다. GPU 가속을 사용하여 애니메이션을 처리하므로, 매우 빠르게 실행됩니다.
크로스 브라우징: GSAP은 다양한 브라우저에서 동작합니다. IE 6부터 최신 브라우저까지 지원합니다.
추가설명
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 (GreenSock Animation Platform) 라이브러리를 사용하여 마우스 커서를 제어하고 애니메이션 효과를 추가하는 것입니다.
gsap.to() 함수를 사용하여 애니메이션 효과를 추가합니다.
첫 번째 매개 변수 cursor와 cursor2는 애니메이션을 적용할 대상 요소입니다.
duration 속성은 애니메이션의 지속 시간을 나타냅니다. 첫 번째 애니메이션은 0.3초 동안 지속되며, 두 번째 애니메이션은 0.8초 동안 지속됩니다.
left와 top 속성은 각각 요소의 왼쪽과 위쪽 위치를 설정합니다. e.pageX 및 e.pageY는 현재 마우스 위치를 나타냅니다. 두 번째 애니메이션의 left와 top 값을 더 작게 설정하여 더 큰 움직임 효과를 만듭니다. -5와 -15는 각각 요소의 위치를 미세 조정하기 위한 값입니다.
따라서 이 코드는 마우스 커서가 움직일 때 요소들이 따라 움직이는 애니메이션 효과를 만드는 코드입니다.이 코드는 GSAP 라이브러리를 사용하여 마우스 커서를 따라다니는 요소를 만드는 코드입니다.
gsap.to() 메소드를 사용하여 요소(cursor)를 애니메이션화합니다. duration 속성은 애니메이션의 지속 시간을 설정합니다. left와 top 속성은 해당 요소(cursor)의 위치를 설정합니다. 이 위치는 마우스의 위치(e.pageX, e.pageY)에서 5px 왼쪽과 위쪽으로 이동한 위치입니다.
즉, 마우스의 위치를 기반으로 cursor 요소를 움직여 마우스 커서를 따라다니게 만드는 코드입니다.
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");
});
});이 코드는 document.querySelectorAll()를 사용하여 페이지의 모든 .mouse__text span 요소를 선택합니다. 그런 다음 forEach()를 사용하여 각 요소에 이벤트 리스너를 추가합니다.
addEventListener()를 사용하여 각 span 요소에 "mouseenter" 및 "mouseleave" 이벤트 리스너를 추가합니다.
마우스가 span 요소 위에 있을 때 "mouseenter" 이벤트가 발생하면 cursor 및 cursor2 요소에 "active" 클래스가 추가됩니다. 이로 인해 이전에 정의된 gsap.to() 애니메이션의 active 클래스가 적용되어 커서가 움직일 때 애니메이션 효과를 더욱 강조합니다.
마우스가 span 요소에서 벗어날 때 "mouseleave" 이벤트가 발생하면 cursor 및 cursor2 요소에서 "active" 클래스가 제거됩니다. 이로 인해 이전에 정의된 gsap.to() 애니메이션의 active 클래스가 해제되어 커서가 일반 상태로 돌아갑니다.
마무리
window.addEventListener("mousemove", e => {} )이 코드는 window 객체에 mousemove 이벤트 리스너를 추가합니다.
addEventListener()를 사용하여 mousemove 이벤트에 대한 새 이벤트 리스너를 등록합니다.
콜백 함수 e => {}는 mousemove 이벤트가 발생할 때마다 실행됩니다. 즉, 마우스가 움직일 때마다 실행됩니다.
이벤트 콜백 함수 내부에서는 마우스 이벤트 객체 e를 통해 마우스 위치 정보를 얻을 수 있습니다. 이 정보를 사용하여 마우스 커서의 위치를 업데이트하고 이전에 정의된 gsap.to() 애니메이션 효과를 적용할 수 있습니다.
따라서 이 코드는 마우스 움직임에 반응하여 마우스 커서의 위치를 업데이트하고 애니메이션 효과를 적용하는 코드입니다. 이는 웹 페이지에서 마우스 커서의 동적인 움직임을 구현하는 데 사용됩니다.
그렇기에 위 코드 안에 정리된 코드들을 집어넣어 마우스가 움직일 때 마다 실행이 될 수 있게 만들어줍니다.