Apple TV parallax tiles

Apple TV parallax tiles.markdown

Apple TV parallax tiles

An example of Apple's TV 4 tiles with the parallax effect and beautiful box shadow.

A Pen by C-Rodg on CodePen.

License.

index.html

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

script.js

var $tile = $('.tile'),
	$glare = $('.glare'),
	$layer = $('div[class*="layer-"]');

$(window).on('mousemove', function(ev){
var w = $(window).width(),
    h = $(window).height(),
    offsetX = 0.5 - ev.pageX / w,
		offsetY = 0.5 - ev.pageY / h,
		offsetTile = $tile.data('offset'),
		transformTile = 'translateY(' + -offsetX * offsetTile + 'px) rotateX(' + (-offsetY * offsetTile) + 'deg) rotateY(' + (offsetX * (offsetTile * 2 )) + 'deg)',
    dy = ev.pageY - h / 2,
    dx = ev.pageX - w / 2,
    theta = Math.atan2(dy, dx),
    angle = theta * 180 / Math.PI;
  
  if(angle < 0) {
    angle = angle + 360;
  }
  $glare.css('background','linear-gradient(' + (angle - 90) + 'deg, rgba(255,255,255,' + ev.pageY / h + ') 0%,rgba(255,255,255,0) 80%)');
  	$tile.css('-webkit-transform', transformTile);
	$tile.css('transform', transformTile);

	$layer.each(function(){
		var $this = $(this),
			offsetLayer = $this.data('offset') || 0,
			transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
		$this.css('-webkit-transform', transformLayer);
		$this.css('transform', transformLayer);

	});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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

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

	.tile {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 320px;
		height: 500px;
		margin: -250px 0 0 -160px;
		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.09s;
	}

	.layer-1 {
		background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/1.png');
	}
	.layer-2 {
		background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/2.png');
	}
	.layer-3 {		
		background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/3.png');
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.layer-4 {
		background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/4.png');
	}
	.layer-5 {
		background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/5.png');
	}

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