클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
마우스 효과 2번째 완성본
이번 작업은 2개의 div가 마우스를
따라오는 형태입니다.
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>
</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>Set a <span class="active3">goal</span> and try to achieve it. Don't be afraid of <span class="active1">failure</span> and try more.</p>
<p><span class="active4">목표</span>를 세우고 그것을 이루기 위해 노력하라. <span class="active2">실패</span>를 두려워하지 말고 더 많이 시도하라</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:skadldldl123@gmail.com"><span class="active5">mailto:skadldldl123@gmail.com</span></a>
</footer>
<!-- //footer -->
</body>코드설명
1. div태그 중 .mouse__wrap은 "마우스를 따라다니는 div태그 2개와" / "가운데에 들어가는 Text"를 담고 있습니다.
2.
.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;
}div태그 중 .mouse__cursor은 제일 앞에 따라 다니는 조그만 모양입니다.
3.
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}div태그 중 .mouse__cursor2은 제일 뒤에 따라 다니는 큰 모양입니다.
4.
<div class="mouse__text">
<p>Set a <span class="active3">goal</span> and try to achieve it. Don't be afraid of <span class="active1">failure</span> and try more.</p>
<p><span class="active4">목표</span>를 세우고 그것을 이루기 위해 노력하라. <span class="active2">실패</span>를 두려워하지 말고 더 많이 시도하라</p>
</div>div태그 중 .mouse__text는 화면 가운데에 있는 글씨 입니다.
p태그 안에 있는 span태그는 이제 마우스가 들어오면 모양이 변합니다.
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");
// 커서 좌표값 할당
// page : 페이지 기준
window.addEventListener("mousemove", (e) => {
//cursor.style.left = event.pageX + "px";
//cursor.style.top = event.pageY + "px";
//cursor2.style.left = event.pageX + "px";
//cursor2.style.top = event.pageY + "px";
// gsap
// gsap.to(대상. { 코드 })
// duration: 몇초
// 대상, {속성, 속성:값, 속성:값}
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});
// 오버 효과
// document.querySelector(".mouse__text span").addEventListener("mouseenter", (e) => {
// cursor.classList.add("active");
// cursor2.classList.add("active");
// });
// document.querySelector(".mouse__text span").addEventListener("mouseleave", (e) => {
// cursor.classList.remove("active");
// cursor2.classList.remove("active");
// });
document.querySelectorAll(".mouse__text span").forEach(function(el, index){
document.querySelector(".active" + (index+1)).addEventListener("mouseenter", (e) => {
cursor.classList.add("active" + (index+1));
cursor2.classList.add("active" + (index+1));
})
document.querySelector(".active" + (index+1)).addEventListener("mouseleave", (e) => {
cursor.classList.remove("active" + (index+1));
cursor2.classList.remove("active" + (index+1));
})
})
// #footer
// document.querySelector(".active1 span").addEventListener("mouseenter", (e) => {
// document.querySelector(".active1").classList.add("active5");
// document.querySelector(".active1").innerHTML = "실패는 없습니다."
// document.querySelector(".active1").style.left.transform = "500px";
// });
// document.querySelector(".active1 span").addEventListener("mouseleave", (e) => {
// document.querySelector(".active1").classList.remove("active5");
// });
});
</script>코드설명
1.
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");document.querySelector("대상");을 이용해서 클래스를 찾습니다.
2.
window.addEventListener("mousemove", (e) => { 코드 });웹페이지에서 마우스를 이동할때마다 마우스의 좌표값을 가져옵니다.
3.
document.querySelectorAll(".mouse__text span").forEach(function(el, index){
document.querySelector(".active" + (index+1)).addEventListener("mouseenter", (e) => {
cursor.classList.add("active" + (index+1));
cursor2.classList.add("active" + (index+1));
})
document.querySelector(".active" + (index+1)).addEventListener("mouseleave", (e) => {
cursor.classList.remove("active" + (index+1));
cursor2.classList.remove("active" + (index+1));
})
}).mouse__text 안에 있는 span태그를 가져옵니다. 그리고 .active클래스를 찾은다음 span태그의 갯수만큼 +1씩 해줍니다.
(active1, active2, active3, active4, active5...)
그리고 해당 클래스 안에서 마우스를 움직이면 class를 추가합니다.
그리고 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});gsap.to(대상, {속성:값 });
그래서 마우스를 움직일때마다 이미지 2개가 애니메이션처럼 부드럽게 움직이면서 따라옵니다.