mouseEffect05 - 이미지 효과2

HTML 구성

<div class="mouse__wrap">
    <div class="mouse__img">
        <figure>
            <img src="img/images22.jpg" alt="이미지">
        </figure>
        <figcaption>
            <p>I will give you rest.</p>
            <p>내가 너희를 쉬게 하리라.</p>
        </figcaption>
    </div>
</div>

.mouse__wrap > .mouse__img > figure > img

.mouse__wrap > .mouse__img > figcaption > p

 

CSS 구성

.mouse__img {
    position: relative;
    text-align: center;
    transform: rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    will-change: transform;
}
.mouse__img figure {
    width: 50vw;
    position: relative;
}

.mouse__img figure::before {
    content: '';
    position: absolute;
    left: 5%; bottom: -40px;
    width: 90%;
    height: 40px;
    background: url(img/images22.jpg) center center no-repeat;
    background-size: 100% 40px;
    filter: blur(15px);
    opacity: 0.9;
    z-index: -1;
}

.mouse__img figcaption {
    position: absolute;
    left: 50%; top: 50%;
    font-size: 1.2vw;
    white-space: nowrap;
    line-height: 1.6;
    background: rgb(0,0,0,0.2);
    padding: 1vw 2vw;
    transform: translate3d(-50%, -50%, 100px);
}

 

살펴 볼 CSS

1. .mouse__img

- transform-style: preserve-3d;

3d공간에서 표현 가능하다

- will-change: transform;

will-change 속성은 브라우저에게 무엇무엇을 할터이니 최적화 준비해라~ 라고 말하는 것이다

will-change를 통해 페이지의 반응성을 증가시킬 수 있다

참고로 너무 자주 사용하면 더욱 악영향을 미친다고 한다

 

2. .mouse__img figure::before

- 그림자 효과를 줬다

 

3. .mouse__img figcaption

- transform: translate3d(-50%, -50%, 100px);

세 번째 인자가 z축 방향으로 얼마나 떨어져있는지 설정하는 것이다

JS 구성

function mouseMove(e){

    // 마우스 좌표 값
    let mousePageX = e.pageX;
    let mousePageY = e.pageY;
    
    // 마우스 좌표 기준점을 가운데로 변경
    let centerPageX = window.innerWidth/2 - mousePageX;
    let centerPageY = window.innerHeight/2 - mousePageY;

    //최댓값 최솟값 구하기
    //최솟값은 -50, 최댓값은 50 설정
    let maxPageX = Math.max(-1000, Math.min(1000,centerPageX));
    let maxPageY = Math.max(-1000, Math.min(1000,centerPageY));

    //각도 줄이는 설정
    let anlexpageX = maxPageX * 0.12;
    let anlexpageY = maxPageY * 0.12;

    //마우스가 움직일 때, 이미지 움직임 값이 skip되지 않게 해주기
    //부드럽게 설정 10---> 30
    let softPageX = 0;
    let softPageY = 0;
    softPageX += (anlexpageX - softPageX) * 0.4; 
    softPageY += (anlexpageY - softPageY) * 0.4;

    //transform: rotateX(0deg) rotateY(0deg);
    const imgMove = document.querySelector(".mouse__img");
    imgMove.style.transform = "perspective(600px) rotateX("+ -softPageY +"deg) rotateY("+ softPageX +"deg)";
}

//마우스 무브에 대한 이벤트 제공
document.addEventListener("mousemove", mouseMove);​

 

 

 

링크

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