Animation 2

[GSAP] Tween과 to(), from(), fromTo()

GSAP은 Tween 및 Timelines를 만들고 이를 제어하는 다양한 메서드와 속성을 가진 객체(object)입니다. 그렇다면 Tween과 Timelines는 무엇인가?! 오늘은 먼저 Tween에 대해서 알아보겠습니다!! 💫 Tween Tween은 애니메이션의 속성을 정의하고, 그 속성대로 애니메이션이 작동하게 하는 것을 말합니다. target, duration 등 작성된 속성을 토대로 Tween이 작동하면서 해당 시점의 속성 값이 무엇이어야 하는지를 파악하여 이에 따라 적용합니다. (영문을 해석하다 보니... 매끄럽게 이해하시기 어렵다면... 죄송합니다...허허) Tween을 생성하기 위한 기본 메소드는 .to(), .from(), .fromTo()가 있습니다.3가지의 메소드는 Tween 인스턴스를..

Javascript 2023.07.18

[css] 텍스트 흐름 효과 marquee? animation?(반전 주의)

TV를 시청하다 보면 하단에 공지 및 안내 자믹이 흐르는 것을 본 적 있으시죠? 웹에서는 어떻게 구현하면 좋을지 알려드릴게요!! 아주 간단하게는 html의 marquee 태그를 사용하면 됩니다. HTML 삽입 미리보기할 수 없는 소스 정말 간단해서 고민한 머쓱해질 지경이랄까요....ㅎㅎㅎㅎ 간단하게 속성을 파악해볼까요? ● 의 속성 - width / height : 스크롤의 크기나 비율 지정 - bgcolor: 스크롤의 배경색상 지정 - direction : 스크롤의 움직임 방향(up, down, left, right)을 지정 - behavior : 스크롤 방식을 설정(scroll, slide, alternate) - loop : loop에 작성한 횟수만큼 반복, 기본값은 무한반복 - scrollamou..

css 2023.02.02
반응형