Submit your widget

CSS3 & jQuery Awesome Apple TV Poster Parallax Effect

Created 3 years ago   Views 13079   downloads 2128    Author designmodo
 CSS3 & jQuery Awesome Apple TV Poster Parallax Effect
View DemoDownload 3.1 MB
27
Share |

The new Apple TV parallax effect? It is awesome! We have decided to reproduce this effect using CSS and jQuery, and it looks very close to Apple’s parallax effect.

HTML

Our structure will look something like the following image.

First of all, we need a container div, which we’ll call .poster. Inside our container, we will have five divs (layers) called the following:

<div class="poster">
  <div class="shine"></div>
  <div class="layer-1"></div>
  <div class="layer-2"></div>
  <div class="layer-3"></div>
  <div class="layer-4"></div>
  <div class="layer-5"></div>
</div>

Finally, above all layers, we need a div (.shine), which we will use to add some shine to our poster.

CSS

First of all, let’s make sure that the body has full height by adding the following lines:

	
body, html { height: 100%; min-height: 100%; }

Let’s style the body a little bit by adding some color:

body { background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%); }

In order to 3D rotate .poster, the parent needs to have a set perspective and transform-style. As we can see, the parent of our div is the body itself, so let’s add the following CSS code:

body {
background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
transform-style: preserve-3d;
transform: perspective(800px);
}

Read more:http://designmodo.com/apple-tv-effect/