728x90
반응형
마우스 이펙트 - 마우스 따라다니기(2)
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT, CSS / CSS1 / CSS2) / 완성화면
코드 블럭
<!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>02. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.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;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: blue;
}
.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.6s,
background-color 0.3s,
border-radius 0.3s,
border 0.3s
;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: rgba(255, 166, 0, 0.6);
}
.mouse__cursor.active1 {
transform: scale(3) rotateX(720deg);
background-color: rgba(0, 255, 0, 0.5);
border-radius: 0px;
}
.mouse__cursor2.active1 {
transform: scale(4) rotateY(720deg);
background-color: rgba(0, 0, 255, 0.3);
border-radius: 0px;
border: 3px dotted rgba(0, 0, 255, 0.5);
}
.mouse__cursor.active2 {
transform: scale(5) rotateX(720deg);
background-color: rgba(255, 0, 0, 0.5);
}
.mouse__cursor2.active2 {
transform: scale(4) rotateY(720deg);
background-color: rgba(0, 255, 255, 0.3);
border: 3px dashed rgba(0, 255, 255, 0.5);
}
</style>
</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>God never abandons the <span>courageous</span>.</p>
<p>신은 <span>용기</span>있는 자를 결코 버리지 않는다.</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:dongjin6539@naver.com">dongjin6539@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>
코드 블럭 구성
- body 태그에 알맞은 header 구역, main 구역, footer 구역을 만들어줍니다.
- header 태그에 h1 태그, p 태그, ul 태그를 사용해서 제목, 텍스트, 목록을 입력해줍니다.
- main 태그에 div 태그를 사용해 class "mouse__wrap" 명을 만들어줍니다.
- footer 태그에 알맞는 텍스트를 입력해줍니다.
- 이번 구성에서는 커서를 두 개를 입력해 따라다니는 효과를 주려고 합니다.
- class "mouse__wrap"에 자식으로 div 태그를 사용해 class "mouse__cursor", "mouse__curosr2", "mouse__text" 명을 만들어주고 텍스트를 입력해줍니다.
- 공통적으로 사용할 CSS는 다른 페이지를 작성해서 효과적으로 이용합니다.
- 이 부분 페이지에서만 사용되는 스타일은 class 명을 가져와 style 태그를 사용해 스타일을 입력해줍니다.
CSS1
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/earlyfont/EF_Hyunygothic.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/nixgon/NixgonFonts.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/NanumSquare/NanumSquare.css');
@import url('https://webfontworld.github.io/amore/AritaBuri.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');
@import url('https://webfontworld.github.io/jikji/JHaebaragi.css');
@import url('https://webfontworld.github.io/nhn/Godo.css');
/* 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;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
.font01 {
font-family: 'NexonLv1Gothic';
font-weight: 300;
}
.font02 {
font-family: 'EF_Hyunygothic';
}
.font03 {
font-family: 'HealthsetGothic';
}
.font04 {
font-family: 'NixgonFonts';
}
.font05 {
font-family: 'Wooridaum';
}
.font06 {
font-family: 'NanumSquare';
}
.font07 {
font-family: 'AritaBuri';
}
.font08 {
font-family: 'TmoneyRoundWind';
}
.font09 {
font-family: 'JHaebaragi';
}
.font10 {
font-family: 'Godo';
}- 다양한 폰트를 사용하기 위해 종류를 여러 개 만들어줍니다.
CSS2
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;
z-index: -1;
}
body.bg01::after {
background: rgba(60, 136, 139, 0.8);
}
body.bg02::after {
background: rgba(121, 139, 47, 0.8);
}
body.bg03::after {
background: rgba(30, 50, 70, 0.97);
}
body.bg04::after {
background: rgba(140, 60, 107, 0.8);
}
body.bg05::after {
background: rgba(170, 71, 71, 0.8);
}
body.bg06::after {
background: rgba(75, 154, 66, 0.8);
}
body.bg07::after {
background: rgba(205, 207, 91, 0.8);
}
body.bg08::after {
background: rgba(140, 98, 60, 0.8);
}
body.bg09::after {
background: rgba(20, 122, 150, 0.8);
}
body.bg10::after {
background: rgba(117, 112, 171, 0.8);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header p {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
border-radius: 5px;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}- body의 배경 이미지 속성과 색상을 입력해줍니다.
- 다른 목록의 페이지에서 사용될 코드 블럭의 id #header, #footer 공통적인 스타일 속성을 입력해줍니다.
JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// 선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
// 커서 좌푯값 할당
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(선택자 또는 클래스명, {스타일});
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});
});
// 오버 효과
// document.querySelector(".mouse__text span").addEventListener("mouseenter", () => {
// cursor.classList.add("active");
// cursor2.classList.add("active");
// });
// document.querySelector(".mouse__text span").addEventListener("mouseleave", () => {
// cursor.classList.remove("active");
// cursor2.classList.remove("active");
// });
document.querySelectorAll(".mouse__text span").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
document.querySelectorAll("#header h1").forEach(h => {
h.addEventListener("mouseenter", () => {
cursor.classList.add("active1");
cursor2.classList.add("active1");
});
h.addEventListener("mouseleave", () => {
cursor.classList.remove("active1");
cursor2.classList.remove("active1");
});
})
document.querySelectorAll("#footer a").forEach(foot => {
foot.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
foot.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
})
</script>- 이번 스크립트에서는 GSAP라는 프로그램을 사용할 것입니다.
- GSAP 프로그램은 애니메이션 효과를 부드럽고 효과적으로 줄 수 있는 프로그램입니다.(https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js)
- 이번에는 커서를 두 개를 사용해서 따라다니는 효과를 주려했습니다.
- 선택자를 커서 두 개를 만들어줍니다.
- window.addEventListener("mousemove") 메서드와 함수를 사용해서 1번 페이지와 같은 방식으로 작업을 해줍니다.
- 이렇게 작업을 하다보니 반복이 되어서 하나씩 일일이 다 쓰기 힘드니 GSAP를 사용해 gsap.to(선택자 또는 클래스명, {스타일}); 형식으로 입력해줍니다.
- 마우스 오버 효과를 1번 페이지와 같은 방식으로 forEach( )를 사용해서 CSS 스타일을 지정해줬던 스타일을 실행시켜줍니다.
- 그러면 원하는 스타일을 입력한 데로 실행이 됩니다.
참고
GSAP 프로그램
- 애니메이션 효과를 자바스크립트에서 직접적으로 입력하는 것보다 부드럽게 해줍니다.
- https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js
작성 방법
gsap.to(선택자 또는 클래스명, {스타일});
- 아직 잘 모르는 자바스크립트 속성에 대해 알아보겠습니다.(
| 속성 | 속성 설명 |
| mouseenter | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseleave | 요소 위에 포인터 요소 위치가 벗어 났을 때 |
https://dongjin6539.github.io/web2023/javascript/index.html
https://dongjin6539.github.io/web2023/javascript/javascript15.html
728x90
반응형
