지속가능한 개발 노트:)

애니메이션을 쉽게 구현할 수 있게 해주는 라이브러리인 gsap!! gsap의 scrollTrigger를 이용하여 각각의 영역에 스크롤이 위치하게 되면 해당 탭메뉴가 On, 벗어나게 되면 Off 되도록 구현해 보았습니다!! 나름 알록달록 꾸며보았습니다ㅎㅎㅎ Home About Work Contact panel-Home panel-About panel-Work panel-Contact .nav-list{position:fixed;top:0;left:0;width:150px;height:auto;background:#fff;} .nav-list .item{display:block;text-decoration:none;color:#000;padding:10px;text-align:center;border:1px..

웹페이지에 스크롤시 동작하는 애니메이션을 scroll event를 사용하지 않고 구현해보려고 합니다!! 오늘의 주인공은 new IntersectionObserver() 입니다. new IntersectionObserver() Intersection observer는 요소가 뷰포트에 보이는지 구별하는 기능을 합니다. 이를 이용하여 스크롤시 요소가 뷰포트에 보이게 되었을 때 애니메이션이 실행되게 하면 되겠습니다! Intersection observer 비동기적으로 실행되기 때문에, 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있고, 또한 브라우저별 오차를 걱정하지 않아도 되기 때문에 아주 유용합니다. 그럼 이제 예시를 볼까요? HTML 삽입 미리보기할 수 없는 소스 ● new Intersec..