<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<nav id="main-nav">
<div id="box">
<div class="face front">
<div class="item-con logo">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/carls-logo-transparent.png" alt="Carls">
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">About<br>us<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Menu<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Wine<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Reserve<br>a table<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Private<br>dining<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Gallery<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Contact<br>us<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
</div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</nav>
<script>
// This code is also terrible
var BV, loadingCube;
$(document).ready(function () {
// Resize
$(window).on("resize", function () {
//resize();
resizeZube();
}).trigger("resize");
// Init video
//initVideo();
var BV = new $.BigVideo();
var vids = [
'http://robertbue.no/playground/carls-html/assets/video/carls_sd.mp4'
];
BV.init();
BV.show(vids,{ambient:true});
BV.getPlayer().play();
$(window).on('mousemove', function(event) {
var width = $(window).width();
var mouseX = event.pageX - (width * 0.5);
var height = $(window).height();
var mouseY = event.pageY - (height * 0.5);
var xAngle = (mouseY / height) * 10;
var yAngle = (mouseX / width) * 30;
var xAngle2 = (mouseY / height) * 20;
var yAngle2 = (mouseX / width) * 30;
TweenMax.to('#box', .3, {rotationX: xAngle, rotationY: yAngle});
});
$('.item').on("click", function(event){
TweenMax.to('#main-nav', 1, {scale: 0, ease:Back.easeOut, onComplete: function () {
TweenMax.to('#main-nav', 1, {scale: 0, ease:Back.easeOut, onComplete: function () {
TweenMax.to('#main-nav', 1, {scale: 1, ease:Back.easeOut, onComplete: function () {
}});
}});
}});
});
});
function resizeZube(event) {
var y = ($(window).height() - 240) * 0.5;
//$('#menu').css('margin-top', y+'px');
}
// Resize slideshow
function resize() {
// calculate width and height
var w = $(window).outerWidth(true);
var h = $(window).outerHeight(true);
}
</script>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: #fff;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 16px;
color: #ffffe2;
-webkit-font-smoothing: antialiased;
}
#nav {
-webkit-perspective: 1000px;
}
#menu {
height: 80px;
position: relative;
margin: 50px auto;
width: 900px;
background-color: rgb(0, 0, 0);
-webkit-transform-style: preserve-3d;
}
#menu-no-preserve {
height: 80px;
position: relative;
margin: 50px auto;
width: 900px;
}
#menu .face {
background-color: rgb(0, 0, 0);
height: 80px;
position: absolute;
width: 900px;
}
#menu .one {
background: rgb(0, 0, 0);
background: blue;
-webkit-transform: rotateX(90deg) translateZ(40px);
}
#menu .two {
background-color: rgb(235, 41, 158);
-webkit-transform: translateZ(40px);
background: #000000; /* Old browsers */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, #000000 0%,#141414 100%); /* W3C */
}
#menu .three {
background: rgb(252, 209, 22);
background: red;
-webkit-transform: rotateY(90deg) translateZ(880px);
width: 40px;
}
#menu .four {
background: rgb(44, 45, 213);
-webkit-transform: rotateY(180deg) translateZ(40px);
}
#menu .five {
background: rgb(125, 105, 181);
background: red;
-webkit-transform: rotateY(-90deg) translateZ(20px);
width: 40px;
}
#menu .six {
background: rgb(0, 0, 0);
-webkit-transform: rotateX(-90deg) translateZ(40px) rotate(180deg);
}
#main-nav {
width: 930px;
height: 80px;
position: relative;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -450px;
-webkit-perspective: 1200px;
}
#box {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
}
#box .face {
display: block;
position: absolute;
-webkit-backface-visibility: hidden;
}
#box .front,
#box .back {
width: 930px;
height: 80px;
}
#box .right,
#box .left {
width: 100px;
height: 80px;
}
#box .top,
#box .bottom {
width: 925px;
height: 80px;
line-height: 80px;
}
#box .front {
/*-webkit-transform: translateZ( 50px );*/
/*background: -webkit-linear-gradient(left, #000000 0%,#141414 100%); */
}
#box .back {
-webkit-transform: rotateX( -180deg ) translateZ( 50px );
background: #000;
}
#box .right {
-webkit-transform: rotateY( 90deg ) translateZ( 875px );
background: #000;
}
#box .left {
-webkit-transform: rotateY( -90deg ) translateZ( 50px );
background: #000;
}
#box .top {
-webkit-transform: rotateX( 90deg ) translateZ( 40px );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#383838), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #383838 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
}
#box .bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 40px );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#383838)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 0%,#383838 100%); /* Chrome10+,Safari5.1+ */
}
.item-con {
width: 110px;
height: 80px;
float: left;
background: #000;
}
.item-con.logo {
-webkit-transform: translateZ( 50px );
width: 154px;
background: transparent;
}
.item {
width: 110px;
height: 80px;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 250ms;
font-style: italic;
}
.item:hover {
-webkit-transform: translateZ(100px);
color: #d6a53c;
}
.item:hover .arrow-hover {
opacity: 1;
}
.item .i-face {
display: block;
position: absolute;
line-height: 1;
font-size: 19px;
padding: 17px 20px;
-webkit-backface-visibility: hidden;
}
.item .arrow-hover {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/arrow-hover.png');
width: 20px;
height: 24px;
position: absolute;
right: 11px;
top: 30px;
opacity: 0;
-webkit-transition: all 250ms;
}
.item .i-front,
.item .i-back {
width: 110px;
height: 80px;
}
.item .i-right,
.item .i-left {
width: 100px;
height: 80px;
}
.item .i-top,
.item .i-bottom {
width: 110px;
height: 100px;
}
.item .i-front {
-webkit-transform: translateZ( 50px );
background: -webkit-linear-gradient(left, #000000 0%,#131313 80%); /* Chrome10+,Safari5.1+ */
}
.item .i-back {
-webkit-transform: rotateX( -180deg ) translateZ( 50px );
background: #000;
}
.item .i-right {
-webkit-transform: rotateY( 90deg ) translateZ( 60px );
background: -webkit-linear-gradient(left, #000000 0%,#131313 80%); /* Chrome10+,Safari5.1+ */
}
.item .i-left {
-webkit-transform: rotateY( -90deg ) translateZ( 50px );
background: -webkit-linear-gradient(left, #000000 0%,#131313 80%); /* Chrome10+,Safari5.1+ */
}
.item .i-top {
-webkit-transform: rotateX( 90deg ) translateZ( 50px );
background: -webkit-linear-gradient(top, #131313 0%,#000000 80%); /* Chrome10+,Safari5.1+ */
}
.item .i-bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 30px );
background: -webkit-linear-gradient(top, #000000 0%,#131313 80%); /* Chrome10+,Safari5.1+ */
}
