<body>
<div id="pos">0</div>
<div class="circle"></div>
<script>
let pos=document.querySelector("#pos")
//객체. 메서드()
//객체. 속성
//마우스객체.pageX
document.addEventListener("mousemove", (e)=>{
let x=e.pageX;
let y=e.pageY;
pos.textContent=`x축좌표:${x},y축좌표:${y}`;
})//함수안에 영문을 넣으면 해당 영문의 이름이 된 함수의 값을 계속해서 설정한다.
</script>
</body>
원 안에 해당 좌표값이 들어가도록 설정할것임
.circle{
width: 20px; height: 20px;
background: #111;
border-radius: 50%;
position: relative;
transition: 0.3s;
}
<body>
<div id="pos">0</div>
<div class="circle"></div>
<script>
let pos=document.querySelector("#pos")
let circle=document.querySelector(".circle")
//객체. 메서드()
//객체. 속성
//마우스객체.pageX
document.addEventListener("mousemove", (e)=>{
let x=e.pageX;
let y=e.pageY;
pos.textContent=`x축좌표:${x},y축좌표:${y}`;
circle.style.left=`${x}px`;
circle.style.top=`${y}px`;
})//함수안에 영문을 넣으면 해당 영문의 이름이 된 함수의 값을 계속해서 설정한다.
</script>
</body>
추출해서 객체에 left top에 넣어주면 된다.
.circle{
width: 20px; height: 20px;
background: #111;
border-radius: 50%;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
좀더 원의 위치를 잡아주면 마우스에 맞게 움직이게 된다.
마우스 오버시 원이 커지는 효과
<nav>
<ul>
<li><a href="#" class="link">HOME</a></li>
</ul>
</nav>
<div class="circle"></div>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
body{
background: #111;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
nav{
width: 100vw; height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link{
font-size: 5rem;
font-family: 'Times New Roman', Times, serif;
color: #fff;
}
.circle{
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
transition: 0.2s linear;
mix-blend-mode: difference;
pointer-events: none;
}
let links=document.querySelector(".link");
let circle=document.querySelector(".circle");
document.addEventListener("mousemove", (e)=>{
let x=e.pageX;
let y=e.pageY;
circle.style.left=`${x}px`
circle.style.top=`${y}px`
})
먼저 원이 마우스를 따라 오도록 설정해놓고
links.addEventListener("mouseover", ()=>{
circle.style.transform="scale(5)"
})
links.addEventListener("mouseout",()=>{
circle.style.transform="scale(1)"
})
링크위에선 커지고 멀어지면 작아지는 자바를 각각 지정해주면 된다.
<script>
let links=document.querySelectorAll(".link");
let circle=document.querySelector(".circle");
document.addEventListener("mousemove", (e)=>{
let x=e.pageX;
let y=e.pageY;
circle.style.left=`${x}px`
circle.style.top=`${y}px`
})
links[0].addEventListener("mouseover", ()=>{
circle.style.transform="scale(5)"
})
links[0].addEventListener("mouseout",()=>{
circle.style.transform="scale(1)"
})
links[1].addEventListener("mouseover", ()=>{
circle.style.transform="scale(5)"
})
links[1].addEventListener("mouseout",()=>{
circle.style.transform="scale(1)"
})
links[2].addEventListener("mouseover", ()=>{
circle.style.transform="scale(5)"
})
links[2].addEventListener("mouseout",()=>{
circle.style.transform="scale(1)"
})
links[3].addEventListener("mouseover", ()=>{
circle.style.transform="scale(5)"
})
links[3].addEventListener("mouseout",()=>{
circle.style.transform="scale(1)"
})
</script>
만약 여러개의 링크에 해당 이벤트를 적용하고 싶다면 각각의 인덱스를 넣어서 할수 있고 이를 간단한 식으로 하기 위해서 forEach를 사용해서 넣어줄 수 있다.
links.forEach(function(link){
link.addEventListener("mouseover",()=>{
circle.style.transform="scale(5)"
})
link.addEventListener("mouseout",()=>{
circle.style.transform="scale(1)"
})
})
마우스 커서을 따로 만들어 실행시키는 이벤트
<body>
<nav>
<ul>
<li><a href="#" class="link">HOME</a></li>
<li><a href="#" class="link">ABOUT</a></li>
<li><a href="#" class="link">PORTFOLIO</a></li>
<li><a href="#" class="link">CONTACT</a></li>
</ul>
</nav>
<div class="cursor"></div>
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
body{
background: #111;
cursor: none;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
nav{
width: 100vw; height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.link{
font-size: 5rem;
font-family: 'Times New Roman', Times, serif;
color: #fff;
}
.cursor{
z-index: 999;
position: fixed;
left: 20px; top: 20px;
background: orange;
width: 20px; height: 20px;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 20px orangered,
0 0 40px orangered,
0 0 60px orangered;
pointer-events: none;
animation: color 5s infinite;
transition: 0.1s;
}
@keyframes color{
0%{filter: hue-rotate(0deg);}
100%{filter: hue-rotate(360deg);}
}
</style>
<script>
const cursor=document.querySelector(".cursor");
let timeOut;
document.addEventListener("mousemove", (e)=>{
let x=e.pageX;
let y=e.pageY;
cursor.style.left=`${x}px`
cursor.style.top=`${y}px`
cursor.style.display="block"
clearTimeout(timeOut);
timeOut=setTimeout( mouseStop, 1500); //(함수, 시간);
function mouseStop(){
cursor.style.display="none"
}
})
</script>