전체 글28 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. [GSAP]fade-in 효과 restart 제대로 적용하기(이전 잔상 없애기) 제목이 좀 이상할 수 있지만 정확하게 풀어서 말하면, 내가 원하는 효과는 스크롤을 아래로 내렸을 경우 텍스트가 fade-in 되고 아래로 더 스크롤 해 화면 밖으로 텍스트가 벗어났다가 다시 위로 스크롤 할 경우 fade-in이 다시 동작하는 것. 그래서 toggleActions을 다음과 같이 주었다. gsap.from(".s1-subtext", { delay: 0.5, scrollTrigger: { trigger: ".s1-title", toggleActions: "restart none restart none" }, duration: 0.8, opacity: 0, y: 60, }); scrollify와 같이 사용해서인지는 몰라도, 아래에서 위로 스크롤 할 경우 이전에 나타났던 텍스트가 잠깐보였다가 사라.. 2023. 3. 16. scrollify.js에서 부드럽게 스크롤 하는 버튼 만들기 로 이동할 때 바로 이동되지 않고 스크롤을 부드럽게 하는 코드는 html {scroll-behavior: smooth;} 인데, scrollify.js와 함께 사용하니 이상하게 동작한다. 굉장히 느리고 답답하게. scrollify.js 데모사이트에서 방법을 확인했다. $(function() { $.scrollify({ section : ".scroll-section", //interstitialSection:".header, .footer", //scrollSpeed: 500, }); $(".scroll-down").click(function(e) { e.preventDefault(); $.scrollify.next(); }); }); next() 외에도 다양한 메소드를 홈페이지에서 확인할 수 있다. 최.. 2023. 3. 15. 이전 1 2 3 4 5 6 7 다음
