JavaScript14 [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. [오류 기록] uncaught referenceerror: $ is not defined / jQuery 오류 scrollify.js를 사용하기 위해 아래와 같이 삽입했는데 계속 오류가 남. 크롬 개발자도구에서 처음엔 Uncaught TypeError: $.scrollify is not a function" 오류가 발생함. 여러 조치를 해봤는데, 이번엔 아래 오류 표시 uncaught referenceerror: $ is not defined 검색해보니 jquery가 제대로 import 되었는지 확인해보래서 새로 최신 버전 다운받아 import 해보았다. 그러니 성공. 스크롤로 섹션 단위 이동되는 것은 확인.그런데 화면 배경으로 쓰인 video 태그들이 죄다 비정상적으로 확대되었다. 개발자도구 element.style에 height가 너무 큰 값으로, 창크기에 따라 바뀌며 표시되는 것 확인해서 css에서 heig.. 2023. 3. 15. <script>와 <script type="text/javascript"> 차이 웹 표준은 이다. 과거에는 javascript 외 스크립트 언어들이 자주 사용되어 브라우저가 javascript를 인식하기 위해 명시했다. (Text를 통해서 스크립트를 구현한다는 의미) HTML5에서는 태그 type의 default가 text/javascript로 이기 때문에 만 써도 되지만, 하위 호환성을 위해 type까지 적는 것이 좋다. 참고로, 의 디폴트도 css로 지정되어 type="text/css" 를 지정해줄 필요가 없다. 2023. 3. 15. 이전 1 2 3 4 다음