스크롤높이에 따른 애니메이션 설정

css3에서 애니메이션을 설정할 수 있다. 이 방법을 통한 스크롤 높이에 따른 애니메이션 시작과 되돌리기를 하기위한 JS 방법

 

CSS

 

.test {position:relative; widht:50px; height:50px}

@keyframes test_ani{

    from{left:0}

    to{left:100px}

}

 

@keyframes test_ani2{

    from{left:100px}

    to{left:0}

}

위와 같이 @keyframes 를 두가지 형태로 만들어 준다 하나는 실행이고 하나는 원위치를 하기위한 @keyframes 이다.

 

 

JS

 

window.addEventListener("scroll", function() {

    let test_h = window.scrollY;

 

    if(test_h > [스크롤위치값]){

        document.getElementByClassName("test").style.animation="test_ani 1s forwards"; 

// 스크롤 높이에 따라 애니메이션(@keyframes test_ani) 실행

    }else{

        document.getElementByClassName("test").style.animation="test_ani2 1s forwards";

// 스크롤 높이에 따라 애니메이션(@keyframes test_ani2) 실행

    }

});

 

스크롤높이 따라 @keyframes 를 실행 시키는 구문이다. 물론 JQuery에서도 가능하다.

요즘들어 원페이지 홈을 많이 만드느라 밋밋한 홈페이지 보다는 유동적인 홈페이지를 많이들 원함 그래서 간단하게 만들어봄