키프레임 (keyframes) 애니메이션을 적용하기 앞서

애니메이션 효과과 css 상에 아래와 같이 정의가 되어야 하며, 스크롤에 따른 제어는 자바스크립트를 사용하여 제어 합니다.

animation_object{
font-size:3rem;
witdth:300px;
color: white;
font-family:sans-serif;
position: absolute;
top:100px;
left:400px;
animation: slide-object 1s ease-out;
}

@keyframes slide-object{
form{
left:-100px;
opacity:0;
}
to{
left:400px;
opacity:1;
}
}

@keyframes slide-object-hidden{
form{
left:400px;
opacity:1;
}
to{
left:-100px;
opacity:0;
}
}

위에 키프레임에 대한 모션의 정의한후 (두가지 나타 날때, 사라질때) 자바스크립트로 해당 부분을 아래와 같이 제어하게 된다.

let ani-object = document.querySelector("animation-object");

window.addEventListener("scroll", function () {
let value = window.scrolly;
if(value > 300){
ani-object.style.animation="slide-object-hidden 1s ease-out forwards;
}else{
ani-object.style.animation='slide-object 1s ease-out';
}
});

위의 형태로 스크롤위치에 따른 제어가 가능합니다.