mouseEffect03 - 조명효과

CSS 구성

.cursor {
    position: absolute;
    left: 0;top: 0;
    width: 200px;height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(img/images21.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

중요한 포인트1. background-image로 이미지를 적용

중요한 포인트2. background-position: center center로 사이즈를 맞게 고정

중요한 포인트3. background-attachment: fixed로 뒷 배경 고정

 

JS구성

 

사실 자바스크립트 보단, css를 어떻게 적용하여 보여줄지가 더 중요한 예제였다.

 

 

 

https://sungilryuu.github.io/webs_class/javascript/effect/mouseEffect03.html