728x90
오늘은 흐릿한 화면에서 마우스 커서에 따라 뒷배경이 보이는 마우스 이펙트를 넣어주는 법에 대해 설명해보려고 합니다.
완성 예시입니다.
전체 구조
<!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">
<style>
#header {
z-index: 100;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 3vw;
line-height: 1.6;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(img/mouseEffect08-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body class="img08 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>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>Great hopes make great men.</p>
<p>큰 희망이 큰 사람을 만든다.</p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
</footer>
<!-- //footer-->
</body>
</html>CSS는 전 글들을 참고해주세요
body
<body class="img08 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>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>Great hopes make great men.</p>
<p>큰 희망이 큰 사람을 만든다.</p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
</footer>
<!-- //footer-->이번엔 뒷배경을 보이게 해줄 것 이므로 span 태그는 넣지 않았습니다!
style
<style>
#header {
z-index: 100;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 3vw;
line-height: 1.6;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(img/mouseEffect08-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>header에 z-index 값을 넣어 커서 뒤에 묻히지 않도록 설정해줍니다.
mouse__wrap부분에 cursor를 none으로 설정하여 마우스 커서가 보이지 않도록 합니다.
명언 부분의 위치와 폰트 사이즈, 그리고 뒤에 들어갈 뒷배경 사진과 색을 설정해줍니다.
script
선택자
먼저 선택자로 마우스 커서를 선택해줍니다.
//선택자
const cursor = document.querySelector(".mouse__cursor");
마우스 효과 (기존 방식)
각각 속성을 사용하여 cursor 요소의 크기를 측정하는 방법입니다.
console.log로 출력해줍니다.
그 다음 window.addEventListener를 사용하여 마우스를 위로 이동했을 때 이벤트 함수가 실행되도록 해 줍니다.
duration은 애니메이션이 지속되는 시간을 지정하는 값입니다.
그리고 좌표값을 구해줍니다,
console.log(cursor.clientWidth); //190
console.log(cursor.clientHeight); //190
console.log(cursor.offsetWidth); //200
console.log(cursor.offsetHeight); //200
window.addEventListener("mousemove", e => {
gsap.to(cursor, {duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
마우스 효과 cursor.getBoundingClientReact( );
cursor.getBoundingClientRect();는 DOM 요소의 크기와 위치 정보를 제공하는 메서드 입니다.
DOMRect 객체를 반환하며 요소의 위치와 크기를 나타내는 값을 포함합니다.
주로 요소의 위치나 크기를 계산할 때 사용됩니다.
//console.log(cursor.getBoundingClientRect());
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
});
이렇게 두 가지 방식으로 예제와 같은 마우스 이펙트를 줄 수 있습니다.