다른 명언
728x90
반응형
마우스 이펙트
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><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__text">
<p> <span class="s1">A man</span> is known <span class="s2">by the company</span> he <span class="s3">keeps.</span></p>
<p><span class="s4">사람은</span> 그가 사귀는 <span class="s5">친구로</span> <span class="s6">알 수 있다.</span></p>
</div>
</div>
<div class="mouse__info">
<ul>
<li>clientX : <span class="clientX">0</span>px</li>
<li>clientY : <span class="clientY">0</span>px</li>
<li>offsetX : <span class="offsetX">0</span>px</li>
<li>offsetY : <span class="offsetY">0</span>px</li>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="pageY">0</span>px</li>
<li>screenX : <span class="screenX">0</span>px</li>
<li>screeny : <span class="screenY">0</span>px</li>
</ul>
</div>
</main>
<!-- //main -->body의 클래스 img01 bg01 font01는 각 배경, 배경색, 폰트 종류를 의미 합니다.
header태그에는 각각의 list를 만들어 숫자를 넣어주었습니다. 링크가 연결되어 있어 클릭하면 다른페이지로 이동합니다.
mouse__text에 2개의 p단락을 넣고 text를 작성 후 글씨에 마우스 이펙트 효과를 주기위해 span태그로 영역을 나누어 주었습니다.
mouse.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-color: rgba(5, 36, 70,0.3);
z-index: -1;
}
body.bg01::after {
background-color: rgba(15, 13, 13, 0.5);
}
body.bg02::after {
background-color: rgba(214, 249, 42, 0.3);
}
body.bg03::after {
background-color: rgba(252, 124, 50, 0.3);
}
body.bg04::after {
background-color: rgba(71, 255, 243, 0.3);
}
body.bg06::after {
background-color: rgba(247, 78, 78, 0.3);
}
body.bg07::after {
background-color: rgba(249, 48, 48, 0.3);
}
body.bg08::after {
background-color: rgba(255, 255, 63, 0.3);
}
body.bg09::after {
background-color: rgba(56, 251, 251, 0.3);
}
body.bg10::after {
background-color: rgba(109, 255, 64, 0.3);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header p {
margin-bottom: 10px;
}
#header h1 {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
width: 30px;
height: 30px;
display: inline-block;
border-radius: 4px;
line-height: 1.8;
text-align: center;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* //footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}reset.css
@import url('https://webfontworld.github.io/earlyfont/EF_Diary.css');
@import url('https://webfontworld.github.io/cookierun/CookieRun.css');
@import url('https://webfontworld.github.io/nongshim/Ansungtangmyun.css');
@import url('https://webfontworld.github.io/earlyfont/EF_Hyunygothic.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/jeongseon/JSDongkang.css');
@import url('https://webfontworld.github.io/earlyfont/EF_Macho.css');
@import url('https://webfontworld.github.io/116watermelon/116watermelon.css');
@import url('https://webfontworld.github.io/Rebecca/Rebecca.css');
@import url('https://webfontworld.github.io/NexonMaplestory/NexonMaplestory.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: EF_Diary;
font-weight: 300;
}
.font02 {
font-family: CookieRun;
font-weight: 300;
}
.font03 {
font-family: Ansungtangmyun;
font-weight: 300;
}
.font04 {
font-family: EF_Hyunygothic;
font-weight: 300;
}
.font05 {
font-family: PyeongChang;
font-weight: 300;
}
.font06 {
font-family: JSDongkang;
font-weight: 300;
}
.font07 {
font-family: EF_Macho;
font-weight: 300;
}
.font08 {
font-family: 116watermelon;
font-weight: 300;
}
.font09 {
font-family: Rebecca;
font-weight: 300;
}
.font10 {
font-family: NexonMaplestory;
font-weight: 300;
}스타일 코드입니다.
<style>
.mouse__wrap {
cursor: none;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
background-color: rgba(255, 255, 255, 0.1);
user-select: none;
pointer-events: none;
transition:
background-color 0.3s,
border-color 0.3s,
transform 0.6s,
border-radius 0.3s,
border 0.3s
;
}
.mouse__cursor.s1 {
background-color: rgba(0, 35, 235, 0.2);
border-color: rgb(128, 30, 213);
}
.mouse__cursor.s2 {
background-color: rgba(0, 35, 235, 0.2);
border-color: rgb(30, 146, 102);
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3 {
background-color: rgba(0, 35, 235, 0.2);
border-color: rgb(248, 229, 17);
transform: scale(1.5) rotateX(540deg);
}
.mouse__cursor.s4 {
background-color: rgba(0, 35, 235, 0.2);
border-color: rgb(246, 8, 8);
transform: scale(10);
border-radius: 5px;
}
.mouse__cursor.s5 {
background-color: rgba(0, 35, 235, 0.2);
border-color: rgb(252, 252, 10);
transform: scale(7) skew(20deg) rotate(50deg);
}
.mouse__cursor.s6 {
background-color: rgba(0, 35, 235, 0.2);
border-color: rgb(8, 218, 246);
transform: scale(0.5);
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.7;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: #99ffe6;
border-bottom: 1px dashed #ffffff;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>.mouse__wrap {cursor: none;} 사이트 전반에 마우스가 포인터로 변화하는 형식을 제거하였습니다.
"user-select"은 CSS에서 텍스트를 선택하는 방법을 정의하는 속성입니다. 이 속성을 사용하면 텍스트 선택을 비활성화하거나 허용하거나 허용 방법을 제한할 수 있습니다.
"pointer-events: none;"은 CSS 속성으로, 해당 요소에 마우스 이벤트를 비활성화시키는 효과를 줍니다. 이 속성을 사용하면 해당 요소 및 그 아래에 있는 하위 요소들에 대해서는 마우스 이벤트가 발생하지 않습니다.
"scale(7)": 해당 요소를 x축, y축 모두 7배 크기로 확대시키는 효과를 줍니다.
"skew(20deg)": 해당 요소를 x축, y축 방향으로 20도만큼 기울이는 효과를 줍니다.
"rotate(50deg)": 해당 요소를 시계 방향으로 50도만큼 회전시키는 효과를 줍니다.
<script>
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
// 선택자
const cursor = document.querySelector(".mouse__cursor");
window.addEventListener("mousemove", function(e){
cursor.style.left = e.clientX - 25 + "px";
cursor.style.top = e.clientY - 25 + "px";
})
// document.querySelector(".s1").addEventListener("mouseover", function(){
// cursor.classList.add("s1");
// });
// document.querySelector(".s1").addEventListener("mouseout", function(){
// cursor.classList.remove("s1");
// });
// document.querySelector(".s2").addEventListener("mouseover", function(){
// cursor.classList.add("s2");
// });
// document.querySelector(".s2").addEventListener("mouseout", function(){
// cursor.classList.remove("s2");
// });
// document.querySelector(".s3").addEventListener("mouseover", function(){
// cursor.classList.add("s3");
// });
// document.querySelector(".s3").addEventListener("mouseout", function(){
// cursor.classList.remove("s3");
// });
// document.querySelector(".s4").addEventListener("mouseover", function(){
// cursor.classList.add("s4");
// });
// document.querySelector(".s4").addEventListener("mouseout", function(){
// cursor.classList.remove("s4");
// });
// document.querySelector(".s5").addEventListener("mouseover", function(){
// cursor.classList.add("s5");
// });
// document.querySelector(".s5").addEventListener("mouseout", function(){
// cursor.classList.remove("s5");
// });
// document.querySelector(".s6").addEventListener("mouseover", function(){
// cursor.classList.add("s6");
// });
// document.querySelector(".s6").addEventListener("mouseout", function(){
// cursor.classList.remove("s6");
// });
//for문
// for(let i=1; i<=6; i++){
// document.querySelector(".s"+i).addEventListener("mouseover", function(){
// cursor.classList.add("s"+i);
// });
// document.querySelector(".s"+i).addEventListener("mouseout", function(){
// cursor.classList.remove("s"+i);
// });
// }
//for each문
// document.querySelectorAll(".mouse__text span").forEach(function(span, num){
// span.addEventListener("mouseover", function(){
// cursor.classList.add("s"+(num+1));
// });
// span.addEventListener("mouseout", function(){
// cursor.classList.remove("s"+(num+1));
// });
// });
// getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
// attr = s1 s2 s3 s4 s5 s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr)
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr)
});
});
// setAttribute();
</script>"window"는 자바스크립트에서 전역 객체(Global Object) 중 하나입니다.
window 객체는 웹 브라우저의 창을 나타내며, 해당 창에 로드된 모든 문서와 관련된 메서드와 속성을 제공합니다.
addEventListener("mousemove")는 자바스크립트에서 이벤트 핸들러(Event Handler)를 등록하는 메서드 중 하나입니다. 이 메서드를 사용하면 웹 페이지에서 마우스를 움직일 때마다 이벤트가 발생하고, 등록된 이벤트 핸들러가 실행됩니다.
document.querySelector( ).innerHTML=event.( ) 가로 안에는 마우스 위치를 확인하기 위해 입력한 class명을 입력해줍니다.
clientX,Y : 현재 보여지는 영역을 기준으로 좌표를 알려줍니다
offsetX,Y : 요소를 기준으로 좌표를 알려줍니다.
pageX,Y : 전체 문서를 기준으로 좌표를 알려줍니다.
screenX,Y : 모니터 화면을 기준으로 좌표를 알려줍니다.
const cursor = document.querySelector(".mouse__cursor");
window.addEventListener("mousemove", function(e){
cursor.style.left = e.clientX - 25 + "px";
cursor.style.top = e.clientY - 25 + "px";(".mouse__cursor")를 사용하여 문서 내에 있는 요소 중 첫 번째로 일치하는 요소를 가져오는 document.querySelector() 메서드를 사용합니다.
이 때 가져온 요소는 "cursor"라는 변수에 할당됩니다.
마우스 이벤트 객체에서 x와 y 좌표를 가져와서, 커서 요소의 CSS left와 top 속성 값을 변경합니다. 이렇게 함으로써 마우스 커서 요소를 마우스 위치에 따라 이동시키는 효과를 만들 수 있습니다. 각각의 좌표 값에서 25를 빼는 이유는, 마우스 커서 요소의 크기가 50x50 픽셀이기 때문입니다. 이렇게 함으로써 마우스 커서 요소의 정중앙이 마우스 포인터 위치에 오도록 조정됩니다. 마지막으로, "px"를 추가함으로써 좌표 값이 CSS 단위(px)를 사용하는 문자열로 변환됩니다.
document.querySelector(".class명").addEventListener("mouseover", function(){cursor.classList.add("class명")});
document.querySelector(".class명").addEventListener("mouseover", function(){cursor.classList.remove("class명")});이 부분은 마우스 이벤트 리스너를 등록하여, 다른 요소 위에 마우스 포인터가 올라가면 해당 요소에 맞는 CSS 클래스를 마우스 커서 요소에 추가하는 코드입니다. 예를 들어, ".s1" 요소에 마우스 포인터가 올라가면, "s1"이라는 CSS 클래스를 마우스 커서 요소에 추가합니다. 그리고 마우스 포인터가 해당 요소 위에서 벗어나면, "s1" 클래스를 제거합니다.
for(let i=1; i<=6; i++){
document.querySelector(".s"+i).addEventListener("mouseover", function(){
cursor.classList.add("s"+i);
});
document.querySelector(".s"+i).addEventListener("mouseout", function(){
cursor.classList.remove("s"+i);
});
}위 코드를 for문으로 변경하는 방법입니다.
document.querySelectorAll(".mouse__text span").forEach(function(span, num){
span.addEventListener("mouseover", function(){
cursor.classList.add("s"+(num+1));
});
span.addEventListener("mouseout", function(){
cursor.classList.remove("s"+(num+1));
});
});forEach로 변경하는 방법입니다.
//getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
//attr = s1 s2 s3 s4 s5 s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});getAttribute()메서드를 이용하는 방법입니다.
728x90