<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 ---------->
<div class="demo">
<div class="tiltWrapper custom" data-maxangle="5" data-tiltdepth="70">
<a href="#" class="tiltAction">Accessible Link Text</a>
<div class="tiltPanel">
<div class="plane level3">
<div class="foregroundImageSample"></div>
</div>
<div class="plane level2">
<div class="middleImageSample"></div>
</div>
<div class="plane level1">
<div class="reflection">
<svg width="130px" height="130px" viewBox="0 0 130 130" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>glare</title>
<desc>Created with Sketch.</desc>
<defs>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-1">
<stop stop-color="#FFFFFF" stop-opacity="0.458786232" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-HD" sketch:type="MSArtboardGroup" transform="translate(-426.000000, -322.000000)" fill="url(#radialGradient-1)">
<circle id="glare" sketch:type="MSShapeGroup" cx="491" cy="387" r="65"></circle>
</g>
</g>
</svg>
</div>
<div class="backgroundImageSample"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Handler for .ready() called.
/****** Apple TV Tilt Action *******/
var lastScrollTop = 0;
var lastScrollLeft = 0;
var scrollTimeout;
$(window).scroll(function() {
var st = $(this).scrollTop();
var sl = $(this).scrollLeft();
if (sl > lastScrollLeft) {
$(".tiltWrapper").each(function() {
var rotateelem = $(this).find(".tiltPanel");
var maxdeg = $(this).attr("data-maxangle");
if (!maxdeg) {
//default to 10deg throw when no max angle is defined in attribute.
var maxdeg = 10;
}
var tiltdepth = $(this).closest(".tiltWrapper").attr("data-tiltdepth");
if (!tiltdepth) {
//default to 10deg throw when no max angle is defined in attribute.
var tiltdepth = 70;
}
var rotation = "transform: rotateY(-" + maxdeg + "deg); transform-origin: center center 80px; transition: 0.7s transform; -webkit-transform: rotateY(-" + maxdeg + "deg); -webkit-transform-origin: center center 80px; -webkit-transition: 0.7s transform;";
$(rotateelem).attr("style", rotation);
});
} else {
$(".tiltWrapper").each(function() {
var rotateelem = $(this).find(".tiltPanel");
var maxdeg = $(this).attr("data-maxangle");
if (!maxdeg) {
//default to 10deg throw when no max angle is defined in attribute.
var maxdeg = 10;
}
var rotation = "transform: rotateY(" + maxdeg + "deg); transform-origin: center center 80px; transition: 0.7s transform; -webkit-transform: rotateY(" + maxdeg + "deg); -webkit-transition: 0.7s transform;";
$(rotateelem).attr("style", rotation);
});
}
if (st > lastScrollTop) {
// downscroll code
$(".tiltWrapper").each(function() {
var rotateelem = $(this).find(".tiltPanel");
var maxdeg = $(this).attr("data-maxangle");
if (!maxdeg) {
//default to 10deg throw when no max angle is defined in attribute.
var maxdeg = 10;
}
//console.log("scrolling down");
var rotation = "transform: rotateX(" + maxdeg + "deg); transition: 0.7s transform; -webkit-transform: rotateX(" + maxdeg + "deg); -webkit-transition: 0.7s transform;";
$(rotateelem).attr("style", rotation);
});
} else if (st < lastScrollTop) {
// upscroll code
clearTimeout(scrollTimeout);
$(".tiltWrapper").each(function() {
var rotateelem = $(this).find(".tiltPanel");
var maxdeg = $(this).attr("data-maxangle");
if (!maxdeg) {
//default to 10deg throw when no max angle is defined in attribute.
var maxdeg = 10;
}
var rotation = "transform: rotateX(-" + maxdeg + "deg); transition: 0.7s transform; -webkit-transform: rotateX(-" + maxdeg + "deg); -webkit-transition: 0.7s transform;";
$(rotateelem).attr("style", rotation);
});
}
lastScrollTop = st;
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$(".tiltWrapper").each(function() {
var rotateelem = $(this).find(".tiltPanel");
var rotation = "transform: rotateX(0deg) rotateY(0deg); transition: 0.8s transform; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: 0.8s transform;";
$(rotateelem).attr("style", rotation);
});
}, 100));
});
$("a.tiltAction").mousedown(function(event) {
var elem = $(this).closest(".tiltWrapper");
$(elem).addClass("pressed");
});
$("a.tiltAction").mouseup(function(event) {
var elem = $(this).closest(".tiltWrapper");
$(elem).removeClass("pressed");
});
$("a.tiltAction").mouseout(function(event) {
var reflectionelem = $(this).next().find(".reflection");
$(reflectionelem).css("opacity", "0");
});
$("a.tiltAction").mousemove(function(event) {
var wrapperelem = $(this).closest(".tiltWrapper");
$(wrapperelem).css("z-index","10");
var rotateelem = $(this).next(".tiltPanel");
var reflectionelem = $(this).next().find(".reflection");
var tiltdepth = $(this).closest(".tiltWrapper").attr("data-tiltdepth");
if (!tiltdepth) {
//default to 10deg throw when no max angle is defined in attribute.
var tiltdepth = 70;
}
var maxdeg = $(this).closest(".tiltWrapper").attr("data-maxangle");
if (!maxdeg) {
//default to 10deg throw when no max angle is defined in attribute.
var maxdeg = 10;
}
var elemoffset = $(this).offset();
var elemwidth = $(this).width();
var elemheight = $(this).height();
var cursorX = event.pageX - elemoffset.left;
var cursorY = event.pageY - elemoffset.top;
if (cursorX < (elemwidth / 2)) {
var perX = (cursorX / (elemwidth / 2)) - 1;
var opacityX = 1 - (cursorX / (elemwidth / 2));
var degX = Math.floor(maxdeg * perX);
var refX = elemwidth - cursorX;
} else {
var perX = 1 - (cursorX / (elemwidth / 2));
var opacityX = (cursorX / (elemwidth / 2)) - 1;
var degX = Math.floor(-(maxdeg * perX));
var refX = elemwidth - cursorX;
}
if (cursorY < (elemheight / 2)) {
var perY = 1 - (cursorY / (elemheight / 2));
var degY = Math.floor(maxdeg * perY);
var refY = elemheight - cursorY;
} else {
var perY = (cursorY / (elemheight / 2)) - 1;
var degY = Math.floor(-(maxdeg * perY));
var refY = elemheight - cursorY;
}
var rotation = "transform: rotateX(" + degY + "deg) rotateY(" + degX + "deg); transform-origin: center center "+tiltdepth+"px; -webkit-transform: rotateX(" + degY + "deg) rotateY(" + degX + "deg); -webkit-transform-origin: center center "+tiltdepth+"px;";
$(rotateelem).attr("style", rotation);
var reflection = "transform: translate(" + refX + "px, " + refY + "px); -webkit-transform: translate(" + refX + "px, " + refY + "px); opacity: " + opacityX + ";";
$(reflectionelem).attr("style", reflection);
});
$("a.tiltAction").mouseout(function() {
var rotateelem = $(this).next(".tiltPanel");
var wrapperelem = $(this).closest(".tiltWrapper");
var tiltdepth = $(this).closest(".tiltWrapper").attr("data-tiltdepth");
if (!tiltdepth) {
//default to 10deg throw when no max angle is defined in attribute.
var tiltdepth = 70;
}
$(wrapperelem).css("z-index","");
if(browser == "Firefox") {
var rotation = "transform: rotateX(0deg) rotateY(0deg); transform-origin: center center "+tiltdepth+"px; transition: 1.0s transform; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: 1.0s transform; -webkit-transform-origin: center center "+tiltdepth+"px;";
} else {
var rotation = "transform: rotateX(0deg) rotateY(0deg); transform-origin: center center "+tiltdepth+"px; transition: 1.0s transform; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: 1.0s transform; -webkit-transform-origin: center center "+tiltdepth+"px;";
}
$(rotateelem).attr("style", rotation);
});
/*** Browser Detection for handling rendering quirks ****/
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
var browser = BrowserDetect.browser;
$("body").addClass(browser);
});
</script>
/* Custom styles that can be altered to suit your implementation */
body {
background: #f0f0f0;
}
.demo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
.tiltWrapper.custom {
width: 400px;
height: 625px;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);*/
}
.tiltWrapper .backgroundImageSample {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index:1;
background: url("https://alnemec.com/temp/interstellar_bg.png");
background-size: cover;
background-position: center center;
border-radius: 4px;
}
.tiltWrapper .middleImageSample {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index:1;
background: url("https://alnemec.com/temp/interstellar_middle.png");
background-size: cover;
background-position: center center;
}
.tiltWrapper .foregroundImageSample {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index:1;
background: url("https://alnemec.com/temp/interstellar_front.png");
background-size: cover;
background-position: center center;
}
.custom .level1 video {
width: auto;
height: 100%;
}
.custom .level2 {
}
/*.custom .level3 {
text-align: center;
top: 42%;
text-shadow: 0px 8px 8px rgba(0,0,0,0.3);
color: #fff;
font-family: "Raleway", sans-serif;
}*/
.custom .level3 h1 {
font-weight: 700;
}
/* end of custom styles */
.tiltWrapper {
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
width: 100%;
height: 100px;
position: relative;
transition: 0.1s transform;
z-index:1;
}
.tiltWrapper.pressed {
transform: scale(0.98);
}
.tiltAction {
display: block;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index:5;
text-indent: -100000px;
}
.tiltAction:active, .tiltAction:focus {
outline: none;
}
.tiltPanel {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index:1;
border-radius: 3px;
box-shadow: 0px 18px 65px rgba(0,0,0,0.3);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.1s transform, 0.2s box-shadow;
-webkit-transition: 0.1s transform, 0.2s box-shadow;
}
.Safari .tiltPanel {
transform-origin: 50% 50% 0px !important;
-webkit-transform-origin: 50% 50% 0px !important;
}
.tiltWrapper.pressed .tiltPanel {
box-shadow: 0px 10px 38px rgba(0,0,0,0.3);
}
.reflection {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
bottom: 0px;
margin-top: -25%;
margin-left: -25%;
z-index:4;
opacity: 0;
transition: 0.1s transform, 0.4s opacity;
}
.reflection svg {
width: 100%;
height: 100%;
}
.plane {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
border-radius: 6px;
z-index:1;
}
.level1 {
transform: translateZ(0px);
overflow: hidden;
z-index:1;
}
.level2 {
transform: translateZ(50px);
z-index:2;
width: 90%;
height: 90%;
margin: auto;
}
.level3 {
transform: translateZ(100px);
z-index:3;
width: 80%;
height: 80%;
margin: auto;
}
