Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus
File Size: | 629 KB |
---|---|
Views Total: | 4032 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

maximusParallaximus is a lightweight jQuery script for creating a cool multi-layer parallax effect that responds to mouse move, inspired by Apple TV's 3D poster animation.
How to use it:
1. Load jQuery library and the jQuery maximusParallaximus' script in the html page. Be sure the JavaScript file parallax.js
is loaded after jQuery.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="parallax.js"></script>
2. Add several parallax layers to the web page as follow. The data-offset
attribute is used to specify the animation speed for each parallax layer.
<div data-offset=0.5 class="image"> <div data-offset=-15 class="layer-1"></div> <div data-offset=-9 class="layer-2"></div> <div class="layer-3"></div> <div data-offset=2 class="layer-4"></div> <div data-offset=4 class="layer-5"></div> <div data-offset=8 class="layer-6"></div> <div data-offset=10 class="layer-7"></div> </div>
3. The core CSS / CSS3 rules for the parallax effect.
body { transform-style: preserve-3d; transform: perspective(800px); } .image { width: 1000px; height: 600px; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -400px; border-radius: 5px; box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4); overflow: hidden; } div[class*="layer-"] { position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; transition: 0.1s; }
4. Add background images to the DIV layers.
.image .layer-1 { background-image: url(1.png); } .image .layer-2 { background-image: url(2.png); } .image .layer-3 { background-image: url(3.png); } .image .layer-4 { background-image: url(4.png); } .image .layer-5 { background-image: url(5.png); } .image .layer-6 { background-image: url(6.png); } .image .layer-7 { background-image: url(7.png); }
This awesome jQuery plugin is developed by benmwilliams. For more Advanced Usages, please check the demo page or visit the official website.