javascript

[반응형 웹] 부드럽게 글자이동 @keyframes

멈머이 2024. 1. 17. 20:54
728x90
<body>
    <h1 id="prof">Profile</h1>
</body>
<style>
    #prof {
        position: absolute;
        top: 20%;
        left: 15%;
        animation: slide2 2s ease-out;
    }


    @keyframes slide2 {
        from {
            left: -2%;
            opacity: 0;
        }

        to {
            left: 15%;
            opacity: 1;
        }
    }

    @keyframes disa2 {
        from {
            left: 15%;
            opacity: 1;
        }

        to {
            left: -2%;
            opacity: 0;
        }
    }
</style>

opacity : 투명도 

 

from에서 to까지 이동범위

<script>
        let mainText = document.querySelector("#prof");

window.addEventListener("scroll", function () {
    let value = window.scrollY
    console.log("scrollY", value); 

    if (value > 300) {
        mainText.style.animation = 'disa2 1s ease-out forwards';
    }else{
        mainText.style.animation = 'slide2 1s ease-out';
        console.log("ok")
    }
});
</script>

 

console.log("scrollY", value) : 웹 페이지에서 마우스 스크롤 위치값 보기

 

확인한 값중 원하는 값을 지정 후 그 이상의 스크롤 값이 출력될 시 글씨가 스르륵 사라지며,

다시 스크롤 값이 줄어듬에 따라 글씨가 스르륵 나타난다.

728x90