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>
<style>
#header {
z-index: 10;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.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/mouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
</head>
<body class="img03 bg03 font03">
<header id="header">
<h1>Javascript Mouse Effect01</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>
<!-- //heaver -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>"The only way to do great work is to love what you do."</p>
<p>큰 일을 해내는 유일한 방법은 자신이 하는 일을 사랑하는 것이다.</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
</footer>
<!-- //footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// 선택자
const cursor = document.querySelector(".mouse__cursor");
// console.log(cursor.clientWidth);
// console.log(cursor.clientHeight);
// console.log(cursor.offsetWidth);
// console.log(cursor.offsetHeight);
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
});
})
</script>
</body>
</html>- HTML태그는 별로 특별할 게 없습니다.
- 커서를 대신할 div태그 하나와 문자가 들어가는 태그가 끝입니다.
const cursor = document.querySelector(".mouse__cursor");
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
});
})- 스크립트 또한 특별한 것이 없습니다.
- 마우스가 커서를 따라 다니게 두는 것이죠
- getBoundingClientRect(); 요소의 크기와 위치 정보를 반환하는 DOM 메서드입니다.
- 그 안에 있는 정보를 circle 이라는 변수에 저장을 해준 것이죠
- 그 값을 가지고 원의 위치를 맞춰주었습니다.
body.img03 {
background-image: url(../img/mouseEffect03-min.jpg);
}
body.bg03::after {
background: rgba(35, 117, 121, 0.8);
}
// 외부 CSS
.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/mouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}- 커서의 CSS는 중요합니다.
- 일단 외부 CSS로 배경에 기본적인 사진과 위에 반투명한 색을 주어 반투명한 사진을 배경으로 만들어 주었습니다.
- 그리고 커서를 동그라미로 만들고 그 안에 배경을 홈페이지 사진과 똑같은 사진으로 설정을 해주었습니다.
- 그리고 사진의 사이즈를 cover로 해주어 모든 사진이 나오게 하고
- 그리고 커서의 배경을 페이지에 background-attachment: fixed;로 고정을 시켜둔 뒤 커서가 움직이면 움직이는 부분이 보이게 만든 방법입니다.
- 사진 - 반투명한색 - 사진이 있는데 마지막 사진은 동그란 원을 통해서만 보인다고 이해하면 쉬울 것 같습니다.
-끝~!