전체 글28 [ScrollTrigger] start 옵션에 대하여 (초간단) 1) fromTo 메서드를 사용할 때 start는 scrollTrigger 안에 명시한다. 2) bottom center: 요소의 bottom이 화면의 center에 왔을때 start top center: 요소의 top이 화면의 center에 왔을때 start gsap.fromTo(".section1 .img01", {duration: 0.6, opacity: 0}, {delay: 0.2, scrollTrigger: { trigger: ".section1 .img01", start: "center bottom" }, opacity: 1} ); 2023. 4. 26. [Scolltrigger] fade-in 효과 적용 시 이슈(잠깐 나타났다 fade-in 동작) GSAP Scolltrigger를 이용해 opacity가 0이었다가 1로 변경되는 효과를 주려고 했다. 추가로 y 값도 변경하여 위에서 올라오며 나타나도록 효과를 주었다. 그런데, 위와 같이 페이지가 로딩되며 text가 잠시 표시되었다가 fade-in으로 나타나는 문제가 생겼다. gsap 코드는 아래와 같이 from 메서드를 이용했다. gsap.from(".section1 .row h2", { scrollTrigger: { trigger: ".section1 .row h2", }, duration: 0.6, opacity: 0, y: 80, }); gsap.from(".section1 .row .new_font22", { delay: 0.4, scrollTrigger: { trigger: ".sectio.. 2023. 4. 24. inline-block 사이 간격 발생 (margin: 0) 에 display: inline-block를 적용했는데 margin: 0 임에도 사이 여백이 발생한다. 원인은 태그 사이 줄바꿈, 공백이 빈칸(whitespace)으로 파싱되는 문제이다. 태그 사이 줄바꿈, 공백을 제거하면 아래와 같이 된다. 다만 이 경우, 코드 가독성을 심하게 해치게 되는데.. > 해결방법 1. [HTML] 빈 공간 주석처리 닫는 태그부터 다음 여는 태그 전까지를 주석처리한다. 2. [HTML] 닫는 태그 '>'를 줄바꿈하기 3. [CSS] container의 font-size: 0 설정 .div-wrapper { font-size: 0px; } 4. inline-block 대신 float, flex 사용 - 단, 가운데 정렬한다면 float은 추가 설정이 필요하고, flex의 경우 .. 2023. 4. 12. 나의 Parallax 적용기.. [GSAP 사용] 남들은 모두 쉽게 적용하는 parallax (img, text 말고 section 단위 적용) 만날 수 있는 모든 오류를 만난 후 겨우 적용한 것 같다. HTML 코드: Parallax Scroll JS (GSAP) : gsap.to(".parallax-01", { yPercent: 100, ease: "none", scrollTrigger: { trigger: ".parallax-01", scrub: true }, }); CSS : .parallax-body { position: relative; height: 75vh; width: 100vw; box-sizing: border-box; overflow: hidden; } .parallax-01 { width: 100%; min-width: 1300p.. 2023. 3. 30. 이전 1 2 3 4 5 ··· 7 다음
