GSAP로 마우스를 따라가는 조명 효과입니다.
완성된 화면입니다.
이것은 HTML 코드입니다.
<!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>Javascript :마우스 효과</title>
<link rel="stylesheet" href="http://ture403.m/assets/css/style.css">
<link rel="shortcut icon" href="assets/ico/javascript.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/ico/javascript192x192.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/ico/javascript192x192.png">
</head>
<body>
<header id="header">
<h1><a href="index.html">javascript</a></h1>
<nav>
<ul>
<li><a href="javascript01.html">데이터 저장하기</a></li>
<li><a href="javascript02.html">데이터 불러오기</a></li>
<li><a href="javascript03.html">데이터 실행하기</a></li>
<li><a href="javascript04.html">데이터 제어하기</a></li>
</ul>
<ul>
<li><a href="javascript05.html">문자열 객체</a></li>
<li><a href="javascript06.html">배열 객체</a></li>
<li><a href="javascript07.html">수학 객체</a></li>
<li><a href="javascript08.html">숫자 객체</a></li>
<li><a href="javascript09.html">브라우저 객체</a></li>
<li><a href="javascript10.html">요소 객체</a></li>
<li><a href="javascript11.html">이벤트 객체</a></li>
<ul class="last">
<li><a href="javascript12.html">데이터 효과</a></li>
<li><a href="javascript13.html">검색 효과</a></li>
<li><a href="javascript14.html">퀴즈 효과</a></li>
<li class="active"><a href="javascript15.html">마우스 효과</a></li>
<li><a href="javascript16.html">슬라이드 효과</a></li>
<li><a href="javascript17.html">패럴랙스 효과</a></li>
<li><a href="javascript18.html">게임 효과</a></li>
</ul>
</ul>
</nav>
</header>
<!-- //header -->
<main id="main">
<div class="container">
<div class="main__desc">
<h3>01. 마우스 이펙트 : 정답 확인하기 유형</h3>
<p>마우스를 따라 다니는 기본적인 효과입니다.</p>
<ul>
<li>데이터 실행하기 : 함수</li>
<li>데이터 저장하기 : 변수</li>
<li>데이터 불러오기 : for(), forEach()</li>
<li>이벤트 객체 : mousemove</li>
<li>이벤트 속성 : clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY</li>
<li>요소 객체 : getAttribute(), querySelector(), querySelectorAll()</li>
</ul>
<a href="mouse/mouseEffect01.html">확인하기</a>
<h3>02. 마우스 이펙트</h3>
<p>GSAP를 이용해서 마우스를 따라다니는 효과입니다. </p>
<ul>
<li>데이터 저장하기 : 변수</li>
<li>데이터 실행하기 : 함수, 화살표 함수</li>
<li>데이터 불러오기 : for(), forEach()</li>
<li>이벤트 객체 : mousemove , mouseenter, mouseleave</li>
<li>요소 객체 : querySelector()</li>
<li>라이브러리 : GSAP : to()</li>
</ul>
<a href="mouse/mouseEffect02.html">확인하기</a>
<h3>03. 마우스 이펙트</h3>
<p>마우스를 따라다니는 조명 효과입니다.</p>
<ul>
<li>데이터 저장하기 : 변수</li>
<li>데이터 실행하기 : 함수, 화살표 함수</li>
<li>데이터 불러오기 : for(), forEach()</li>
<li>이벤트 객체 : mousemove</li>
<li>요소 객체 : querySelector(), clientWidth, clientHeight, offsetWidth, offsetHeight, getBoundingClientRect() </li>
<li>라이브러리 : GSAP : to()</li>
<li>CSS : background-attachment : fixed;</li>
</ul>
<a href="mouse/mouseEffect03.html">확인하기</a>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:[email protected]">[email protected]</a>
</footer>
<!-- //footer -->
</body>이것은 주요 CSS 코드입니다.
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center center;
background-size: cover;
}
body.img01 {
background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02 {
background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03 {
background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04 {
background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05 {
background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06 {
background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07 {
background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08 {
background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09 {
background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10 {
background-image: url(../img/mouseEffect10-min.jpg);
}
body::after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(5,36,70,0.87);
z-index: -1;
}
body.img01::after{
background: rgba(5,36,70,0.87);
}
body.img02::after{
background: rgba(34,36,70,0.87);
}
body.img03::after{
background: rgba(88,36,70,0.87);
}
body.img03::after{
background: rgba(10, 2, 9, 0.87);
}
body.img04::after{
background: rgba(88,20,20,0.87);
}
body.img05::after{
background: rgba(83, 14, 14, 0.87);
}
body.img05::after{
background: rgba(88, 65, 20, 0.87);
}
body.img06::after{
background: rgba(90, 64, 12, 0.87);
}
body.img07::after{
background: rgba(87, 69, 34, 0.87);
}
body.img08::after{
background: rgba(133, 106, 54, 0.87);
}
body.img09::after{
background: rgba(173, 138, 72, 0.87);
}
body.img10::after{
background: rgba(194, 162, 102, 0.87);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header p {
margin-bottom: 10px;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
width: 30px;
height: 30px;
display: inline-block;
color: #fff;
text-align: center;
line-height: 30px;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}이것은 CSS 재설정 코드입니다.
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/hallym/Hallym.css');
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');
@import url('https://webfontworld.github.io/NanumSquare/NanumSquare.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/gimpo/GimpoGothic.css');
@import url('https://webfontworld.github.io/BMJua/BMJua.css');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
/* reset */
*{
margin: 0;
padding: 0;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
ul,ol,li {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
.font01 {
font-family: 'NexonLv1Gothic';
font-weight: 300;
}
.font02 {
font-family: 'Hallym';
}
.font03 {
font-family: 'TheJamsil';
}
.font04 {
font-family: 'NanumSquareNeo';
}
.font05 {
font-family: 'NanumSquare';
}
.font06 {
font-family: 'PyeongChang';
}
.font07 {
font-family: 'Wooridaum';
}
.font08 {
font-family: 'GimpoGothic';
}
.font09 {
font-family: 'BMJua';
}
.font10 {
font-family: 'Orbitron';
font-weight: 400;
}이것은 HTML의 CSS 코드입니다.
#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;
}
.mouse_text p {
font-size: 3vw;
line-height: 2.0;
z-index: 1;
}
.mouse_text p:last-child {
font-size: 3.5vw;
}
.mouse_text p span {
color: yellowgreen;
}
.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;
z-index: 0;
}- 배경 이미지를 넣었습니다: url(img/mouseEffect03-min.jpg) in .mouse_cursor.
- 및 배경 크기: 표지; 전체적으로 그림을 주기 위해 사용했습니다.
- 배경 위치: 센터 센터; 이것을 사용하여 이미지를 중앙에 배치했습니다.
- 배경 첨부: 고정; 스크롤할 때 배경 이미지가 정지된 것처럼 보이는 효과를 만들기 위해 배경 이미지를 고정하는 데 이것을 사용했습니다.
이것은 JS 코드입니다.
// 선택자
const cursor = document.querySelector(".mouse_cursor");
// 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,
});
});- 선택자에 커서와 원이라는 두 개의 변수를 만들었습니다.
- curor의 경우 .mouse_cursor를 넣고 curor의 값을 호출하는 getBoundingClientRect 메서드를 사용하여 원 안에 넣습니다.
- 나는 window에 mousemove 이벤트를 작성하고 gsap을 사용하여 duration, left 및 top의 값을 작성했습니다.
- 왼쪽과 위쪽에 e.pageX,Y를 호출하고 커서가 중앙으로 올 것이기 때문에 원의 너비와 높이 값을 2로 나눴습니다.
코드 작성 시 필요한 항목 구성
- 데이터 저장: 변수
- 현재 데이터: 함수, 화살표 함수
- 데이터 로드: for(), forEach()
- 이벤트 객체: mousemove , mouseenter , mouseleave
- 항목 객체: querySelector()
- 라이브러리: GSAP: to()
| 재산 | 설명 |
| 사용자 선택 | 사용자가 페이지에서 텍스트를 선택할 수 있는지 여부를 결정합니다. |
| 포인터 이벤트 | 항목의 클릭 또는 마우스 이벤트 발생 여부 제어 |
| 박바닥 크기 | 배경 이미지의 크기를 조정하는 데 사용되는 CSS 속성 중 하나입니다. |
| 배경 위치 | 배경 이미지의 위치를 조정하는데 사용 |
| 배경-부착 | 배경 이미지의 스크롤 동작을 결정하는 속성 |
| 마우스 움직임 | 마우스 포인터가 요소로 이동할 때 전달되는 마우스 이벤트 중 하나입니다. |
| getBoundingClientRect() | 요소 위치 및 크기 정보를 반환하는 DOM API의 메서드 중 하나입니다. 이 메서드가 호출되면 요소의 위치와 크기에 대한 정보가 포함됩니다. DOMRect 개체가 반환됩니다. |
마우스 효과 확인 #1
https://ture403.45
마우스 효과 01
이것은 마우스 효과 번호 01입니다. 완성된 예는 다음과 같습니다. 이것은 HTML 코드입니다. Javascript Mouse Effect01 Mouse Effect – Follow the mouse 1 2 3 4 5 6 사랑은 눈으로 보는 것이 아니라 마음으로 보는 것이다. 사랑은 보이지 않는다
ture403.tistory.com
마우스 효과 2 표시
https://ture403.46
완성된 큰 캔버스입니다.
https://ture403.github.io/web2023/javascript/mouse/mouseEffect03.html
02. 마우스 효과
일년 내내 휴일이라면; 스포츠는 일만큼 지루할 것입니다. 매일이 휴가 같다면 노는 것도 일하는 것만큼이나 지루할 것이다.
ture403.github.io
완성된 소스입니다.
https://github.com/ture403/web2023/blob/main/javascript/mouse/mouseEffect03.html