- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
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="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:ture403@gmail.com">ture403@gmail.com</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;
}- .mouse_cursor 안에 background-image: url(img/mouseEffect03-min.jpg)을 넣었습니다.
- 그리고 background-size: cover; 이용해서 이미지를 전체로 주었습니다.
- background-position: center center; 이용해서 이미지를 정중앙에 위치하도록 했습니다.
- background-attachment: fixed; 이용해서 배경 이미지를 고정시켜 스크롤할 때 배경 이미지가 고정되어 있는 것처럼 보이게 하는 효과를 주었습니다.
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,
});
});- 선택자에 cursor와 circle 이라는 변수 2개를 생성했습니다.
- curor는 .mouse_cursor를 넣었고 circle 안에는 curor안에 있는 값을 불러오는 getBoundingClientRect 메서드를 써서 넣었습니다.
- 윈도우에 mousemove의 이벤트를 써서 그안에 gsap를 써서 duration, left , top 값의 값을 넣어주었습니다.
- left, top 안에 e.pageX,Y를 불러와서 커서가 정중앙에 올꺼니까 circle안에 있는 width,height 값을 2로 나누었습니다.
코드 작성시 필요한거 정리
- 데이터 저장하기 : 변수
- 데이터 실행하기 : 함수, 화살표 함수
- 데이터 불러오기 : for(), forEach()
- 이벤트 객체 : mousemove , mouseenter, mouseleave
- 요소 객체 : querySelector()
- 라이브러리 : GSAP : to()
| 속성 | 설명 |
| user-select | 사용자가 페이지에서 텍스트를 선택할 수 있는지 여부를 결정 |
| pointer-events | 요소의 클릭 이벤트나 마우스 이벤트의 발생 여부를 제어 |
| background-size | CSS의 속성 중 하나로, 배경 이미지의 크기를 조절할 때 사용됩니다 |
| background-position | 배경 이미지의 위치를 조절할 때 사용됩니다 |
| background-attachment | 배경 이미지의 스크롤 동작을 설정하는 속성 |
| mousemove | 마우스 이벤트 중 하나로, 마우스 포인터가 요소 내부에서 움직일 때 발생 |
| getBoundingClientRect() | DOM API의 메소드 중 하나로, 요소의 위치와 크기 정보를 반환하는 메소드입니다. 이 메소드를 호출하면 해당 요소의 위치와 크기 정보를 포함하는 DOMRect 객체가 반환됩니다. |
마우스 이펙트 1번 보기
https://ture403.tistory.com/45
마우스 이펙트 01
마우스 이펙트 01번 입니다. 완성된 예제 입니다. HTML 코드입니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Love looks not with the eyes, but with the mind. 사랑은 눈으로 보지 않고
ture403.tistory.com
마우스 이펙트 2번 보기
https://ture403.tistory.com/46
완성된 큰 화면 입니다.
https://ture403.github.io/web2023/javascript/mouse/mouseEffect03.html
02. 마우스 이펙트
If all the year were playing holidays; To sport would be as tedious as to work. 만약 매일매일이 휴일과 같다면 노는 것도 일하는 것 만큼이나 지루할 것이다.
ture403.github.io
완성된 소스 입니다.
https://github.com/ture403/web2023/blob/main/javascript/mouse/mouseEffect03.html