컴퓨터 정보/css

css + html + javascript 를 이용해 animation을 만들자 (스크롤)

혜닝혜루 2022. 11. 3. 22:09
728x90
반응형

 

html
<body>
  <section>
    <h1> PICK YOUR FAVORITE</h1>
  </section>
    <script src="main.js"></script>
</body>
</html>
 
 
css.
 
body{
  margin: 0;
  height: 2000px;
}
section{
  height: 800px;
}
.photo{
  position: absolute;
  top:100px;
  right: 200px;
}
  h1{
    font-size: 6em;
    width: 258px;
    color: white;
    font-family: sans-serif;
    position:absolute;
    top:80px;
    left: 400px;
 
// 애니메이션 효과줄 친구 안에 css 넣기 1초 속도로 ease-out은 부드럽게 오는효과
    animation: slide 1s ease-out;
  }
 
 
// 애니메이션 효과주기 왼쪽에서 -100 부터 400까지 나오면서 투명도 조절
  @keyframes slide {
    from{
        left: -100px;
        opacity: 0;
    }
    to{
        left: 400px;
        opacity: 1;
    }
  }
// 400까지 나온 글자를 다시 스크롤을 내리면 없애고  싶다.
  @keyframes disappear {
    from{
      left:400px;
      opacity: 1;
    }
    to{ left: -100px;
      opacity: 0;
    }
  }
사용한 코드
@keyframes
from 시작 to 끝
opacitiy 투명도

 
animation : slide (키프레임 변수명) 1s (애니메이션 시간)ease-out (부드러움 효과)

 
js.

 

 
 

 

let mainText = document.querySelector("h1")

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

  if(value>300){
    mainText.style.animation='disappear 1s ease-out forwards';
  }else{
    mainText.style.animation=`slide 1s ease-out`
  }
});

 

코드해석

mainText라는 변수를 만들어 css 선택자를 지정
document .querySelector("h1") 를 한 이유는 저 코드가 css에서 선택자 하나를 자바스크립트에
불러올수 있는 코드이기 때문이다.

window addEventListener
라는 뜻은 이벤트를 들고있는 함수를 실행시켜 줄께이다.
addEventListener (' 이벤트명' , 함수명() {
 이벤트를 실행할 내용 > 나는 윈도우 스크롤할때 값을 저장했다.
}
콘솔로 확인해보면 스크롤 처음은 0 내릴수록 값이 증가하는걸 알 수 있다.
f(value>300){
    mainText.style.animation='disappear 1s ease-out forwards';
  }else{
    mainText.style.animation=`slide 1s ease-out`
  } 

그대로 해석하면 value의 값이 > 300 이 넘어가게 되면
mainText 즉 h1원에 style을 애니메이션을 주겠다. 그건 내가 아까 css에서 지정한
400px 에서 0으로 되게 하는것

300이하면? 
반대로 애니매이션을 slide 값에 넣어준 0에서 400px로 보여주는것 



 

728x90