Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus

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.