티스토리 뷰
const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값
function follow(e){
gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)});
//출력용
document.querySelector(".pageX").innerText = e.pageX;
document.querySelector(".pageY").innerText = e.pageY;
}
window.addEventListener("mousemove", follow);
자바스크립트로 마우스 효과(mouse effect)를 주는 세번째 예제입니다.
커서에 이미지를 넣어서 배경을 보이게 하는것 처럼 연출하였습니다.
스크립트보단 css적으로 처리해야될 요소들이 있습니다.
.cursor {
position: absolute;
left: 0; top: 0;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 50%;
background-image: url(img/img03.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
border: 5px solid #fff;
}
커서 자체에 backgroun-image를 이용하여 배경과 같은 이미지를 설정하고
background-attachment 를 이용하여 고정시킵니다.
커서 위치에 맞게 이미지를 따라다니게 만들어 마치 조명을 비춘 것 처럼 표현하였습니다.
'Script Sample > Mouse Effect' 카테고리의 다른 글
Mouse Effect 06 - 텍스트 효과 (0) | 2022.04.13 |
---|---|
Mouse Effect 05 - 이미지 효과2 (0) | 2022.02.24 |
Mouse Effect 04 - 이미지 효과 (0) | 2022.02.24 |
Mouse Effect 02 - 따라다니기2 (0) | 2022.02.23 |
Mouse Effect 01 - 따라다니기 (0) | 2022.02.23 |
댓글
© 2018 webstoryboy