tvOS Inspired Interactive Parallax Effect with jQuery and CSS3 - Media Poster

Just another jQuery & CSS3 implementation of the interactive, mousemove-aware poster image parallax animation as you seen on Apple TV. Powered by jQuery .mousemove() event handler and CSS3 transitions & transforms. Coded by Balaj Marius for Designmodo.

See also:

• Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus

How to use it:

1. Add a group of parallax elements to the poster. The data-offset attribute is used to specify the initial position of these elements.

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

2. The core CSS styles for the poster.

.poster {
  width: 320px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0 0 -160px;
  border-radius: 5px;
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.poster .shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 100;
}

.poster 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;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

3. Add your background images to the poster.

.poster .layer-1 { background-image: url("3.png"); }

.poster .layer-2 { background-image: url("1.png"); }

.poster .layer-3 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("2.png");
}

.poster .layer-4 { background-image: url("4.png"); }

.poster .layer-5 { background-image: url("5.png"); }

4. Put the latest version of jQuery JavaScript library at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

5. The jQuery script to active the poster image parallax effect on mouse move.

var $poster = $('.poster'),
    $shine = $('.shine'),
    $layer = $('div[class*="layer-"]'),
    w = $(window).width(), //window width
    h = $(window).height(); //window height

$(window).on('mousemove', function(e) {
  var offsetX = 0.5 - e.pageX / w, //cursor position X
      offsetY = 0.5 - e.pageY / h, //cursor position Y
      dy = e.pageY - h / 2, //@h/2 = center of poster
      dx = e.pageX - w / 2, //@w/2 = center of poster
      theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD
      angle = theta * 180 / Math.PI - 90, //convert rad in degrees
      offsetPoster = $poster.data('offset'),
      transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; //poster transform

  //get angle between 0-360
  if (angle < 0) {
    angle = angle + 360;
  }

  //gradient angle and opacity
  $shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + e.pageY / h + ') 0%,rgba(255,255,255,0) 80%)');

  //poster transform
  $poster.css('transform', transformPoster);

  //parallax foreach layer
  $layer.each(function() {
    var $this = $(this),
        offsetLayer = $this.data('offset') || 0,
        transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';

    $this.css('transform', transformLayer);
  });

});

---

This awesome jQuery plugin is developed by VinderOrnitier. For more Advanced Usages, please check the demo page or visit the official website.