마우스를 따라다니며 조명 효과를 주는 이펙트 페이지를 만들었습니다.
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>03. 마우스 이펙트</title>
<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>
</head>
<body class="img07 bg03 font03">
<header id="header">
<h1>Javascript Mouse Effect03</h1>
<p>마우스 이펙트</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li class="active"><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__text">
<p>I never dreamed about success, I worked for it.</p>
<p>나는 결코 성공에 대해 꿈꾸지 않았다, 나는 꿈을 위해 행동했다.</p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
reset.css와 mouse.css에서 이미지, 배경색, 폰트를 설정하고 수정할 수 있습니다.
조명 효과를 극대화 하기 위해 mouse.css에서 배경색을 어둡게 조정해주었습니다.
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
// console.log(cursor.clientWidth); //190
// console.log(cursor.clientHeight); //190
// console.log(cursor.offsetWidth); //200
// console.log(cursor.offsetHeight); //200
const circle = cursor.getBoundingClientRect();
// const DOMRect = {
// bottom : 200,
// height : 200,
// left : 0,
// right : 200,
// top : 0,
// width : 200,
// x : 0,
// y : 0
// }
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration:0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});
</script>GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다.
일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다.
GSAP를 사용하려면 공식 사이트에서 받거나 CDN, 혹은 npm install gsap로 사용할 수 있습니다.
GSAP를 사용하기 위해 title태그 아래에
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
를 추가해주었습니다.
gsap.to선언해주고 그 안에는 2가지 필수값(대상과 속성)이 필요합니다.
duration은 작성하지 않으면 기본값인 0.5초로 나타납니다.
opacity나 rotate, scale 등 다양한 css를 적용할 수 있습니다.
GSAP 실행
const circle = cursor.getBoundingClientRect();
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration:0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});이벤트 메서드 안에 gsap를 사용해 그 안에 대상과 속성값을 넣어줍니다.
mousemove 마우스가 움직이는 경우,
커서라는 대상에 duration값과 원형 안에 커서가 맞게 들어가도록 설정한 속성값을 넣었습니다.