A jQuery plugin that enhances the scrolling experience, by providing a snapping behaviour.Scrollsnap allows to define ‘anchor points’ onto which the window snaps when you scroll through a web page or parts of it.
Best jQuery Scrolling Effects Plugins & Tutorials with Demo
Pagescroll : jQuery animated scroll Menu
Create animated scroll menu with jQuery
Features:
- vertical or horizontal display
- absolute, fixed or inline styles
- left, right, top or bottom aligns
- configurable background color, font sizes, colors also configurable via CSS
- smooth animation during pagescroll
- fade in / fade out effect when user scrolling
ScrollMagic : jQuery plugin for Magical Scroll Interactions
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, easily add a parallax effect to your website, pin an element at a specific scroll position.
Features:
- optimized performance
- flexibility
- mobile compatibility
- ready for responsive webdesign
- object oriented programming and object chaining
- event management
- support for both scroll directions (even different on one page)
- support for scrolling inside div containers (even multiple on one page)
- extensive debugging and logging capabilities
Scroll Animation WordPress Plugin
Animate your WordPress content while user scrolling.
- CSS3 transition.
- Optional animation style.
- Optional jQuery selector of the WordPress content you want to animate.
- Animation trigger when user scroll to the content, you can customize the offset in the backend.
- Optional to enable the scroll animation in a certain post/page only.
- Compatible with latest jQuery and latest WordPress.
- Enqueue the js and css only when needed. Keep WordPress page size smaller.
WOW.js : Reveal CSS animation as you Scroll down a page
Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.
Advantages:
- Smaller than other javascript parallax plugins, like Scrollorama (they do fantastic things, but can be too much heavier for simple needs)
- Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
- Fast execution and lightweight code: the browser will like it 😉
Cre-animate : Onscroll jQuery Animations
Now you can quickly and easily add onscroll animations to any elements on your website. Images, Text, Buttons, anything can be animated on scrolling.Also included is an Animation Generator so you can easily select your options for the animation properties and the generator will spit out the code for your website.
Features:
- 10 Type of Animation
- Animation Speed Option
- Animation Delay
- Animation offset
- 27 Animation easing options
Slinky.js : jQuery plugin for Scrolling navigation component for web apps
Slinky.js is a jQuery plugin for creating beautiful scrolling navigation lists with stacking headers.Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times.
Features:
- Smooth scrolling by disabling pointer events
- Lightweight at around 1KB minified
- Refreshes on window resize and DOM mutation
- Compatible with the latest version of your favorite browser
ScrollStory : jQuery UI widget for Scroll-based pages and Interactions
A jQuery UI widget for building simple, scroll-based pages and interactions.
Key features :
- 100% style agnostic. Just a collection of often-used scroll-based patterns.
- Can can you existing DOM or use an array of objects to create markup.
- 16+ jQueryUI-style events/callbacks for various application state events.
- Focus and blur event when an individual story becomes active or inactive.
- Items can be grouped into categories, with event dispatched as categories change.
- Items filterable by user-specified tags.
- Items aware of their in-viewport status.
- Programmatically animated scroll to any item.
- Throttled scroll events and minimal DOM usage.
Examples :
- Basic instantiation via existing page elements
- Basic instantiation using custom item selector
- Pass data in via data attributes
- Basic instantiation via array of objects
- Programmatically scroll up and down
- Item active event
- Move the trigger point
- Using categories
- Lazy load images on enterviewport
