Easy Background Image Parallax Effect with jQuery and CSS3
File Size: | 2.18 MB |
---|---|
Views Total: | 12987 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Easy Parallax is a lightweight jQuery plugin used for adding a subtle parallax effect (plus rotate, scale, fade in and fade out effects) to background image. Powered by requestAnimationFrame method and CSS3 transforms. Works perfectly on most browsers and even touch devices.
How to use it:
1. Add a 'Hero' header to your web page.
<div class="header"></div>
2. Make the header container fix positioned and add a parallax image as a background.
.header { position: absolute; top: 0; left: 0; width: 100%; height: inherit; background-image: url(https://unsplash.it/3000/2000?image=873); background-repeat: no-repeat; background-size: cover; background-position: 50% 0; height: 500px; }
3. Load jQuery library and the jQuery Easy Parallax plugin at the end of the html document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="jquery.parallax.js"></script>
4. Active the parallax effect on scroll.
$(".header").parallax({ y: "70%" });
5. More properties that you can pass into the plugin through either JavaScript or Html5 data
attributes as in data-parallax='{"Y":"30%"}'
$(".header").parallax({ // boolean or selector. Make an elements' position fixed during the scene. pin: true // translateY y: "70%", // translateX x: 0, // translateZ z: 0, // scale effect. or scaleX and scaleY scale: 2, // Rotation in degrees. rotate: 180, // number (0 - 1) opacity: 0properties // Hex or rgb() color string. color: "#ff0000", // Hex or rgb() color string. backgroundColor: "#ff0000", // number or string (percentage or viewport units) // Better use "y" where possible. top: 0, // number or string (percentage or viewport units) // Better use "x" where possible. left: 0, // number or string (percentage or viewport units) // Better use "scaleX" where possible. width: 0, // number or string (percentage or viewport units) // Better use "scaleY" where possible. height: 0, // number or string (percentage or viewport units) // Better use "x" where possible. backgroundPositionX: 0, // number or string (percentage or viewport units) // Better use "y" where possible. backgroundPositionY: 0 });
6. Global settings. These settings can be specified for all properties, or each individually.
// number or string (percentage or viewport units) or callback function // If you need to start the scene after document's beginning or "triggerElement"'s beginning. offset: 0, // number or string (percentage or viewport units) or callback function // Percentages are calculated against element dimensions rather than viewport: "50%" == 0.5 * $(el).outerWidth(true). // For viewport relative values, use viewport units: vh or vw: "100vh" == $(window).height(). // Setting duration to "0" will run it till the end of document. duration: '0', // f you need another element to act as the trigger. // If you don't need a trigger, set this to "null" or "false". triggerElement: // the element // number or string (percentage or viewport units) or callback function // 0% is top of the viewport and 100% is bottom of the viewport. triggerHook: '100%', // function or string ease: 'linear', // string ("x" or "y") axis: 'y'
Change log:
2016-10-15
- Microsoft IE and Edge support
2016-04-25
- fixed for touch devices.
2015-10-23
- fixed percentage values for translate3d
2015-10-20
- bugfix.
2015-10-14
- bug fixes for pinning, color, left, top
2015-10-12
- bug fix "pin" property
2015-10-11
- initialisation bug fixes
2015-10-10
- bug fixes
- rename to data-parallax
2015-10-09
- bug fixes
2015-10-08
- viewport units and duration percentage refers to element dimensions rather than viewport
2015-10-07
- bugfix
- added ease option
This awesome jQuery plugin is developed by kasparsj. For more Advanced Usages, please check the demo page or visit the official website.