Life isn’t about getting and having, it’s about giving and being.
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
});
이렇게 두 가지 방식으로 예제와 같은 마우스 이펙트를 줄 수 있습니다.