전에 올렸던 마우스 이펙트를 이용해 이번엔 조명 효과를 만들어 보겠습니다.
마우스 이펙트1
https://coding23213.tistory.com/48
마우스 이펙트1 마우스 따라다니기
마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것
coding23213.tistory.com
마우스 이펙트 2
https://coding23213.tistory.com/50
마우스 이펙트 2 GSAP 이용하기
GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사이트의 소스를 가져와 보안해 주도록 합시다. 마우스 이펙트1 보러가기 https://coding
coding23213.tistory.com
마우스를 따라다니는 조명을 만들어 배경을 잘 볼수 있게 해보겠습니다.
<!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: 1.5vw;
line-height: 1.6;
}
.mouse__text p:last-child {
font-size: 2vw;
line-height: 1.6;
}
.mouse__coursor {
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>
</head>
<body class="img03 bg05 font06">
<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>
<li><a href="mouseeffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__coursor"></div>
<div class="mouse__text">
<p>Only I can change my life. No one can do it for me.</p>
<p>나만이 내 인생을 바꿀 수 있다. 아무도 날 대신해 해줄 수 없다.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// 선택자
const cursor = document.querySelector(".mouse__coursor");
// console.log(cursor.clientWidth); //190
// console.log(cursor.clientHeight); //190
// console.log(cursor.offsetWidth); //200
// console.log(cursor.offsetHeight); //200
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
});
});
</script>
</body>
</html>우선 마우스를 대신하면서 조명을 해줄 커서를 새로 만듭니다.
.mouse__coursor {
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;
}그후 마우스 커서에 추가로 바로 조명 효과를 내주도록 하겠습니다. 배경의 사진과 같은 그림을 넣어주고 background-size: cover; 를해주시고 background-position: center center; 해주시면 커서안에 배경과 같은 사진이 들어 갑니다.
그후 background-attachment: fixed;를 해주시면 준비가 완료 됩니다. 이제 마우스의 값을 가져와 움직이게 해봅시다.
마우스 이펙트 1에서 움직임이 너무 느린 것을 보안하고자
GSAP
Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even neste
greensock.com
에서 가져온 애니메이션 효과로 더욱 부드럽게 하였습니다.
적용을 시키기 위해서는
footer밑에 script를 따로 만들어 밑의 링크를 넣어 주시면 됩니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>그후 마우스의 커서 값을 가져올 변수를 만들고 그변수를 이용해 마우스를 움직여 보도록 하겠습니다.
<script>
// 선택자
const cursor = document.querySelector(".mouse__coursor");
//커서의 폭과 높이를 가져오는 요소지만 구식이라 잘 사용하지않고 getBoundingClientRect()사용
// console.log(cursor.clientWidth); //190
// console.log(cursor.clientHeight); //190
// console.log(cursor.offsetWidth); //200
// console.log(cursor.offsetHeight); //200
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
});
});
</script>gsap.to()를 이용해 사이트에서 가져온 부드러운 애니메이션 효과를 적용시켜주고,
left의 좌표 값 X 와 변수 circle 에서 가져온 폭값을 반으로 나눈후 빼줍니다.
top의 좌표 값 Y 와 변수 circle 에서 가져온 높이값을 반으로 나눈후 빼줍니다.
이러면 커서가 중앙으로 가면서 움직이면 조명 효과를 주는 마우스가 됩니다.
background-attachment: fixed; 설명
| background-attachment | CSS 속성 중 하나로, 요소의 배경 이미지가 스크롤될 때 고정되어 있을지, 스크롤되어 따라 움직일지를 지정하는 속성입니다. |
| fixed; | 배경 이미지가 요소 내용의 스크롤과 상관없이 항상 고정됩니다. |
사용된 Javascript 주단어 정리
| addEventListener("mousemove") | DOM 요소에 이벤트 핸들러를 등록하는 메소드 중 하나입니다. 이 메소드를 사용하여 마우스 포인터의 움직임을 감지하고, 그에 따른 동작을 수행할 수 있습니다. |
| getBoundingClientRect() | DOM 요소의 위치와 크기에 대한 정보를 반환하는 메소드입니다. 이 메소드를 호출하면, 해당 요소의 경계 사각형(border box)의 위치와 크기 정보를 담은 DOMRect 객체를 반환합니다. |
| pageX, pageY | 이벤트가 발생한 위치의 X좌표,Y좌표를 브라우저 창을 기준으로 절대적인 좌표 값을 나타냅니다 |
| clientWidth | DOM 요소의 콘텐츠 영역의 가로폭을 반환하는 읽기 전용 속성입니다. (구식) |
| clientHeight | DOM 요소의 콘텐츠 영역의 높이를 반환하는 읽기 전용 속성입니다. (구식) |
| offsetWidth | DOM 요소의 가로폭을 반환하는 읽기 전용 속성입니다. (구식) |
| offsetHeight | DOM 요소의 높이을 반환하는 읽기 전용 속성입니다. (구식) |