모션2 Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기 Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다. 모션에는 여러 종류가 있지만 오늘은 스크롤을 내 bellmir.tistory.com 저번 포스팅에서 window.scrollY와 element.offsetTop을 이용하여 스크롤 위치에따른 등장 모션을 구현하는 법을 다뤘었습니다. 그런데 이 방법은 너무 복잡하기도 하고, 여러 요소에 같은 모션을 적용한다 하더라도 각각 높이를 계산하여 따로 붙여하는 수고가 있었습니다. 오늘은 Intersection observer라는 웹 a.. 2022. 2. 18. 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다. 모션에는 여러 종류가 있지만 오늘은 스크롤을 내릴 때 요소가 화면에 등장하는 모션을 한번 만들어 보겠습니다. 스크롤 관련된 모션이나 기능을 넣을 때는 보통 'ScrollMagic'이라는 라이브러리를 많이 사용하는데 오늘은 그런거 없이 순수 자바스크립트 기능만으로 모션을 구현해 보려고 합니다. 스크롤 모션 구현에 필요한 Web API는 크게 addEventListener와 scrollY, offsetTop 세가지로 각각 무슨 역할인지 알아보고 최종 예제 코드를 살펴봅시다. addEventListener() addEventListener는 특정한 이벤트가 일어나.. 2022. 1. 25. 이전 1 다음
