Genie of the Lamp 😶‍🌫️ Genie of the Lamp 😶‍🌫️

gsap

• [GSAP] scrollTo() 함수 기본 사용법

  Coding 2024. 6. 2. 23:06

  scrollTo()GSAP에서 ScrollToPlugin을 사용해 브라우저 스크롤을 특정 위치로 부드럽게 스크롤할 수 있습니다. 우선 기본적으로 gsap과 ScrollToPlugin을 프로젝트에 불러와야합니다.cdn을 통해 불러오겠습니다. 창을 위에서 500px 위치로 스크롤 이동하려면우선 'gsap.to()' 함수를 호출하고 'scrollTo' 속성에 숫자 500을 넣어서 간단하게 이동시킬 수 있습니다.gsap.to(window, {duration: 1, scrollTo: 500}); 특정 요소로 스크롤할 수도 있습니다. 예를 들어, '#section2'라는 요소로 스크롤하려면 아래처럼 적어주면 됩니다.gsap.to(window, {duration: 1, scrollTo: "#section2"});  ..

  Read More
• [GSAP] ScrollTrigger 시작 시점 리턴 값 얻는 방법

  Coding 2024. 3. 5. 22:15

  var myScrollTrigger = ScrollTrigger.create({ trigger: "#id", start: "top top", endTrigger: "#otherID", end: "bottom 50%+=100px", }); // ScrollTrigger 시작 지점으로 스크롤 포커스 가도록 가능 gsap.to(window, { duration: 0.5, scrollTo: myScrollTrigger.start, }); ScrollTrigger [properties] start start : Number [read-only] The ScrollTrigger's starting scroll position (numeric, in pixels). Details [read-only] The Scro..

  Read More
• [CSS, JS] 꽃이 흔들거리는 효과 구현하기

  Coding 2023. 5. 19. 11:21

  꽃이 바람에 흔들거리는 애니메이션을 CSS 버전과 JS 버전으로 각각 구현해 비교해보려고 합니다. 먼저 꽃 이미지를 불러옵니다. - CSS Ver. img.flower { transform-origin: center bottom; // rotate 기준을 bottom 으로 } transform-origin은 transform 속성을 사용할 때 사용한다. 초기값은 center로 transform-origin: 50% 50%;이다. transform을 사용할 요소의 기준점을 정한다. 꽃이 흔들거리는 걸 표현하려면 X는 center(50%) Y는 bottom (100%) 이어야 원하는 모양으로 나온다. | 참고 자료 | transform-origin - CSS: Cascading..

  Read More