<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<aside id="background">
<section id="content">
<article class="thumb" thumb="thumb">
<div class="movable" thumb-moveable="thumb-moveable">
<div class="layers">
<div class="layer one" thumb-layer-one="thumb-layer-one"></div>
<div class="layer two" thumb-layer-two="thumb-layer-two"></div>
<div class="layer three" thumb-layer-three="thumb-layer-three">
<h1> <span>true</span><br/><span>detective</span></h1>
<h2><span>stan van oers</span></h2>
</div>
</div>
</div>
</article>
</section>
</aside>
<script>
(function() {
var AppleTvOs;
AppleTvOs = (function() {
function AppleTvOs(thumbElement) {
var i, len, thumb, thumbs;
this.thumbElement = thumbElement;
console.log("Apple TV UI started!");
this.settings = {};
this.settings.boundsX = 10;
this.settings.boundsY = 60;
this.settings.intensityX = .5;
this.settings.intensityY = .1;
this.settings.animationSpeed = .6;
thumbs = document.querySelectorAll("[" + this.thumbElement + "]");
for (i = 0, len = thumbs.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
thumb = thumbs[i];
this.listener(thumb);
}
window.CP.exitedLoop(1);
}
AppleTvOs.prototype.listener = function(elem) {
var background;
background = elem.querySelector("[" + this.thumbElement + "-moveable]");
elem.addEventListener("mousemove", (function(_this) {
return function(event) {
return _this.calculateAnimation(event, elem, background);
};
})(this));
return elem.addEventListener("mouseleave", (function(_this) {
return function() {
_this.animateHorizontal(background, 0);
return _this.animateVertical(background, 0);
};
})(this));
};
AppleTvOs.prototype.calculateAnimation = function(event, elem, background) {
var degreesX, degreesY;
degreesX = event.offsetX - (elem.offsetWidth / 2);
degreesY = event.offsetY - (elem.offsetHeight / 2);
if (degreesX > (this.settings.boundsX * -1) && degreesX < this.settings.boundsX) {
this.animateHorizontal(background, degreesX * this.settings.intensityX);
}
if (degreesX < (this.settings.boundsX * -1)) {
this.animateHorizontal(background, this.settings.boundsX * this.settings.intensityX * -1);
}
if (degreesX > this.settings.boundsX) {
this.animateHorizontal(background, this.settings.boundsX * this.settings.intensityX);
}
if (degreesY > (this.settings.boundsY * -1) && degreesY < this.settings.boundsY) {
this.animateVertical(background, degreesY * this.settings.intensityY);
}
if (degreesY < (this.settings.boundsY * -1)) {
this.animateVertical(background, this.settings.boundsY * this.settings.intensityY * -1);
}
if (degreesY > this.settings.boundsY) {
return this.animateVertical(background, this.settings.boundsY * this.settings.intensityY);
}
};
AppleTvOs.prototype.animateHorizontal = function(elem, value) {
var layerOne, layerThree, layerTwo;
layerOne = elem.querySelector("[" + this.thumbElement + "-layer-one]");
layerTwo = elem.querySelector("[" + this.thumbElement + "-layer-two]");
layerThree = elem.querySelector("[" + this.thumbElement + "-layer-three]");
TweenMax.to(elem, this.settings.animationSpeed, {
rotationY: value
});
TweenMax.to(layerOne, this.settings.animationSpeed, {
x: value
});
TweenMax.to(layerTwo, this.settings.animationSpeed, {
x: value / 1.5
});
return TweenMax.to(layerThree, this.settings.animationSpeed, {
x: value / 2
});
};
AppleTvOs.prototype.animateVertical = function(elem, value) {
var layerOne, layerThree, layerTwo;
layerOne = elem.querySelector("[" + this.thumbElement + "-layer-one]");
layerTwo = elem.querySelector("[" + this.thumbElement + "-layer-two]");
layerThree = elem.querySelector("[" + this.thumbElement + "-layer-three]");
TweenMax.to(elem, this.settings.animationSpeed, {
rotationX: value
});
TweenMax.to(layerOne, this.settings.animationSpeed, {
y: value * 2
});
TweenMax.to(layerTwo, this.settings.animationSpeed, {
y: value
});
return TweenMax.to(layerThree, this.settings.animationSpeed, {
y: value / 1.5
});
};
return AppleTvOs;
})();
document.addEventListener('DOMContentLoaded', function() {
return new AppleTvOs("thumb");
});
}).call(this);
</script>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
/* Variables */
/* Structure */
* {
box-sizing: border-box;
}
#background {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(#f7f6ff, #cddee8);
background: linear-gradient(#f7f6ff, #cddee8);
z-index: 0;
}
#content {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.thumb {
width: 220px;
height: 300px;
float: left;
margin: 0 20px;
-webkit-perspective: 400px;
perspective: 400px;
}
.thumb .movable {
pointer-events: none;
width: 100%;
height: 100%;
background-color: white;
box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.6);
position: absolute;
z-index: 3;
top: 0;
-webkit-perspective: 200px;
perspective: 200px;
border-radius: 5px;
}
.thumb .layers {
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
overflow: hidden;
-webkit-perspective: 600px;
perspective: 600px;
border-radius: 5px;
}
.thumb .layer {
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
top: 0px;
}
.thumb .layer.one {
-webkit-transform: scale(1.2);
transform: scale(1.2);
margin-top: -20px;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223583/HfrtGfJ.jpg");
}
.thumb .layer.two {
background-position: center bottom;
-webkit-transform: scale(1.25);
transform: scale(1.25);
margin-left: 20px;
margin-top: -30px;
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223583/11h58p3.png");
}
.thumb .layer.three {
-webkit-transform: scale(1.6);
transform: scale(1.6);
padding-top: 80px;
text-align: center;
color: white;
font-family: "Oswald", serif;
}
.thumb .layer.three h1 {
font-size: 14px;
line-height: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.thumb .layer.three h2 {
font-size: 6px;
line-height: 18px;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}
