“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
마우스 이펙트 효과 두번째
이번 시간에는 GSAP를 사용해서 마우스가 부드럽게 따라다니는 효과를 주도록 하겠습니다. 첫번째 효과에서 마우스의 움직임이 부드럽지 못했는데 이번 효과 에서는 더욱 부드럽게 사용하기 위해서 라이브러리 효과 GSAP를 사용해보도록 하겠습니다.
두번째 효과에서 사용해보자!
- 데이터저장하기 : 변수
- 데이터 실행하기 : 함수, 화살표 함수
- 데이터 불러오기 : for(), forEach()
- 이벤트 객체 : mousemove,mouseenter,mouseleave
- 요소 객체 : querySelector
- 라이브러리 : GSAP: to()
HTML
<header id="header">
<h1>Javascript mouseEffect02</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>love</span> what you have.</p>
<p>가진것을 <span>사랑</span>하라.</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
</footer>
<!-- //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.5vw;
line-height: 1.9;
}
.mouse__text p :last-child {
font-style: 4vw;
}
.mouse__text p span {
color: rgb(250, 142, 202);
}
.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;
transform: transform0.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.5);
user-select: none;
pointer-events: none;
transform: transform 0.3s;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: rgba(225, 166, 0, 0.6);
}
</style>HTML & CSS
- mouse__wrap을 만들어 준후 cursor를 2개 만들어 줍니다. 그리고 mouse__text에 들어갈 문구를 설정해줍니다.
- 헤더 위에 style태그를 만들어서 mouse__text에 들어갈 요소들에게 스타일을 입혀줍니다.
- cursor와 cursor2에 속성값을 부여하고 active에는 움직일 때 나타낼 수 있는 색상을 부여해줍니다.
JAVASCIRT
<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");
});
//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");
})
})
});
</script>javascript
- 먼저 cursor와 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"; // pageX,Y를 두번 만들어줘서 페이지에서 X,Y값이 구해질 수 있도록 합니다. - GSAP 애니매이션 라이브러리 코드를 가져와서 script위에 script를 추가해 줍니다.
- 효과를 줄 cursor와 cursor2에 효과를 줍니다.
- 오버 효과를 주기 위해서 "active"를 사용해서 전체 mousemove가 mouseenter 때와 mouseleave 때 add와 remove될 수 있도록 설정 해줍니다.
- 오버 효과를 나란히 주었다면 이제 주석 표시를 해준후 forEach를 사용해서 나타내 보도록 하겠습니다.
- forEach는 다중문이라 querySelectorAll로 표시해줍니다. 글이 mouse__text안에 span안에 있어서 옆에 span값까지 써준 후 화살표 함수를 이용해서 sapn의 요소으 값이므로 span을 설정해 준 후 sapn.이벤트 객체 처리를 해줍니다.
- 그리고 그 안에는 "active"가 들어가게 되면 실행이 될 수 있습니다.
header와 footer에서도 변화를 줘보자!
- 글씨에만 주는 효과가 심심하므로 header쪽에 번호를 클릭할 때와 footer쪽 메일을 클릭할때도 효과가 나올 수 있게 하기 위해서
- CSS에 active2와 3를 추가했습니다.
.mouse__cursor.active2 {
transform: scale(2);
background-color: rgba(255, 235, 135, 0.6);
}
.mouse__cursor2.active2 {
transform: scale(1);
background-color: rgba(138, 136, 255, 0.6);
}
.mouse__cursor.active3 {
transform: scale(3);
background-color: rgba(88, 170, 126, 0.6);
}
.mouse__cursor2.active3 {
transform: scale(2);
background-color: rgba(95, 119, 250, 0.6);
}- 그리고 javascript로 돌아와서 forEach문을 이용해서 출력시켜 보면
- 박스 안에 있는 2번을 클릭할 때 효과를 넣어줄것이기 때문에 먼저 ".mouse__text" span이 있던 자리에 2번을 클리할때 나오는 효과가 header쪽에 li에 있는데 id로 header를 불러 오는데 header안 li에 있으면서 active안에 있기 때문에 #header li active를 써줍니다.
- 그 후 active 2를 넣어서 실행시켜 줍니다.
- 메일을 클릭할때 효과가 나오기 위해서는 #footer를 써주고 active3를 넣어주면 실행이 됩니다.
완성된 마우스 이펙트 02
📚오늘 배운 속성
|
clientWidth
|
X의 좌표 값 - 브라우저 기준 |
|
clientHeight
|
Y의 좌표 값 - 브라우저 기준 |
|
offsetWidth
|
X의 좌표 값 - 요소 기준 |
|
offsetHeight
|
Y의 좌표 값 - 요소기준 |
|
mousemove
|
브라우저 사이즈 변경 됐을 때
|
|
mouseenter
|
요소 위에 포인터 요소 위치가 벗어 났을 때
|
|
mouseleave
|
요소 위에 포인터 요소 위치가 벗어 났을 때
|
|
GSAP : to ()
|
자바스크립트 애니매니션 라이브러리 |
첫번째 효과 보러가기!