“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 마우스 효과 GSAP 사용
💜 마우스 효과
오늘은 마우스 효과
GSAP를 이용한 마우스 애니메이션 효과를 써보겠습니다.
<body class="img02 bg03 font10">
<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>The best way to <span>predict the future </span>is to invent it.</p>
<p>미래를 예측하는 가장 좋은 방법은 <span>미래를 창조 </span>하는 것이다.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- footer -->body안에 header와 main, footer 영역을 나누어 텍스트를 넣어줍니다.
폰트 CSS
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/tmon/Tmon.css');
@import url('https://webfontworld.github.io/daegu/DalseoDarling.css');
@import url('https://webfontworld.github.io/suseong/SuseongDotum.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/kohi/KOHIBaeum.css');
@import url('https://webfontworld.github.io/jeju/JejuGothic.css');
@import url('https://webfontworld.github.io/tway/TwayAir.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');
@import url('https://webfontworld.github.io/score/SCoreDream.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
.font01 {
font-family: 'TheJamsil';
font-weight: 300;
}
.font02 {
font-family: 'Tmon';
font-weight: 300;
}
.font03 {
font-family: 'DalseoDarling';
font-weight: 300;
}
.font04 {
font-family: 'SuseongDotum';
font-weight: 300;
}
.font05 {
font-family: 'HealthsetGothic';
font-weight: 300;
}
.font06 {
font-family: 'KOHIBaeum';
font-weight: 300;
}
.font07 {
font-family: 'JejuGothic';
font-weight: 300;
}
.font08 {
font-family: 'TwayAir';
font-weight: 300;
}
.font09 {
font-family: 'TmoneyRoundWind';
font-weight: 300;
}
.font10 {
font-family: 'SCoreDream';
font-weight: 300;
}
기본 폰트, 이미지 CSS
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center center;
background-size: cover;
/* background-color: #f1cfcf; */
}
body.img01 {
background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02 {
background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03 {
background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04 {
background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05 {
background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06 {
background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07 {
background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08 {
background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09 {
background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10 {
background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
content: '';
position: absolute;
left:0; top:0;
width: 100%;
height: 100vh;
background-color: rgba(5, 66, 70, 0.87);
z-index: -1;
}
body.bg01::after {
background-color: rgba(34, 5, 70, 0.87);
}
body.bg02::after {
background-color: rgba(5, 70, 40, 0.87);
}
body.bg03::after {
background-color: rgba(53, 70, 5, 0.87);
}
body.bg04::after {
background-color: rgba(70, 23, 5, 0.87);
}
body.bg05::after {
background-color: rgba(15, 5, 70, 0.87);
}
body.bg06::after {
background-color: rgba(70, 5, 14, 0.87);
}
body.bg07::after {
background-color: rgba(1, 23, 24, 0.945);
}
body.bg08::after {
background-color: rgba(47, 70, 5, 0.87);
}
body.bg09::after {
background-color: rgba(70, 44, 5, 0.87);
}
body.bg10::after {
background-color: rgba(5, 66, 70, 0.87);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header p {
margin-bottom: 10px;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
width: 30px;
height: 30px;
display: inline-block;
color: #fff;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}
이렇게 기본 CSS설정을 해 주고!
script안에서 선택자를 만들고, 좌표값을 불러와줍니다.
선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");커서 좌표값 할당
window.addEventListener("mousemove", e => {window 함수를 이용해 안에 넣어줍니다.
// 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를 사용해서 값을 불러올수도 있습니다.
//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 문 사용
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 li.active").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("#footer").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});
CSS
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">link로 CSS를 넣어줍니다.
그 다음 style태그 안에 따로 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: 2vw;
}
.mouse__text p span {
color: rgb(33, 159, 197);
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(225,225,225,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(225,225,225,0.3);
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(225,166,0,0.6);
}
.mouse__cursor.active2 {
transform: scale(0);
}
.mouse__cursor2.active2 {
transform: scale(2);
background-color: rgba(64, 225, 0, 0.473);
}
.mouse__cursor.active3 {
transform: scale(0);
}
.mouse__cursor2.active3 {
transform: scale(2);
background-color: rgba(225, 82, 0, 0.6);
}
</style>cursor: none; 를 사용해 마우스 커서를 없애줍니다.
text에 대한 css를 설정해주고
cursor 모양에 대한 css를 설정해줍니다.
✨ GSAP : to()
웹 애니메이션을 만들기 위해 사용되는 함수 중 하나입니다.
이 함수는 특정 요소를 특정 지점까지 이동시키는 애니메이션을 만들 때 사용됩니다.
반응형