멋진 스크롤 효과를위한 JavaScript 라이브러리
웹 사이트 디자인은 잘 실행 된 애니메이션으로 생생합니다. 프로젝트에 효과를 추가 할 적절한 라이브러리를 찾고 있다면, 여기에 몇 가지 라이브러리 목록을 만들었습니다. 스크롤 이벤트를 기반으로 효과를 줄 때 사용할 수 있습니다..
사용자가 웹 페이지를 아래로 스크롤하면 작업 다양한 애니메이션 옵션을 트리거하도록 설계 할 수 있습니다. 예를 들어 페이드 효과, 흐림, 3D, 시차 등이 있습니다. 이 사이트에는 25 개의 JS 라이브러리가 있으며 사이트 디자인에서 이러한 종류의 응답을 얻을 수 있습니다..
Scroll Reveal
웹 및 모바일 용 스크롤 애니메이션을 쉽게 추가 할 수있게 해주는 라이브러리입니다. 애니메이션을 적용하려는 요소에 사용자 정의 여유 공간, 3D 회전, 지속 시간 및 많은 mor 매개 변수를 설정할 수 있습니다.
종속성 : 없음 | 크기: 2.9kb | 특허: MIT
애니 뷰
요소가 뷰포트에 들어올 때만 애니메이션을 활성화하는 Animate.CSS와 함께 작동하는 플러그인.
종속성 : jQuery | 크기: 1kb | 특허: N / A
보기로 사라지다
미리보기 영역에 들어가거나 나갈 때 요소에 페이드 인 / 아웃 효과를 추가하는 플러그인.
종속성 : jQuery | 크기: 3.81kb | 특허: N / A
와우
WOW는 스크롤 이벤트에 Animate.css 애니메이션을 표시합니다. HTML 마크 업에서 바로 애니메이션 길이, 지연, 오프셋 및 반복을 설정 한 다음 JS에서 요소의 클래스를 호출 할 수 있습니다..
종속성 : Animate.css | 크기: 8.23kb | 특허: MIT
ScrollMagic
이 플러그인은 사용자가 페이지를 스크롤 할 때 '마법'효과를 나타냅니다. 스크롤 위치에 따라 애니메이션 효과, 요소 고정 또는 CSS 클래스 전환이 가능합니다. ScrollMagic은 애니메이션 장면을 생성 할 때 GSAP 및 VelocityJS와 함께 사용할 수 있습니다. 여기에서 전체 데모보기.
종속성 : jQuery, GSAP, Velocity.js | 크기: 16.9kb | 특허: MIT
jScrollability
jScrollability를 사용하면 복잡한 스크롤 기반 애니메이션으로 단일 웹 페이지를 만들 수 있습니다. 사용자가 스크롤 할 때, 요소는 스크롤 위치에 따라 움직입니다. 애니메이션은 스크롤 깊이에 따라 실행되며 물론 애니메이션의 시작과 끝을 설정할 수 있습니다.
종속성 : jQuery | 크기: 1.86kb | 특허: MIT
pushIn.js
사용자가 페이지를 스크롤 할 때 작동하는 요소에 dolly-in 또는 push-in 효과를 추가하는 간단한 라이브러리입니다. 구현하기 쉽습니다. 시작, 중지 및 속도 매개 변수를 데이터 매개 변수 HTML 요소에.
종속성 : 없음 | 크기: 4.94kb | 특허: N / A
Scrollissimo
부드러운 스크롤 컨트롤 애니메이션을 추가하는 JS 라이브러리입니다. Greensock의 트윈 및 타임 라인을 사용하여 더 부드러운 애니메이션을 생성합니다..
종속성 : GreenShock TweenLite / TweenMax | 크기: 2.94kb | 특허: N / A
jQuery 애니메이션 스크롤 플러그인
이것은 Greensock을 사용하여 뷰포트 트리거 애니메이션을 추가하는 jQuery 플러그인입니다. 이클립스, 변형, 크기 조절, 회전 및 3D 애니메이션을 사용하여 요소를 쉽게 애니메이션화 할 수 있습니다..
종속성 : jQuery, GreenShock | 크기: 14kb | 특허: GNU GPL
회람
Circlr을 사용하면 스크롤, 마우스 이벤트 또는 터치 이벤트에 의해 트리거되는 요소에 회전 애니메이션을 만들 수 있습니다. 360도 모든 각도에서 볼 수있는 제품의 쇼케이스를 만드는 것은 완벽합니다. 사용자 스크롤에 의해 활성화됩니다..
종속성 : 없음 | 크기: 6.05kb | 특허: MIT
스크롤 장치
Scrollimator는 위치를 표시하고 진행 상황을 스크롤하고 사용자 스크롤 동작에 첨부 된 트윈 애니메이션을 변경하는 데 사용할 수있는 값을 반환합니다. 수직 및 수평 스크롤을 지원합니다..
종속성 : 없음 | 크기: 37.7kb | 특허: N / A
크로스 페이드
크로스 페이드는 이미지에 크로스 페이드 효과를 추가하는 플러그인입니다. 사용자가 더 아래로 스크롤하면 흐린 효과가 계속됩니다..
종속성 : jQuery | 크기: 3.19kb | 특허: MIT
페이지 스크롤 효과
이것은 CodyHouse에서 만든 실험적인 페이지 스크롤 효과를위한 라이브러리입니다. 그것은 velocitey.js 애니메이션.
종속성 : jQuery, Velocity.js | 크기: 17.6kb | 특허: N / A
jquery.parallax-scroll
이 라이브러리를 사용하면 수직 페이지 스크롤에 시차 효과를 부드럽게 추가 할 수 있습니다. jQuery와 jquery.easing.1.3.js를 가져온 다음 '데이터 - 시차' 속성 및 선택 사항을 요소에 적용하여 효과를 사용자 정의합니다..
종속성 : jQuery, jQuery.easing | 크기: 8.72kb | 특허: GNU GPL
parallax.js
Parallax.js는 Spotify 웹 사이트에서 영감을 얻은 시차 스크롤 효과를 추가하는 간단한 플러그인입니다..
종속성 : jQuery | 크기: 6.63kb | 특허: MIT
Enllax
Enlax는 모든 스크롤 요소에 시차 효과를 적용 할 때 사용할 수있는 초경량 라이브러리입니다. 근원적 인 효과에 배경 또는 전경 요소를 설정할 수 있습니다. 수직 및 수평 스크롤 모두에 적용됩니다..
종속성 : jQuery | 크기: 1.53kb | 특허: MIT
스크롤에 흐리게 표시합니다.
이 라이브러리는 페이지 스크롤에 의해 트리거되는 이미지에 흐림 효과를 추가하는 데 도움이됩니다. 페이지를 아래로 스크롤할수록 이미지가 흐릿 해집니다..
종속성 : 없음 | 크기: 1.1kb | 특허: N / A
boxLoader
boxLoader는 페이지 스크롤시 요소를로드하는 간단한 플러그인입니다. 설정해야 할 매개 변수는 방향 (x 또는 y), 백분율에 대한 위치, 효과 및 지속 시간입니다..
종속성 : jQuery | 크기: 3.42kb | 특허: N / A
기울어 진 페이지 스크롤
사용자가 페이지를 스크롤 할 때이 플러그인은 설정 한 요소에 멋진 3D 기울어 진 효과를 나타냅니다..
종속성 : jQuery | 크기: 1.5kb | 특허: GNU GPL
아렐 렉스
AhRelax는 빠른 스크롤 기반의 애니메이션을 만드는 방법을 제공합니다. 그것은 lighweight이고 또한 훌륭한 성능을 가지고 있습니다. 여기에 대한 자세한 내용은 여기를 참조하십시오..
종속성 : jQuery | 크기: 1.6kb | 특허: MIT
멋진 스크롤
Android 또는 iOS에서 오버플로 스크롤 효과를 볼 수있는 경우이 플러그인을 사용하여이를 사이트에 적용 할 수 있습니다. 사용자가 페이지 상단 / 하단에 도달하면 바운스 또는 글로우 애니메이션을 추가 할 수 있습니다..
종속성 : jQuery | 크기: 2.64kb | 특허: GNU GPL
시차 이미지 스크롤
이 플러그인은 사용자가 페이지를 아래로 또는 위로 스크롤 할 때 요소를 뜨고 움직이게합니다..
종속성 : jQuery | 크기: 8.69 킬로바이트 | 특허: MIT
Rlsmooth
이것은 사용자가 페이지를 축소 또는 위로 스크롤 할 때 흐르는 효과를 만드는 작은 플러그인입니다. 슬라이드, 페이드 및 쇼의 세 가지 효과를 사용할 수 있습니다..
종속성 : jQuery | 크기: 1.95kb | 특허: MIT
Scrollme
요소의 불투명도 조정, 회전, 변환 및 변경과 같은 페이지 스크롤에 간단한 효과를 추가합니다. 설정하기 쉽습니다. jQuery와이 플러그인을 가져 와서 요소의 마크 업에 애니메이션 매개 변수를 설정하기 만하면됩니다..
종속성 : jQuery | 크기: 5.45kb | 특허: N / A
시차 ImageScroll
이 플러그인을 사용하면 페이지의 모든 이미지에 시차 효과를 줄 수 있습니다. 효과를 내기 위해 CSS3 Transform을 사용합니다. 이 플러그인은 jQuery와 AMD를 지원합니다..
종속성 : jQuery | 크기: 8.01kb | 특허: MIT
