Happiness comes towards those which believe in him.
728x90
반응형
마우스를 움직이면 따라다니는 효과를 준 페이지를 만들었습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02. 마우스 이펙트</title>
</head>
<body class="img02 bg02 font02">
<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>Try not to become a man of success but rather try to become a <span>man of value</span>.</p>
<p>성공한 사람이 되려고 애쓰지 말고, <span>가치 있는 사람</span>이 되려 애써라.</p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>
마우스가 이동하는 방향에 따라 2개의 동그란 커서가 따라다니도록 만들기 위해
div 태그에 cursor1,2라는 클래스명을 주어 2개의 영역 태그를 넣었습니다.
강조한 단어 영역에 마우스가 들어가면 커서 모양이 변화하도록 만들기 위해
p 태그 안에 강조할 단어를 span으로 감싸주었습니다.
css
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<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 h2 {}
.mouse__text p {
font-size: 2.5vw;
line-height: 1.7;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: rgb(222, 208, 46);
}
.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);
}
</style>위에서 만들었던 영역에 css 효과를 주었습니다.
2개의 동그란 커서는 서로 다르게 width, height값을 주어 작은 원과 큰 원 2개를 만들었습니다.
z-index: 9999 는 화면 제일 앞에 표시하기 위해 큰 수치를 주었습니다.
script
<script>
// 선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const hd = document.querySelector("#header ul li.active");
const ft = document.querySelector("#footer a");
// 커서 좌표값 할당
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");
// });
hd.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
hd.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
ft.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
ft.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
document.querySelectorAll(".mouse__text span").forEach((el) => {
el.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
});
</script>GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다.
GSAP를 사용하기 위해 title태그 아래에
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
를 추가해주었습니다.
gasp.to(대상, 속성)
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});
cursor, cursor2 라는 대상에 각 속성(duration, pageX, pageY)값을 넣어주었습니다.
추가로 헤더 영역과 푸터 영역에도 효과를 주기위해 아래와 같은 HTML태그를 담고있는 변수를 선언해줍니다.
const hd = document.querySelector("#header ul li.active");
const ft = document.querySelector("#footer a");
각 변수.addEventListener(); 를 통해 각 구역마다 이벤트를 등록해줍니다.
괄호 안에 이벤트명을 넣어줍니다.
마우스 이벤트 속성
- addEventListener("mousedown") : 마우스 버튼을 클릭했을 때
- addEventListener("mouseup") : 마우스 버튼을 떼는 경우
- addEventListener("mousemove") : 마우스를 움직이는 경우
- addEventListener("mouseenter") : 요소 위에 포인터 요소 위치가 있을 때
- addEventListener("mouseleave") : 요소 위에 포인터 요소 위치가 벗어났을 때
- addEventListener("mouseover") : 요소 위에 포인터 요소 위치가 있을 때
- addEventListener("mouseout") : 요소 위에 포인터 요소 위치가 벗어났을 때