반응형
updated 02/21/24
페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다.
이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자
결과화면 미리보기
CSS - 배경 이미지 animation 으로 이동시키기
일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자
// 이미지 태그가 있다.
<img className="building-img" src={building} />
animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다.
** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다.
방법1
.building-img {
position: absolute; // 일단 위치지정은 필수지!
top: 500px; // 원래 자리인 top 을 지정해주고
animation: transY 2s ease-in-out; // 애니메이션 속성을 지정해주자
@keyframes transY {
0% {
transform: translateY(400px); // 이 top 기준으로 400px 내려간 곳에서 시작할거다
opacity: 0; // 처음에는 가려놓고
}
100% {
transform: translateY(0px); // 그리고 도착지는 원래 지점
opacity: 1; // 마지막에 슬슬 보여주기
}
}
}
방법2
animation: showY 0.4s;
animation-fill-mode: forwards; // 애니메이션 끝난 후 마지막 프레임이 유지
@keyframes showY {
from {
transform: translateY(100%); // 100 퍼센트 내려간 곳에서 시작할수도 있다
opacity: 0;
}
to {
transform: translateY(0); // 맨 위로 올라오기
opacity: 1;
}
}
**animation-fill-mode
- none: 기본값으로, 애니메이션이 시작되기 전과 끝난 후에 요소의 스타일은 애니메이션 이전의 상태로 돌아갑니다.
- forwards: 애니메이션이 끝난 후에는 애니메이션의 마지막 프레임의 스타일이 유지됩니다.
- backwards: 애니메이션이 시작되기 전에는 애니메이션의 첫 번째 프레임의 스타일이 적용됩니다.
- both: forwards와 backwards의 효과를 모두 적용하여 애니메이션이 시작 전과 끝난 후에 요소의 스타일이 유지
반응형
'JavaScript' 카테고리의 다른 글
CSS - 이미지 자르기(crop) (2) | 2022.07.07 |
---|---|
CSS - <li 태그> dot 스타일 변경하기 + 들여쓰기 (0) | 2022.07.05 |
JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) (3) | 2022.07.02 |
CSS - border 뾰족한 대각선 모서리 채워넣기 (feat.box-shadow) (0) | 2022.06.30 |
JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence (0) | 2022.06.29 |
댓글