반응형
자바스크립트 마우스 이펙트 4
gsap을 이용하여 마우스위치에 따라 움직이는 화면을 만들었습니다.
VSCode
<!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>마우스 이펙트04</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
#header {
z-index: 2;
}
.mouse__wrap {
}
.mouse__img {
width: 100%;
height: 110vh;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mouse__img figure {
width: 50vw;
height: 60vw;
position: relative;
overflow: hidden;
box-shadow: 0 50px 100px rgba(0,0,0,0.3);
border-radius: 5px;
transition: transform 500ms ease;
cursor: none;
}
.mouse__img figure:hover {
transform: scale(1.025);
}
.mouse__img figure img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
object-fit: cover;
filter: sepia(35%) saturate(200%);
}
.mouse__img figure figcaption {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
line-height: 1.4;
}
.mouse__img figure figcaption p {
color: #000;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
z-index: 1000;
user-select: none;
pointer-events: none;
}
</style>
</head>
<body class="img07 bg02 font07">
<header id="header">
<h1>Javascript Mouse Effect04</h1>
<p>마우스 이펙트 - 마우스 따라다니는 공, 마우스 위치에 따라 움직이는 화면</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">4</a></li>
<li class="active"><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__img">
<figure>
<img src="img/MouseEffect09-min.jpg" alt="이미지">
<figcaption>
<p>I never dreamed about success, I Workd for it</p>
<p>나는 결코 성공에 대해 꿈꾸지 않았다. 나를 꿈을 위해 행동했다.</p>
</figcaption>
</figure>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
document.querySelector(".mouse__img figure").addEventListener("mousemove", e => {
gsap.to(".mouse__cursor", {
duration: .2,
left: e.pageX,
top: e.pageY
});
//마우스 좌표 값
let mousePageX = e.pageX;
let mousePageY = e.pageY;
//전체 화면 가로 값
// window.innerWidth //1920 브라우저 크기
// window.outerWidth //1920 브라우저 크기(스크롤 바 포함)
// window.screen.width //1920 화면 크기
//마우스 좌표값 기준점 가운데 설정
let centerPageX = window.innerWidth / 2 -mousePageX;
let centerPageY = window.innerHeight / 2 -mousePageY;
console.log(mousePageX)
console.log(window.innerWidth)
console.log(centerPageX)
//이미지 움직이기
// const imgMove = document.querySelector(".mouse__img figure img");
// imgMove.style.transform = "translate("+centerPageX/20+"px,"+centerPageY/20+"px)";
gsap.to(".mouse__img figure img", {
duration: 1,
left: -50+centerPageX/5,
top: centerPageY/5
});
});
</script>
</body>
</html>
마우스를 움직일 때 이미지가 약간 커지도록 정의되어 있으며, 마우스 위치에 따라 이미지가 움직입니다.
또한 마우스 커서를 따라다니는 작은 흰색 동그라미가 있습니다. 이 페이지에는 GSAP 라이브러리도 사용되어 있습니다.
script
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
document.querySelector(".mouse__img figure").addEventListener("mousemove", e => {
gsap.to(".mouse__cursor", {
duration: .2,
left: e.pageX,
top: e.pageY
});
//마우스 좌표 값
let mousePageX = e.pageX;
let mousePageY = e.pageY;
//전체 화면 가로 값
// window.innerWidth //1920 브라우저 크기
// window.outerWidth //1920 브라우저 크기(스크롤 바 포함)
// window.screen.width //1920 화면 크기
//마우스 좌표값 기준점 가운데 설정
let centerPageX = window.innerWidth / 2 -mousePageX;
let centerPageY = window.innerHeight / 2 -mousePageY;
console.log(mousePageX)
console.log(window.innerWidth)
console.log(centerPageX)
//이미지 움직이기
// const imgMove = document.querySelector(".mouse__img figure img");
// imgMove.style.transform = "translate("+centerPageX/20+"px,"+centerPageY/20+"px)";
gsap.to(".mouse__img figure img", {
duration: 1,
left: -50+centerPageX/5,
top: centerPageY/5
});
});
</script>gsap 라이브러리를 로드합니다. 이 라이브러리는 gsap.to() 메서드를 통해 요소에 대한 애니메이션 효과를 제공하는 JavaScript 애니메이션 라이브러리입니다.
다음으로, document.querySelector() 메서드를 사용하여 마우스 이벤트를 감지할 요소의 클래스 이름에 해당하는 .mouse__img figure 요소를 찾습니다. 해당 요소에 대해 addEventListener() 메서드를 사용하여 mousemove 이벤트를 등록합니다.
마우스 커서의 위치를 트랙하기 위해 gsap.to() 메서드를 사용합니다. 이 메서드는 다음과 같은 인수를 받습니다.
- 대상 요소의 선택자
- 애니메이션에 걸리는 시간
- 대상 요소의 속성과 값을 포함한 객체
여기서는 .mouse__cursor 요소를 대상으로 하고, left와 top 속성을 사용하여 마우스 커서의 위치를 설정합니다.
그 다음으로, 마우스 커서의 좌표 값과 전체 화면 가로 값, 즉 브라우저 크기를 이용하여 마우스 좌표값의 기준점을 설정합니다. window.innerWidth를 사용하여 전체 화면의 가로 크기를 가져오고, 이를 마우스 좌표값에서 뺀 값에 대한 중심점을 설정합니다.
마지막으로, gsap.to() 메서드를 사용하여 이미지에 대한 애니메이션을 적용합니다. left와 top 속성을 사용하여 이미지의 위치를 설정하고, 마우스 좌표값을 이용하여 이미지를 움직입니다.
이 때, 중심점 값을 이용하여 이미지의 움직임이 부드러워지도록 합니다.