20 个用于处理页面滚动效果的 jQuery 插件

20 个用于处理页面滚动效果的 jQuery 插件

英文原文：20 jQuery Plugins for Scrolling Effects

 

When it comes to designing and developing a website, web developers can’t underestimate the importance of awebsite scrolling. Nowadays designers are taking it up as a challenge and making website scrolling visually effective and eye catching for the visitors. For helping developers there are myriad of jquery scroll plugins are available which helps them to create certain scrolling effects which engage users with background reveals, element animation, and many more eye catching effects based on page scroll position. In this article I have gathered 20 jQuery Plugins that would help you to create outstanding scrolling effects for your websites. Following jQuery Scroll plugins lets you scroll any element for your website in the manner which makes your website beautiful, attractive and eye catching.

1. One Page scroll 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. 2. Scrolld 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.

3. Animate Scroll 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”. The plugin is not limited to the full body of the page but a specific wrapper element can be targeted too. 4. JInvertScroll 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. The plugin is lightweight less than 1 kb and works with almost no setup. Adding a specific class to wrapper elements and calling a JS function i senough.

已有1人翻译此段 ToB蓝波湾 我来翻译

5. Smint 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. SMINT is a simple plugin, so only has an option for how fast the page scrolls. The default speed is 500 (half a second) but you can now set that to be whatever you like. The download comes with demo included so feel free to use that as a staring template for your own one page website. 6. jQuery Arbitrary Anchor Plugin jQuery Arbitrary Anchor Plugin allows the page to scroll to any arbitrary object on the page based on jQuery/CSS selector. you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.

已有1人翻译此段 ToB蓝波湾 我来翻译

7. ScrollUp 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. ScrollUp is fully customizable through CSS which makes it simple to fit right into your project. Simply target the scrollUp’s generated ID in your CSS file and set your styles. It is released under MIT License. 8. jQuery Stick ‘em 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. The solution is to make the content sticky as you are scrolling. The tricky part was that we couldn’t just make the text position: fixed once it reached the top of the screen and be done with it. Since there are many sections on a page sometimes, we had to “un-stick” the content at a point too. So here we go, jQuery Stick ‘em, to enable this functionality.

已有1人翻译此段 ToB蓝波湾 我来翻译

9. Infinity.js Infinity.js is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. The code is hosted on Github, and distributed under the BSD License. The annotated source is available, as are demos both with Infinity turned off and on. Infinity.js was built by Airbnb alongside the development of the Popular Wishlists and Friends feeds, and sees daily production use there today. Its only dependency is on jQuery. 10. jQuery Scroll Path 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. Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.

已有1人翻译此段 tnjin 我来翻译

11. Mobiscroll 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). The control is themable. 12. Page Scroller 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. You can choose the positions of the navigation menu, and you can also change the scrolling speed easily. This smooth scroll plugin requires jQuery v1.3+.

已有1人翻译此段 ToB蓝波湾 我来翻译

13. WayPoints Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element. Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page. Waypoints is dual licensed under the MIT and GPL licenses. It has been tested with jQuery versions 1.4+ in IE6+, FF3+, Safari 4+, and Chrome 6+. 14. Custom Scrollbar Plugin 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. You simply need to include jquery.min.js and jquery-ui.min.js, the jquery.easing.1.3.js (the plugin that handles animation easing), jquery.mousewheel.min.js (to support mouse-wheel functionality) and the jquery.mCustomScrollbar.css which is the file where you can style your content and scrollbars.

已有1人翻译此段 旋转360 我来翻译

15. Windows 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. 16. Perfect Scrollbar Perfect Scrollbar is a lightweight (Less than 14kb) jQuery plugin for creating them without any hassle. It doesn’t ruin the default layout or require/apply any CSS changes. The plugin works with containers of any size and re-arranges the positions if a container-resize happens. Also, the design of the scrollbar can be customized completely with CSSand it supports jquery-mousewheel plugin in case you want to make use of it.

已有1人翻译此段 旋转360 我来翻译

17. Any List Scroller 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. 18. SuperScrollorama 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.

已有1人翻译此段 ToB蓝波湾 我来翻译

19. Scroll Follow Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. It means the plugin allows an element to animate down as the user scrolls the page. Scroll Follow has been successfully, though not extensively, tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 all on Windows. You can also set the the duration of the sliding animation. 20. Sly 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.