Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.
Best jQuery Parallax Plugins & Tutorials with Demo
A full-width figure element, with floating images distributed in a 3D space.
What you can achieve through CSS 3D Transforms is limitless. With power comes responsibility, though. There will be cases when you’ll take full advantage of CSS 3D capabilities. In most projects, though, you can just spice things up a little.
Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their
background-attachment property is between
fixed, similar to the parallax scrolling effect you see on Spotify.
It makes clever use of
background-size properties instead of CSS3 tranforms. It runs buttery smooth and retains the rubber-band scroll behavior in Safari. Works great on mobile too.
This jQuery plugin is useful for creating parallax motion or similar effects in which a CSS property needs to be incremented on user scroll.
SParallax is a responsive Jquery plugin that allows you to bind element transitions to the native vertical scroll bar of any web browser, thus allowing you to create parallax effects that are only limited by your imagination.
- 9 3D Effects available, with more on the way…
- Autoplay, with optional pause on hover
- Infinite Loops
- Parallax effects, optional
- Auto-Focus on load
- Lightweight, 5KB minified
- Responsive Image Support
- Video Carousels
- Extensible callbacks
- Styles come in LESS, SASS, and Stylus
Experimental lightweight JS script to facilitate quick scroll based animations.
Awesome Shop is a premium multi-purpose slider for creating content sliders with must-see effects. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n’drop WYSIWYG slider builder, real-time previews and Google Fonts. It’s device friendly by supporting responsive mode, multiple layouts.
- Responsive Layout
- Parallax Effect
- Animated Layers
- Google Fonts – over +600 fonts
- Easy setup – Drag&Drop
- No extra coding
- Best for eCommerce
Parallaxer is a script that turns any content into a cool parallax effect. It works smooth with any content you throw at it, images and even sliders, video players, basically any html content.
- fully responsive
- touch optimized
- CSS3 technology
- iPhone / iPad optimized
- Android optimized
- SEO friendly
- compatible with all major browsers, including IE
- retina ready
- embed ready
- developer / SASS powered
In this tutorial, we take a look at a more advanced parallax scrolling effect with a background image moving at a different speed to the content above it.We’ll look into achieving a more true-to-life representation of parallax scrolling. As defined previously, parallax is an effect where the position of an object seems to be different when viewed from different positions. In this tutorial, our background will move at a slower speed than our foreground.