이것은 GSAP를 사용한 마우스 추종 효과입니다.
완성된 화면입니다.
이것은 HTML 코드입니다.
<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">
<meta name="view-transition" content="same-origin">
<title>02. 마우스 이펙트</title>
<link rel="stylesheet" href="http://ture403.m/css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</head>
<body class="img02 bg02 font02">
<header id="header">
<h1>Javascript Mouse Effect02</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li class="active"><a href="mouseEffect02.html">2</a></li>
<li><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_cursor"></div>
<div class="mouse_cursor2"></div>
<div class="mouse_text">
<p>If all the year were playing <span>holidays</span>; To sport would be as tedious as to work.</p>
<p>만약 매일매일이 <span>휴일과</span> 같다면 노는 것도 일하는 것 만큼이나 지루할 것이다.
</p>
</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 코드입니다.
.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: 2vw;
line-height: 2.0;
}
.mouse_text p:last-child {
font-size: 3vw;
}
.mouse_text p span {
color: yellowgreen;
}
.mouse_cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255,255,255,0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse_cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9998;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse_cursor.active {
transform: scale(0);
}
.mouse_cursor2.active {
transform: scale(5);
background-color: rgba(255,166,255,0.6);
}- CSS의 mouse_cursor 및 mouse_cursor2에서 원형 이미지를 만들었습니다.
- 그리고 적극적으로 붙였을 때 효과가 나타나도록 썼습니다.
이것은 JS 코드입니다.
// 선택자
const cursor = document.querySelector(".mouse_cursor");
const cursor2 = document.querySelector(".mouse_cursor2");
const number = document.querySelector("#header ul li.active");
const mail = document.querySelector("#footer a");
// 커서 좌표값 할당
window.addEventListener("mousemove",(e)=>{
// cursor.style.left = e.pageX + "px";
// cursor.style.top = e.pageY + "px";
// cursor2.style.left = e.pageX + "px";
// cursor2.style.top = e.pageY + "px";
//gsap
gsap.to(cursor, {duration : 0.3, left : e.pageX -5, top : e.pageY-5});
gsap.to(cursor2, {duration : 0.8, left : e.pageX-15, top : e.pageY-15});
mail.addEventListener("mousemove", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
})
mail.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
})
number.addEventListener("mousemove", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
})
number.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
})
// 오버 효과
// document.querySelector(".mouse_text span").addEventListener("mouseenter", e=>{
// cursor.classList.add("active");
// cursor2.classList.add("active");
// })
// document.querySelector(".mouse_text span").addEventListener("mouseleave", e=>{
// cursor.classList.remove("active");
// cursor2.classList.remove("active");
// })
// forEach문
document.querySelectorAll(".mouse_text span").forEach((el)=>{
el.addEventListener("mouseenter", ()=>{
cursor.classList.add("active");
cursor2.classList.add("active");
});
el.addEventListener("mouseleave", ()=>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
});- gsap을 CDN으로 가져왔고 작동합니다.
- 먼저 선택기가 변수에 할당됩니다.
- 그런 다음 창에서 마우스를 움직일 때 효과를 적용합니다.
- gsap을 사용하여 duration, pageX 및 pageY 값을 지정합니다.
- pageX,Y는 e(이벤트 객체)를 수신하고 e.pageX, e.pageY 값을 설정합니다.
- 커서 중심의 경우 너비 및 높이 값에서 픽셀의 절반을 뺍니다.
- 마우스 포인터가 메일로 이동하면 커서의 원이 커지므로 마우스가 메일로 이동하면 커서 안에 있는 클래스에 active를 붙여서 효과를 받도록 했습니다.
마우스가 사라지면 클래스를 삭제하는 코드를 작성했습니다. - 위의 숫자도 같은 방식으로 작성되었습니다.
- //오버 효과는 마우스가 움직일 때와 마우스가 떠날 때 mouse_text의 범위에 한 번에 하나의 효과를 주는 코드입니다.
두 코드가 중복되므로 forEach를 사용하여 다음 코드를 작성했습니다. - 변수를 선언하지 않고 querySelectorAll을 사용하여 작성하고 범위를 forEach 문으로 바꿨습니다.
- 매개변수에 el 값을 주고 el에 스팬을 포함했기 때문에 활성 클래스를 el에 붙여서 생성했습니다.
- 마우스가 움직일 때, 마우스가 갈 때.
코드를 작성할 때 사용한 것들
- 데이터 저장: 변수
- 현재 데이터: 함수, 화살표 함수
- 데이터 로드: for(), forEach()
- 이벤트 객체: mousemove , mouseenter , mouseleave
- 항목 객체: querySelector()
- 라이브러리: GSAP: to()
마우스 효과 확인 #1
https://ture403.45
마우스 효과 01
'추천 관련글,
이것은 마우스 효과 번호 01입니다.
완성된 예는 다음과 같습니다.
이것은 HTML 코드입니다.
Javascript Mouse Effect01 Mouse Effect – Follow the mouse 1 2 3 4 5 6 사랑은 눈으로 보는 것이 아니라 마음으로 보는 것이다.
사랑은 보이지 않는다
ture403.tistory.com
완성된 큰 캔버스입니다.
https://ture403.github.io/web2023/javascript/mouse/mouseEffect02.html
02. 마우스 효과
일년 내내 휴일이라면; 스포츠는 일만큼 지루할 것입니다.
매일이 휴가 같다면 노는 것도 일하는 것만큼이나 지루할 것이다.
ture403.github.io
완성된 소스입니다.
https://github.com/ture403/web2023/blob/main/javascript/mouse/mouseEffect02.html