She can do, he can do, why not me?
She can do, he can do, why not me?
마우스 이펙트 - 마우스 따라다니기
<main>
<div class="cursor"></div>
<article class="mouseCont">
<p><span class="style1">She</span> can do, <span class="style2">he</span> can do, why not <span class="style3">me?</span></p>
<h2><span class="style4">그녀도</span> 하고<span class="style5"> 그도</span> 하는데 </span><span class="style6">나라고</span> 왜 못해?</h2>
</article>
</main>
<!-- //contents -->
<!-- info -->
<div class="info">
<h1><a href="index.html">Mouse Effect01 - javascript</a></h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
</div>
<div class="info right">
<ul>
<li class="active"><a href="javascriptME01.html">1</a></li>
<li><a href="javascriptME02.html">2</a></li>
<li><a href="javascriptME03.html">3</a></li>
<li><a href="javascriptME04.html">4</a></li>
<li><a href="javascriptME05.html">5</a></li>
</ul>
<ul>
<li><a href="jqueryME01.html">1</a></li>
<li><a href="jqueryME02.html">2</a></li>
<li><a href="jqueryME03.html">3</a></li>
<li><a href="jqueryME04.html">4</a></li>
<li><a href="jqueryME05.html">5</a></li>
</ul>
</div>
<div class="info left list">
<ul>
<li>clientX : <span class="clientX">0</span></li>
<li>clientY : <span class="clientY">0</span></li>
<li>offsetX : <span class="offsetX">0</span></li>
<li>offsetY : <span class="offsetY">0</span></li>
<li>pageX : <span class="pageX">0</span></li>
<li>pageY : <span class="pageY">0</span></li>
<li>screenX : <span class="screenX">0</span></li>
<li>screenY : <span class="screenY">0</span></li>
</ul>
</div>
<!-- //info left list -->
.mouseCont {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
font-family: 'S-CoreDream';
cursor: none;
}
.mouseCont p {
font-size: 2.5vw;
line-height: 2.3;
font-weight: 300;
}
.mouseCont h2 {
font-size: 3vw;
font-weight: normal;
font-weight: 400;
}
.mouseCont span {
font-style: normal;
border-bottom: 0.2vw dashed #fff;
}
.cursor {
position: absolute;
left: 0; top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
z-index: 9999;
background-color: rgba(255,255,255,0.1);
user-select: none;
pointer-events: none;
transition:
background-image .2s,
background-color .2s,
border-color .2s,
border-radius .2s,
transform .8s
}
.cursor.style1 {
background-color: rgba(255, 165, 0, 0.4);
border-color: orange;
transform: scale(2);
}
.cursor.style2 {
background-color: rgb(140, 0, 255, 0.4);
border-color: rgb(140, 0, 255);
transform: rotateY(720deg) scale(1.5);
border-radius: 5px;
}
.cursor.style3 {
background-image: url(https://kdong1224.github.io/dothome21/class/img/img01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #CA9CE16e;
border-color: #CA9CE1;
transform: rotate3d(0,1,1,1080deg) scale(1.5);
border-radius: 10px;
}
.cursor.style4 {
background-color: #DFBBB16e;
border-color: #DFBBB1;
transform: rotate3d(0,1,1,360deg) rotate(20deg) scale(1.5);
transform-origin: 20% 100%;
border-radius: 50px;
}
.cursor.style5 {
background-color: #662E9B6e;
border-color: #662E9B;
transform: rotateX(1080deg) scale(1.5);
border-radius: 5px;
}
.cursor.style6 {
background-image: url(https://kdong1224.github.io/dothome21/class/img/img07.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #F242366e;
border-color: #F24236;
transform: rotate(1080deg) scale(1.5);
border-radius: 10px;
}
// 출력용
window.addEventListener("mousemove", (e) => {
document.querySelector(".clientX").innerText = e.clientX + "px"; //브라우저 X좌표 기준
document.querySelector(".clientY").innerText = e.clientY + "px"; //브라우저 Y좌표 기준
document.querySelector(".offsetX").innerText = e.offsetX + "px"; //요소 X좌표 기준
document.querySelector(".offsetY").innerText = e.offsetY + "px"; //요소 Y좌표 기준
document.querySelector(".pageX").innerText = e.pageX + "px"; //페이지 X좌표 기준
document.querySelector(".pageY").innerText = e.pageY + "px"; //페이지 Y좌표 기준
document.querySelector(".screenX").innerText = e.screenX + "px"; //디바이스 X좌표 기준
document.querySelector(".screenY").innerText = e.screenY + "px"; //디바이스 Y좌표 기준
});
// 마우스 움직임
window.addEventListener("mousemove", function(e){
// document.querySelector(".cursor").style.left = e.clientX -25 + "px";
// document.querySelector(".cursor").style.top = e.clientY -25 + "px";
let x = e.clientX -25 + "px"
let y = e.clientY -25 + "px"
document.querySelector(".cursor").style.cssText = "left:" + x + "; top:" + y;
// 하나씩 써주는 방법
// document.querySelector(".mouseCont .style1").addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style1");
// });
// document.querySelector(".mouseCont .style1").addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style1");
// });
// document.querySelector(".mouseCont .style2").addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style2");
// });
// document.querySelector(".mouseCont .style2").addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style2");
// });
// document.querySelector(".mouseCont .style3").addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style3");
// });
// document.querySelector(".mouseCont .style3").addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style3");
// });
// document.querySelector(".mouseCont .style4").addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style4");
// });
// document.querySelector(".mouseCont .style4").addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style4");
// });
// document.querySelector(".mouseCont .style5").addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style5");
// });
// document.querySelector(".mouseCont .style5").addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style5");
// });
// document.querySelector(".mouseCont .style6").addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style6");
// });
// document.querySelector(".mouseCont .style6").addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style6");
// });
});
// for문
// for(let i=1; i<7; i++){
// document.querySelector(".mouseCont .style"+i).addEventListener("mouseover", function(){
// document.querySelector(".cursor").classList.add("style"+i);
// });
// document.querySelector(".mouseCont .style"+i).addEventListener("mouseout", function(){
// document.querySelector(".cursor").classList.remove("style"+i);
// });
// }
// forEach문
// document.querySelectorAll(".mouseCont span").forEach((element, index) => {
// element.addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style"+(index+1));
// });
// element.addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style"+(index+1));
// });
// });
// getAttribute()
document.querySelectorAll(".mouseCont span").forEach((element) => {
let style = element.getAttribute("class");
element.addEventListener("mouseover", () => {
document.querySelector(".cursor").classList.add(style);
});
element.addEventListener("mouseout", () => {
document.querySelector(".cursor").classList.remove(style);
});
});