Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions.
Best jQuery Parallax Plugins & Tutorials with Demo
Parallax Hero Image with CSS3 3D Transforms
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.
jQuery Parallax Scroll Plugin
Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify.
It makes clever use of background-position and 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.
Bee3D Slider : Touch-Enabled Pure JS Plugin
Bee3D Slider is a floating 3D slider and carousel plugin built with pure Javascript and CSS3 transformations!
Features:
- Touch-Enabled
- 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
- Mobile-friendly
- Extensible callbacks
- Styles come in LESS, SASS, and Stylus
Awesome Shop : Premium WordPress Catalog Grid
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.
Features:
- Responsive Layout
- Parallax Effect
- Animated Layers
- Google Fonts – over +600 fonts
- Easy setup – Drag&Drop
- No extra coding
- Best for eCommerce
Parallaxer : jQuery Parallax Effects on Content
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.
Features:
- 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
Advanced Parallax Scrolling Effect with CSS3 & JavaScript
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.
