컴퓨터 정보/css
css + html + javascript 를 이용해 animation을 만들자 (스크롤)
혜닝혜루
2022. 11. 3. 22:09
728x90
반응형
html
<body>
<section>
<h1> PICK YOUR FAVORITE</h1>
<img class="photo" src="https://image.istarbucks.co.kr/upload/common/img/main/2022/2022_NewYear_pick_img.png">
</section>
<script src="main.js"></script>
</body>
</html>
css.
body{
margin: 0;
height: 2000px;
}
section{
height: 800px;
background: url(https://www.starbucks.co.kr/common/img/main/fav_prod_bg_new.jpg) fixed;
}
.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