Apple TV 3D Parallax Effect On Hover

A small script that uses jQuery mouse events and CSS animations to create a 3D, interactive, hover-triggered parallax effect on images as you've seen on AppleTV.

See It In Action:

See the Pen AppleTV 3D Parallax Cards by Heiko (@heiko_de) on CodePen.

How to use it:

1. Insert your image into a container element.

<div class="card">
  <img src="1.jpg" />
</div>

2. The necessary CSS & CSS3 styles for the parallax effect, box shadow, and shine layer.

.card {
  width: 320px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  margin: 15px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.15);
  transform: scale3d(1, 1, 1);
  transition: all 0.2s ease-out, filter 0.75s ease-out;
  background: rgba(0,0,0,0.2);
  filter: grayscale(0.1) saturate(95%) brightness(95%) contrast(90%);
}

.card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 15px rgba(0,0,0,0.3);
  filter: grayscale(0) saturate(105%) brightness(100%) contrast(100%);
}

.card > img {
  position: absolute;
  width: 108%;
  height: 108%;
  top: -4%;
  left: -4%;
  z-index: -10;
  transform: scale(1.05);
  transition: all 0.2s ease-out, transform 0.2s ease-out, filter 0.75s ease-out;
  filter: blur(0px);
}

.card.blur > img {
  filter: blur(1px) grayscale(0.1) saturate(95%);
}

.card > .shineLayer {
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%);
  transition: all 0.2s ease-out;
}

3. Load the jQuery library right before the closing body tag.

<script src="/path/to/cdn/jquery.min.js"></script>

4. The JavaScript (jQuery script) to enable the parallax effect.

$(".card").mousemove( function(event) {
  
  var card = this;
  var mouseCoord = {
    x: event.offsetX,
    y: event.offsetY
  };
  
  //cleanup
  mouseCoord.x = mouseCoord.x < 0 ? 0 : mouseCoord.x;
  mouseCoord.x = mouseCoord.x > $(card).width() ? $(card).width() : mouseCoord.x;
  mouseCoord.y = mouseCoord.y < 0 ? 0 : mouseCoord.y;
  mouseCoord.y = mouseCoord.y > $(card).height() ? $(card).height() : mouseCoord.y;

  
  var transformCard = "scale3d(1.08, 1.08, 1.08) perspective(700px)";
  transformCard += " ";
  //rotateX between -9 and +9
  transformCard += "rotateX(" + ( ( ( (mouseCoord.y / $(card).height()) * 18 ) - 9 )) + "deg)";
  transformCard += " ";
  //rotateY between -13 and +13
  transformCard += "rotateY(" + ( ( ( (mouseCoord.x / $(card).width()) * 26 ) - 13 ) * -1 ) + "deg)";
  
  transformCard += " ";
  //translateX between -3 and +3
  transformCard += "translateX(" + ( ( (mouseCoord.x / $(card).width()) * 6 ) - 3 ) + "px)";
  transformCard += " ";
  //translateY between -5 and +5
  transformCard += "translateY(" + ( ( (mouseCoord.y / $(card).height()) * 10 ) - 5 ) + "px)";
  
  $(card).css("transform", transformCard);
  
  //rotateX between -5 and +5
  var transformCardImage = "rotateX(" + ( ( ( (mouseCoord.y / $(card).height()) * 10 ) - 5 ) * -1 ) + "deg)";
  transformCardImage += " ";
  //rotateX between -13 and +13
  transformCardImage += "rotateY(" + ( ( ( (mouseCoord.x / $(card).width()) * 26 ) - 13 ) * -1 ) + "deg)";
  $(card).find("img").css("transform", transformCardImage);
  
  //opacity of ShineLayer between 0.1 and 0.4
  var backgroundShineLayerOpacity = ((mouseCoord.y / $(card).height()) * 0.3) + 0.1;
  //bottom=0deg; left=90deg; top=180deg; right=270deg;
  var backgroundShineLayerDegree = (Math.atan2(mouseCoord.y - ($(card).height()/2), mouseCoord.x - ($(card).width()/2)) * 180/Math.PI) - 90;
  backgroundShineLayerDegree = backgroundShineLayerDegree < 0 ? backgroundShineLayerDegree += 360 : backgroundShineLayerDegree
  var backgroundShineLayer = "linear-gradient(" + backgroundShineLayerDegree + "deg, rgba(255,255,255," + backgroundShineLayerOpacity + ") 0%, rgba(255,255,255,0) 80%)";
  $(card).find(".shineLayer").css("background", backgroundShineLayer);
});

$(".card").mouseenter( function(event) {
  $(".card").addClass("blur");
  $(this).removeClass("blur");
});

$(".card").mouseleave( function(event) {
  var card = this;
  $(card).css("transform", "scale3d(1, 1, 1)");
  $(card).find("img").css("transform", "");
  $(card).find(".shineLayer").css("background", "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%)");

  $(".card").removeClass("blur");
});

---

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