“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
마우스이펙트 2
마우스를 움직이면 따라다니고, 지정 위치에 놓으면 커서가 커지는 효과를 넣은 화면을 만들어 보겠습니다.
✈. 완성화면
✈ . HTML
<body class="img02 bg02 font02">
<header id="header">
<h1>Javascript Mouse Effect01</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>Tyey must often change who would be constant in happiness of wisdom. - Confucius</p>
<p>늘 행복하고 지혜로운 사람이 되려면 <span>자주 변해야</span> 한다. -공자</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
</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: 1.5vw;
line-height: 1.6;
}
.mouse__text p:last-child {
font-size: 2vw;;
}
.mouse__text p span {
color: orange;
}
.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;
}
.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.3);
}
.mouse__cursor.active1 {
transform: scale(0);
}
.mouse__cursor2.active1 {
transform: scale(7);
background-color: rgba(174, 255, 0, 0.3);
}
.mouse__cursor.active2 {
transform: scale(0);
}
.mouse__cursor2.active2 {
transform: scale(7);
background-color: rgba(255, 0, 0, 0.3);
}
</style>POINT
01. mouse__cursor.active --> mouse__cursor2.active에 transform요소로 scale 크기 변화를 주어 커서가 올라갔을 때와 빠져나왔을 때를 다르게 표시합니다.
✈. JAVASCRIPT
<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";
// cursor.style.left = e.pageX +"px";
// cursor.style.top = e.pageY +"px";
//gsap.to
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.5, 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("mouseenter", () => {
// 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").forEach(el =>{
el.addEventListener("mouseenter", () => {
cursor.classList.add("active1");
cursor2.classList.add("active1");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active1");
cursor2.classList.remove("active1");
});
})
document.querySelectorAll("#footer").forEach(el =>{
el.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
})
})
</script>✈.기본형
window.addEventListener("mousemove", e => {
cursor.style.left = e.pageX +"px";
cursor.style.top = e.pageY +"px";
cursor.style.left = e.pageX +"px";
cursor.style.top = e.pageY +"px";🏴. 마우스
//gsap.to
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.5, 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("mouseenter", () => {
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").forEach(el =>{
el.addEventListener("mouseenter", () => {
cursor.classList.add("active1");
cursor2.classList.add("active1");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active1");
cursor2.classList.remove("active1");
});
})
document.querySelectorAll("#footer").forEach(el =>{
el.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
})
🏴. POINT
GSAP : 자바스크립트 애니메이션 라이브러리
CDN 에서 라이브러리를 가져와서 사용하였습니다.
🏳🌈 . CDN이란 Contents Deliverry Network의 약자로, 데이터를 분산된 서버에서 받아오는 것을 말한다.
| GASP | 기본메소드 | gsap.to() | 타겟을 어디로 보냄 |
| gsap.from() | |||
| gsap.fromTo() |