- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
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="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: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 코드 입니다.
.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 의 원형의 이미지를 만들었습니다.
- 그리고 active가 붙였을때 효과를 주기 위해서 작성을 했습니다.
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으로 불러와서 작업을 했습니다.
- 먼저 선택자를 변수안에 지정 합니다.
- 그후 저희는 window 안에서 마우스가 움직일떄 효과를 줄겁니다.
- gsap를 이용해서 duration, pageX, pageY 값을 지정해 줍니다.
- pageX, Y는 e(이벤트객체)를 받아서 e.pageX, e.pageY값을 넣었습니다.
- 커서 정중앙을 위해 넓이값과 높이값의 반의 픽셀을 빼주면 주면 됩니다.
- 마우스가 커서가 mail로 갈떄 커서의 원이 커지게 할것이므로 mail에 마우스가 움직일때 커서안에 클래스에 active를 붙여서 효과를 주었습니다. 마우스가 사라질떄는 class를 삭제하는 코드를 작성했습니다.
- 또 위에 number 도 동일하게 작성을 했습니다.
- //오버효과는 하나씩 mouse_text안에 있는 span에게 마우스움직일떄, 떠날때 효과를 준 코드입니다. 2개의 코드가 반복이 되므로 forEach를 써서 다음과 같은 코드를 작성했습니다.
- 변수 선언을 안하고 바로 querySelectorAll 을 이용해서 span를 forEach문으로 돌려서 작성을 했습니다.
- 매개변수 안에 el값을 주었고 el안에는 span이 들어가 있기 때문에 el안에 클래스 active를 붙여서 작성을 했습니다.
- 마우스 움직일때 마우스가 떠날떄를 작성해습니다.
코드 작성시 필요한거 정리
- 데이터 저장하기 : 변수
- 데이터 실행하기 : 함수, 화살표 함수
- 데이터 불러오기 : for(), forEach()
- 이벤트 객체 : mousemove , mouseenter, mouseleave
- 요소 객체 : querySelector()
- 라이브러리 : GSAP : to()
| 속성 | 설명 |
| user-select | 사용자가 페이지에서 텍스트를 선택할 수 있는지 여부를 결정 |
| pointer-events | 요소의 클릭 이벤트나 마우스 이벤트의 발생 여부를 제어 |
| mouseenter | 마우스 이벤트 중 하나로, 마우스 포인터가 요소 내부로 이동할 때 발생 |
| mouseleave | 마우스 이벤트 중 하나로, 마우스 포인터가 요소를 벗어날 때 발생 |
| mousemove | 마우스 이벤트 중 하나로, 마우스 포인터가 요소 내부에서 움직일 때 발생 |
마우스 이펙트 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
완성된 큰 화면 입니다.
https://ture403.github.io/web2023/javascript/mouse/mouseEffect02.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/mouseEffect02.html