mouseEffect - 03

스크립트를 이용한 마우스효과 만들기 03

오늘은 마우스를 이용해 조명을 준듯한 효과를 만들어 보겠습니다🔎

원본 소스 보기

Javascript

const cursor = document.querySelector(".mouse__cursor");
// const circleW = document.offsetWidth;   //200
// const circleH = document.offsetHeigth;   //200  
// const circle2 = document.clientWidth;   //190 : 보더값 제외

const circle = cursor.getBoundingClientRect();
// console.log(circle);
// const DOMRect = {
//     bottom : 200,
//     height : 200,
//     left : 0,
//     right : 200,
//     top : 0,
//     width : 200,
//     x : 0,
//     y : 0
// }

window.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
        duration: 0.3, 
        left: e.pageX - circle.width/2, 
        top: e.pageY - circle.height/2
    });
});

getBoundingClientRect();

getBoundingClientRect메서드를 이용하여 요소의 위치값을 알 수 있습니다.

HTML

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p>
                The <span>greatest</span> glory in living lies not in never <span>falling</span>, 
                but in rising <span>every</span> time we fall.
            </p>
            <p>
                인생에서 가장 큰 <span>영광</span>은 넘어지지 않는 것에 있는 
                것이 아니라 매번 <span>일어선다</span>는 데 있다.
            </p>
        </div>
    </section>
</main>

CSS

css보기

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../assets/img/effect_bg04@2x.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;       /* 이미지 고정 */
    border: 5px solid #fff;
}

background-image를 body에 있는 이미지와 동일한 이미지를 넣습니다.
🎈background-attachment속성을 이용하여 배경이미지를 고정 시킬 수 있습니다.
이렇게 설정 해주고 스크립트를 작성해 주면 배경에 조명을 주는 듯한 효과를 만들 수 있습니다~

background-attachment: fiexd ➡️ 배경이미지 고정
background-attachment: scroll ➡️ 내용을 스크롤 하면 배경이미지는 스크롤 되지 않음
background-attachment: local ➡️ 내용을 스크롤 하면 배경이미지도 스크롤