21/09/20 - 패스트캠퍼스 챌린지 15일차[Part 1 - Ch 10. 스타벅스 예제...

21/09/20 - 패스트캠퍼스 챌린지 15일차[Part 1 - Ch 10. 스타벅스 예제...

반복 애니메이션

유튜브 앞에서 떠다니는 요소를 만들어 보자

다음과 같이 구조를 만든다.

위와 같이 css를 입힌다.

위와 같이 화면이 구성된다.

다음은 반복 애니메이션을 생성해보자

함수를 추가해보자

함수가 호출 될때 인수로 어떤 요소를 선택할지 선택자 개념을 받을 것이고,

여기서는 selector 라는 매개변수를 받아서 사용할 것이다.

gsap.to(); 우리는 gsap이라는 자바스크립트 애니메이션 라이브러리를 사용하고

to라는 메서드를 사용해서 실제로 애니메이션을 넣을 수 있었다.

요소 부분에 css 선택자만 넣어도 gsap이 찾아진 요소가 넣어졌으면

찾아진 요소를 사용할 수 있다.

위와 같이 입력후 사이트 화면을 보면 애니메이션이 반복으로 작동한다.

다음은 둥둥 떠있는 애니메이션을 다음과 같은 함수를 적용해보자

지정한 함수를 복사해보 js 파일에 붙여 넣는다.

화면 반복이 더 자연스럽게 작동되는 걸 볼 수 있다.

위의 코드를 정리해보자면

gsap의 to 라는 메서드는 첫 번째로 선택자를 받을 것이고 ,

두 번째로 random() 함수를 통해서 지속시간을 실행할 것이고,

세 번째로 옵션을 지정할 것이다.

일단 애니메이션을 구현하기 위해서 메서드를 이용하면 더 세련된 움직임을 생성할 수 있다는 것이 재밌었고

여러 가지 옵션들을 구성해서 본인이 원하는 스타일을 설정할 수 있는 것이 신기했다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

from http://dhstory311.tistory.com/112 by ccl(A) rewrite - 2021-09-20 21:01:30