JavaScript14 [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. 나의 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. scrollify.js의 pagination (네이비게이션) scrollify를 이용해 화면 우측에 위와 같은 pagination을 만들었다. (html, css는 생략) 현재 section에 해당하는 원(span)에 active-dot 클래스를 추가하면 원의 색이 채워지고, opacity: 0이 기본값인 텍스트(div)에 active-text 클래스를 추가하면 opacity: 1로 글자가 표시되게 했다. 결과적으로 scrollify 스크립트 코드에 아래와 같이 before 함수를 추가하면 된다. move() 동작 전에 함수가 실행된다. ref엔 현재 section의 이름이 저장된다. data-section-name 값을 지정한 경우 그 값이 이름이 된다. (url #뒤에 표시됨) $.scrollify({ section : ".scrollSection", scro.. 2023. 3. 30. 스크롤 부드럽게 하는 JS scrollify와 함께 사용하니 아주 버벅 거렸다. 저장용으로 기록 2023. 3. 28. 이전 1 2 3 4 다음
