waypoint 활용 스크롤 위치에 따른 애니메이션 만들기

JQUERY

waypoint 활용 스크롤 위치에 따른 애니메이션 만들기

funfunweb 2023. 7. 5. 17:22

waypoint cdn

waypoints - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Easily execute a function when you scroll to an element - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cl

cdnjs.com

http://imakewebthings.com/waypoints/

Waypoints

Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for

imakewebthings.com

download방법

기본 html, css 삽입 후

waypoint 사이트 jquery/zepto 부분 클릭

원하는 소스 복사

script 에 작성

var 이름변경 = $('선택자').waypoint(function() {
  해야할일
}, {
  offset: '25%' // 위에서부터 위치값(이벤트 일어날 시점)
})

See the Pen waypoint활용 scroll event by 정은 (@luchiaChoi) on CodePen.

저작자표시 비영리 변경금지

'JQUERY' 카테고리의 다른 글

each메서드 (0)	2023.07.05
항상 최신 jquery 사용 (0)	2023.07.05
jquery 시작 ready,onload차이점 (0)	2023.06.27

현재글waypoint 활용 스크롤 위치에 따른 애니메이션 만들기

funfunweb