QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
마우스 이펙트란?
마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다.
예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다.
마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다.
이번 마우스 이펙트에서는 사진 안에서 마우스 커서가 보이지 않게 해주었습니다.
마우스 이펙트(4) 사이트 코드
<!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">
<meta name="view-transition" content="same-origin">
<title>04. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
#header {
z-index: 100;
}
.mouse__wrap {
}
.mouse__img {
width: 100%;
height: 100vh;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mouse__img figure {
width: 50vw;
height: 60vh;
position: relative;
overflow: hidden;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3);
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(40%) saturate(180%) ;
border-radius: 5px;
}
.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__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="img06 bg01 font11">
<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">3</a></li>
<li class="active"><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__img">
<figure>
<img src="img/mouseEffect05-min.jpg" alt="이미지">
<figcaption>
<p>Believe you can and you're halfway there.</p>
<p>당신이 할 수 있다고 믿으면, 이미 절반은 이루었다.</p>
</figcaption>
</figure>
</div>
</div>
</main>
<!-- //main -->
</body>
</html>
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;
//마우스 좌표값 기준점 가운데로 설정
let centerPageX = window.innerWidth / 2 - mousePageX;
let centerPageY = window.innerHeight / 2 - mousePageY;
//이미지 움직이기
const imgMove = document.querySelector(".mouse__img figure img");
imgMove.style.transform = "translate("+centerPageX/20+"px, "+ centerPageY/20+"px)";
});
</script>- 마우스 이벤트 리스너는 ".mouse__img figure" 요소에 등록되어 있으며, 마우스가 움직일 때마다 호출됩니다.
- gsap.to() 함수를 사용하여 ".mouse__cursor" 요소의 left, top 속성 값을 마우스의 현재 위치인 e.pageX, e.pageY 값으로 변경합니다. 이렇게 함으로써, 마우스 커서 이미지가 현재 마우스 위치를 따라 움직이는 효과를 구현합니다.
- 그 다음, 현재 마우스 위치인 e.pageX, e.pageY 값을 가져온 후, window.innerWidth와 window.innerHeight 값을 사용하여 화면 중앙을 기준으로 하는 마우스 위치를 계산합니다.
- 계산된 마우스 위치 값은 centerPageX와 centerPageY 변수에 저장됩니다.
- 마지막으로, ".mouse__img figure img" 요소의 transform 속성 값을 변경하여 이미지를 마우스 위치에 따라 움직이게 합니다.
- centerPageX와 centerPageY 값을 사용하여, 이미지가 움직이는 정도를 조절합니다. 즉, centerPageX 값이 클수록 이미지가 좌우로 움직이고, centerPageY 값이 클수록 이미지가 상하로 움직입니다.
이렇게 함으로써, 마우스 움직임에 따라 이미지를 움직이고, 마우스 커서를 따라 움직이는 기능을 구현할 수 있습니다.
반응형
