HTML
<body class="img04 bg07 Jamsil" >
<header id="header">
<div class="mouse__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="mouseEffect01.html">4</a></li>
<li><a href="mouseEffect01.html">5</a></li>
<li><a href="mouseEffect01.html">6</a></li>
</ul>
</div>
</header>
<!-- //haeder-->
<main id="main">
<div class="mouse_wrap">
<div class="mouse__cursor"></div>
<div class="mouse__cursor2"></div>
<div class="mouse__text">
<p>They must <span>often change</span> who would be constant in happiness or wisdom</p>
<p>늘 행복하고 지혜로운 사람이 되려면 <span>자주 변해야 한다</span></p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<div class="mouse__footer">
<a href="dlscks0930@naver.com">dlscks0930@naver.com</a>
</div>
</footer>
<!-- //footer-->이 코드는 HTML을이용한 마우스 이펙트를 구현한 코드입니다.
HTML에서는 <body> 요소의 class 속성에 "img04 bg07 Jamsil"이라는 값을 할당하고, <header>, <main>, <footer> 요소들을 구성합니다.
<header> 요소 안에는 "Javascript Mouse Effect02"라는 제목과 "마우스 이펙트 - 마우스 따라다니기"라는 설명, 그리고 <ul> 요소 안에 숫자 1부터 6까지의 링크들이 포함됩니다.
<main> 요소 안에는 마우스 이펙트를 구현하기 위한 <div> 요소들이 구성되어 있습니다.
마우스 커서를 따라다니는 효과를 주기 위해 마우스 커서에 해당하는 <div class="mouse__cursor"> 요소와 <div class="mouse__cursor2"> 요소가 포함되어 있습니다.
그리고 "They must often change who would be constant in happiness or wisdom"라는 문장과
그 문장의 한국어 번역인 "<span>늘 행복하고 지혜로운 사람이 되려면 자주 변해야 한다</span>"가 포함된 <div class="mouse__text"> 요소가 있습니다.
<footer> 요소 안에는 "dlscks0930@naver.com"이라는 이메일 주소가 링크로 포함되어 있습니다.
CSS
mouse.css
body {
width: 100%;
height: 100vh;
background-position: center center;
background-size: cover;
overflow: hidden;
}
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-color: rgba(97, 86, 34, 0.692);
}
body.bg02::after {
background-color: rgba(34, 35, 97, 0.93);
}
body.bg03::after {
background-color: rgba(226, 121, 117, 0.692);
}
body.bg04::after {
background-color: rgba(41, 184, 129, 0.692);
}
body.bg05::after {
background-color: rgba(139, 41, 184, 0.692);
}
body.bg06::after {
background-color: rgba(184, 41, 125, 0.692);
}
body.bg07::after {
background-color: rgba(41, 155, 184, 0.692);
}
body.bg08::after {
background-color: rgba(41, 184, 41, 0.692);
}
body.bg09::after {
background-color: rgba(184, 170, 41, 0.692);
}
body.bg10::after {
background-color: rgba(184, 41, 41, 0.692);
}
.Jamsil{
font-family: "TheJamsil";
}
.cafe24{
font-family: "Cafe24ClassicType";
}
.BMJua{
font-family: "BMJua";
}
.PyeongChang{
font-family: "PyeongChang";
}
.MabinogiClassic{
font-family: "MabinogiClassic";
}
.BMDoHyeon{
font-family: "BMDoHyeon";
}
.JalpullineunOneul{
font-family: "JalpullineunOneul";
}
.JalpullineunHaru{
font-family: "JalpullineunHaru";
}
.BaskinRobbins{
font-family: "BaskinRobbins";
}
.ROKA{
font-family: "ROKA";
}reset.css
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/Cafe24Classictype/Cafe24ClassicType.css');
@import url('https://webfontworld.github.io/BMJua/BMJua.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/NexonMabinogi/MabinogiClassic.css');
@import url('https://webfontworld.github.io/BMDoHyeon/BMDoHyeon.css');
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunOneul.css');
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunHaru.css');
@import url('https://webfontworld.github.io/baskinrobbins/BaskinRobbins.css');
@import url('https://webfontworld.github.io/armynuri/ROKA.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*,*::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000000;
}
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;
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header p {
display: inline-block;
}
#header li {
display: inline-block;
}
#header li a {
width: 0px;
height: 0px;
border-bottom: 28px solid ;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a{
color: #fff;
}<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: 1.9;;
}
.mouse__text p:last-child {
font-size: 4vw;
}
.mouse__text p span{
color: rgb(152, 247, 92);
}
.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.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
#header li.active a{
color: rgb(152, 247, 92);
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: rgba(255, 166, 0, 0.6);
}
.mouse__cursor.active2 {
transform: scale(15) rotateX(545deg);
background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}
.mouse__cursor.active3 {
transform: scale(15) rotateX(545deg);
background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}
</style>위 코드는 CSS 스타일시트를 정의하고 있습니다.
.mouse__wrap 클래스에는 cursor:none; 스타일이 적용되어 있으며, 이는 마우스 커서를 화면에서 숨기는 역할을 합니다.
.mouse__text 클래스에는 전체 화면을 차지하는 섹션의 스타일이 정의되어 있습니다. 이 섹션은 flex 레이아웃을 사용하여 요소들을 가운데 정렬하고 있습니다. overflow: hidden; 속성은 이 섹션을 벗어난 내용을 숨기도록 설정합니다.
.mouse__text p 선택자는 <p> 요소의 스타일을 정의하고 있습니다. font-size, line-height 등의 속성이 정의되어 있으며, 이를 통해 텍스트의 크기와 간격을 조절할 수 있습니다.
.mouse__text p span 선택자는 <span> 요소의 스타일을 정의하고 있습니다. 이 <span> 요소에는 color 속성으로 특정 색상이 지정되어 있습니다.
.mouse__cursor, .mouse__cursor2 클래스는 마우스 커서를 나타내는 요소의 스타일을 정의하고 있습니다. position, width, height, z-index, border-radius, background-color 등의 속성이 정의되어 있으며, 이를 통해 원하는 모양과 위치의 마우스 커서를 만들 수 있습니다.
#header li.active a 선택자는 현재 활성화된 링크의 스타일을 정의하고 있습니다. color 속성으로 특정 색상이 지정되어 있으며, 이를 통해 현재 보고 있는 페이지의 링크를 표시합니다.
.mouse__cursor.active, .mouse__cursor2.active, .mouse__cursor.active2, .mouse__cursor.active3 클래스는 각각 다양한 효과를 가지는 마우스 커서의 스타일을 정의하고 있습니다. transform, background-image, background-color 등의 속성이 사용되며, 이를 통해 마우스를 움직일 때 다양한 모양과 색상의 효과를 만들어냅니다.
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 => {
//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});
});
document.querySelectorAll(".mouse__text span").forEach(function(span){
span.addEventListener("mouseenter", function(){
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", function(){
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
document.querySelectorAll(".mouse__header").forEach(function(span){
span.addEventListener("mouseenter", function(){
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
span.addEventListener("mouseleave", function(){
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
document.querySelectorAll(".mouse__footer").forEach(function(span){
span.addEventListener("mouseenter", function(){
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
span.addEventListener("mouseleave", function(){
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});
</script>위 코드는 마우스 커서를 커스텀하는 JavaScript 코드입니다.
먼저, "const" 키워드를 사용하여 마우스 커서를 선택하기 위해 "querySelector" 메서드를 사용합니다. "querySelector" 메서드는 CSS 선택자를 사용하여 HTML 문서의 요소를 선택하는 역할을 합니다.
그 다음, "window" 객체에 "addEventListener" 메서드를 추가하여 마우스 움직임 이벤트를 감지합니다.
마우스 움직임 이벤트가 발생하면 "gsap" 라이브러리를 사용하여 마우스 커서의 위치를 변경합니다.
"gsap" 라이브러리는 애니메이션 효과를 쉽게 구현할 수 있도록 도와주는 자바스크립트 라이브러리입니다.
또한, "document.querySelectorAll" 메서드를 사용하여 특정 요소를 선택하고, "forEach" 메서드를 사용하여 각 요소에 이벤트 리스너를 추가합니다.
"mouseenter" 이벤트가 발생하면 "active" 클래스를 추가하고, "mouseleave" 이벤트가 발생하면 "active" 클래스를 제거합니다.이를 통해 특정 요소에 마우스가 올라갔을 때, 마우스 커서의 스타일을 변경할 수 있습니다.
마우스 커서의 스타일 변경은 "active", "active2", "active3" 클래스를 통해 구현됩니다. 각 클래스는 CSS 스타일 시트에서 미리 정의되어 있습니다.
다양한 마우스 효과는 아래 링크를 참조하세요.
2023.03.20 - [javascript] - 마우스 효과 01
마우스 효과 01
마우스 효과에 대해 공부를하고 직접 적용시켜 만들어보았습니다. HTML body 요소에는 img02, bg01, Jamsil이라는 클래스가 지정되어 있습니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1
dlscks0930.tistory.com
댓글