-
[CSS, JS] 꽃이 흔들거리는 효과 구현하기Coding 2023. 5. 19. 11:21반응형
꽃이 바람에 흔들거리는 애니메이션을 CSS 버전과 JS 버전으로 각각 구현해 비교해보려고 합니다.
< HTML >
<img src="https://cdn.pixabay.com/photo/2023/01/26/18/09/yellow-flowers-7746722_960_720.png" class="flower">
먼저 꽃 이미지를 불러옵니다.
- CSS Ver.
< CSS >
img.flower { transform-origin: center bottom; // rotate 기준을 bottom 으로 }
transform-origin은 transform 속성을 사용할 때 사용한다.
초기값은 center로 transform-origin: 50% 50%;이다.
transform을 사용할 요소의 기준점을 정한다.
꽃이 흔들거리는 걸 표현하려면 X는 center(50%) Y는 bottom (100%) 이어야 원하는 모양으로 나온다.
| 참고 자료 |
img.flower { animation: swaying-flower 3s infinite ease-in-out; } @keyframes swaying-flower { 0% {transform: rotate(-10deg);} 50% {transform: rotate(10deg);} 100% {transform: rotate(-10deg);} }
transform: rotate 속성을 사용해 이미지 회전을 반복해 주는 keyframe을 실행합니다.
꽃이 -10 deg에서 10 deg로 갔다가 다시 돌아오는 것을 반복해야 하기 때문에 keyframe을 3개로 분리했고,
animation의 기본 easing을 ease-in-out으로 추가하여 좀 더 바람에 흔들리는 것처럼 구현해 봤습니다.
- JS Ver.
< CSS >
img.flower { transform-origin: center bottom; // rotate 기준을 bottom 으로 }
JS 버전 기본 CSS는 위와 동일합니다.
< HTML >
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
JS 버전에서는 gsap라는 자바스크립트 라이브러리를 사용해 구현했습니다.
css나 일반 Javascript만으로도 애니메이션을 구현할 수 있지만,
gsap는 애니메이션에 최적화된 라이브러리이기 때문에 사용하기 간편하고 호환성이 좋습니다.
< JS >
gsap.fromTo(".flower", { rotate: -10, }, { rotate: 10, duration: 1.5, repeat: -1, yoyo: true, ease: 'power2.inOut', });
fromTo는 말 그대로 ~로부터 ~로라고 생각하면 됩니다.
꽃이 rotate -10deg에서 10deg로 움직이도록 표현하였고,
duration은 -10deg에서 10deg로 가는 시간입니다.
repeat: -1는 css의 animation: infinite와 같습니다.
yoyo는 -10deg에서 10deg / 10deg에서 -10deg로 반복하겠다는 의미입니다.
ease 역시 css의 easing과 동일한데 gsap에서는 훨씬 다양한 easing을 제공하므로
흔들리는 꽃을 좀 더 효과적으로 표현할 수 있습니다.
| 참고 자료 |
- 합쳐진 코드
CSS버전과 JS버전을 비교할 수 있는 코드입니다.
두 버전의 easing이 달라서 흔들리는 속도감도 달라 보이는 모습을 볼 수 있습니다.
반응형'Coding' 카테고리의 다른 글
[CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징) (0) 2023.07.13 [CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..) (0) 2023.07.12 [CSS] Hover 하는 형제들(siblings) 스타일 적용 (0) 2023.05.12 [Javascript] 카운트다운 만들기 (0) 2023.02.15 [CSS] 동영상 반응형 사이트에 추가하기 (0) 2022.11.10