最好的jQuery滚动插件集合

jopen 10年前

1. Scroll Magic

最好的jQuery滚动插件集合
ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar. It’s the plugin for you, if you want to start an animation at a specific scroll position, synchronize an animation to the scrollbar movement, pin an element at a specific scroll position (sticky elements).

2. Smoove

最好的jQuery滚动插件集合
Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.

3. One Page Scroll

最好的jQuery滚动插件集合
One Page Scroll, a jQuery plugin, simplifies creating such websites so easy. It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go. Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.

4. Scrolld

最好的jQuery滚动插件集合
Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.

5. Cool Kitten

最好的jQuery滚动插件集合
Cool Kitten is responsive, which is the best way to have a website with abilities to be viewed in every computer, tablet and mobile. It supports Parallax Scrolling, which makes a beautiful visual effect that brings a second life to every slide.

6. Stellar.js

最好的jQuery滚动插件集合
Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The first step is to run .stellar() against the element.

7. ScrollMe

最好的jQuery滚动插件集合
ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required. ScrollMe uses a simple declarative syntax: just include jQuery & scrollme.js, add some bits to your markup and ScrollMe will do the rest. The scrollme class defines a container for animated elements. The progression of the animations is based on the scrolling through this element.

8. Perfect Scrollbar

最好的jQuery滚动插件集合
Perfect Scrollbar is a tiny but perfect jQuery scrollbar plugin. The scrollbar does not affect the original design layout. The design of the scrollbar is fully customizable. You can change nearly all css styles of the scrollbar. The scrollbar design has no dependency on scripts.

9. Stickup

最好的jQuery滚动插件集合
Stickup is a simple jQuery plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.

10. jQuery Scroll Path

最好的jQuery滚动插件集合
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin.

11. Animate Scroll

最好的jQuery滚动插件集合
AnimateScroll is a simple jQuery plugin for adding easing effects to scrolling. It is possible to customize the style of scrolling (30+ scrolling effects) and scroll speed. There is also a “padding” option where we can manipulate “the position where the scrolling ends”.

12. Block Scroll

最好的jQuery滚动插件集合
Block Scroll is a jQuery plugin that turns a set of elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.

13. jInvertScroll

最好的jQuery滚动插件集合
jInvertScroll is a jQuery plugin that manipulates the default scrolling behavior and forces a horizontal scroll. It also eases creating parallax effects with the onScroll callback where we can decide to animate any element.

14. SuperScrollorma

最好的jQuery滚动插件集合
It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects. Similar to an animation app, it allows us to add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

15. StarScroll

最好的jQuery滚动插件集合
Starscroll is a jQuery plugin that adds a fullscreen starfield, generated in canvas, controlled by css to any div. The parallax responds when user scrolls (no matter how big your content), or when is set to animate.

16. Skrollr

最好的jQuery滚动插件集合
Skrollr is a stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified. Skrollr is much more than “just” parallax scrolling. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all.

17. Smint

最好的jQuery滚动插件集合
Smint is a simple jQuery plugin that helps with the navigation on one page style websites. It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.

18. FullPage.js

最好的jQuery滚动插件集合
FullPage.js is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). It enables you to create fullscren scrolling websites as well as adding some landscape sliders inside the sections of the site.

19. Scrolldeck

最好的jQuery滚动插件集合
A jQuery plugin for making scrolling presentation decks.

20. Curtain.js

最好的jQuery滚动插件集合
This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises. To navigate, you can use your keyboard instead the scrollbar or mousewheel to navigate into the document. But that’s not all, there is more features! For example, you can easily add a fixed element or multiple “steps” element inside a panel.

21. Parallax Image Scroll

最好的jQuery滚动插件集合
jQuery and amd compatible plugin to create a parallax effect with images. Heavily inspired by the spotify.com website. The plugin is really simple to use with some options to tweek. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.

22. ScrollUp

最好的jQuery滚动插件集合
ScrollUp is a lightweight jQuery plugin to create a customizable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS colour to the activeOverlay setting.

23. MobiScroll

最好的jQuery滚动插件集合
Mobiscroll is a wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab). The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list).

24. Page Scroller

最好的jQuery滚动插件集合
Page Scroller is a powerful JavaScript based smooth scrolling navigation system that utilizes the robust jQuery library. Created entirely with ease of use in mind, the plugin will work on any website.

25. Windows

最好的jQuery滚动插件集合
Windows is a lightweight jQuery plugin for nicely scrolling the full-screen. It provides a simple and handy API for managing the page/content position to ease the browsing experience. The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.

26. MultiScroll

最好的jQuery滚动插件集合
multiScroll-js is a simple jQuery plugin to create multi scrolling websites with two vertical scrolling panels.

27. Any List Scroller

最好的jQuery滚动插件集合
Any List Scroller is a very handy jQuery plugin that can perform the scrolling with any list and in any dimension. The list elements can be sized differently, it can stop on the first/last items or work infinitely, there is auto-scroll and the number of items to be displayed can be set.

28. qpScroll

最好的jQuery滚动插件集合
qpScroll is a jQuery plugin that creates a parallax background for any page or div. It is simple to setup. It can be added to any existing page without the need to change the HTML mark up.

29. Single.js

最好的jQuery滚动插件集合
SingleJS is a jQuery plugin that makes it easy to create websites with single-page scroll.

30. Scrollcue

最好的jQuery滚动插件集合
Scrollocue is a jQuery plugin for building a simple autocue/teleprompter system, to scroll through lines of text.

31. Sly

最好的jQuery滚动插件集合
Sly is a jQuery plugin that offers item-based (like image/content galleries) scrolling with many useful options. Within a defined container element, items inside can be browsed with the help of a scroller or with the functions provided like next, nextPage, toStart, toEnd, 5 toStart, etc.

32. Custom Scrollbar Plugin

最好的jQuery滚动插件集合
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width.

33. jQuery Stick’em

最好的jQuery滚动插件集合
jQuery Stick ‘em makes Content Sticky on Scroll, to a Point. Sometimes, we have some of those images were very tall. So by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the text to give you context about the images you had just viewed.

34. Slinky.js

最好的jQuery滚动插件集合
Slinky.js is a jQuery plugin for creating beautiful scrolling navigation lists with stacking headers. It has numerous features such as smooth scrolling by disabling pointer events, Lightweight at around 1KB minified,refreshes on window resize and DOM mutation, and compatible with the latest version of your favorite browser.

35. Parallax.js

最好的jQuery滚动插件集合

Parallax.js is a lightweight solution for creating parallax effects. Besides mouse/cursor support, it works on mobile and tablet (where gyroscope or motion detection hardware is available) too. It comes with multiple options for customizing the effect where they can be set inline using “data attributes” or in JavaScript.