코딩헤딩

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

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

'javascript' 카테고리의 다른 글

[java script] 랜덤 12자리 문자열 생성 (jQuery코드 추가)  (0) 2024.12.15
[java script + CSS] 토글 드롭다운  (0) 2024.01.22
랜덤 로또번호 뽑기 ( setInterval() )  (3) 2023.10.05
javascript를 html으로 출력하기  (0) 2023.10.03
랜덤으로 로또 번호 생성하기 ( math.random() )  (0) 2023.10.02
'javascript' Related Articles more