Minimalist 3D Parallax Effect with jQuery and CSS3
File Size: | 2.62 KB |
---|---|
Views Total: | 19530 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An interactive background parallax effect that uses jQuery and CSS3 transform & translate3d to move a set of DIV layers at different speeds (offsets) on mouse over.
See also:
- jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
- Smooth Parallax Effects with jQuery and CSS3 - woolParalax
- Interactive Mouse Hover Parallax Effect with jQuery - Mouse Parallax
- Simple and Lightweight jQuery Parallax Engine - Parallax.js
- Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D
- Interactive Parallax Effect with jQuery - jparallax
How to use it:
1. Create a set of layers for the background parallax effect. Use data-offset attribute to set the specific movement speed for each layer.
<div class="scene"> <div data-offset="90" class="clouds parallax"></div> <div data-offset="30" class="trees parallax"></div> <div data-offset="20" class="grass parallax"></div> <div data-offset="50" class="buildings parallax"></div> <div class="ground"></div> </div>
2. Add background images to the layers in your CSS.
.scene { position: absolute; bottom: 0; left: 0; overflow: hidden; right: 0; border-bottom: 100px solid #342a2a; height: 800px; } .scene > div { position: absolute; bottom: 0; } .ground { width: 100%; height: 30px; background: #1d1818; z-index: 999; } .scene > div.clouds { width: 895px; left: 50%; margin-left: -447px; height: 255px; bottom: 250px; background: url(http://i.imgur.com/WYfbo0O.png) no-repeat center; } .scene div.trees { width: 908px; height: 174px; background: url(http://i.imgur.com/4JOfJhg.png) no-repeat center; z-index: 100; left: 50%; bottom: 20px; margin-left: -454px; } .scene div.grass { width: 964px; height: 37px; z-index: 200; left: 50%; bottom: 20px; margin-left: -482px; background: url(http://i.imgur.com/h0aXbZr.png) no-repeat center; } .buildings { width: 763px; height: 303px; left: 50%; margin-left: -400px; background: url(http://i.imgur.com/5LmAigM.png) no-repeat center; }
3. Include the latest version of JQuery javascript library at the end of the document.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
4. A little Javascript to active the background parallax effect on mouse over and move.
$(window).on('mousemove', function(e) { var w = $(window).width(); var h = $(window).height(); var offsetX = 0.5 - e.pageX / w; var offsetY = 0.5 - e.pageY / h; $(".parallax").each(function(i, el) { var offset = parseInt($(el).data('offset')); var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)"; $(el).css({ '-webkit-transform': translate, 'transform': translate, 'moz-transform': translate }); }); });
This awesome jQuery plugin is developed by balajmarius. For more Advanced Usages, please check the demo page or visit the official website.