<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/isuttell/pen/Wbbwyd?limit=all&page=100&q=contact+" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:100);
body {
margin: 0;
padding: 0;
background-color: #222;
font-family: Roboto, sans-serif;
font-weight: 100;
background-image: url("http://e-mc2.com/dev/stardust.png");
background-repeat: repeat;
background-position: center;
}
.container {
-moz-perspective: 100px;
-webkit-perspective: 100px;
perspective: 100px;
-moz-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -315px;
margin-left: -315px;
}
.container:after {
display: table;
content: '';
clear: both;
}
.blocks {
list-style: none;
width: 630px;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
letter-spacing: 0.5em;
text-transform: uppercase;
text-shadow: 0 0 5px black;
-moz-transform: translateZ(-100px);
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
.blocks a {
color: inherit;
text-decoration: none;
}
.blocks > li {
float: left;
}
.blocks:after {
display: table;
content: '';
clear: both;
}
.block {
cursor: pointer;
background-image: url("http://e-mc2.com/dev/erika-squares.jpg");
margin: 5px;
background-color: #111;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: 0.7;
background-position: 0;
border: 1px solid rgba(153, 153, 153, 0.5);
}
.block:hover {
opacity: 1;
}
.block:nth-child(1) {
background-position: -1px -1px;
}
.block:nth-child(2) {
background-position: 399px -1px;
}
.block:nth-child(3) {
background-position: 799px -1px;
}
.block:nth-child(4) {
background-position: -1px 399px;
}
.block:nth-child(5) {
background-position: 399px 399px;
}
.block:nth-child(6) {
background-position: 799px 399px;
}
.block:nth-child(7) {
background-position: -1px 799px;
}
.block:nth-child(8) {
background-position: 399px 799px;
}
.block:nth-child(9) {
background-position: 799px 799px;
}
.title {
font-weight: 100;
margin: 0;
padding: 0;
position: absolute;
left: 10px;
top: 10px;
color: #ccc;
}
.subtitle {
font-weight: 100;
margin: 0;
padding: 0;
position: absolute;
left: 10px;
top: 45px;
color: #ccc;
}
a {
color: inherit;
text-decoration: none;
}
</style></head><body>
<div>
<h1 class="title"><a href="https://isuttell.github.io/distort">Distort.js</a></h1>
<h2 class="subtitle">3D Grid Menu Demo</h2>
</div>
<div class="container">
<ul class="blocks">
<li class="block"><a href="#">Home</a></li>
<li class="block"><a href="#">Folio</a></li>
<li class="block"><a href="#">Who</a></li>
<li class="block"><a href="#">Social</a></li>
<li class="block"><a href="#">Experiment</a></li>
<li class="block"><a href="#">Careers</a></li>
<li class="block"><a href="#">Inspire</a></li>
<li class="block"><a href="#">Create</a></li>
<li class="block"><a href="#">Contact</a></li>
</ul>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://isuttell.github.io/distort/javascripts/distort.min.js'></script>
<script >/*
* Example for https://isuttell.github.io/distort
*/
/*
* Blocks Constructor
*
* Stores all the blocks
*/
function Blocks($blocks) {
this.$blocks = $blocks;
this._events();
}
/*
* Start the events
*/
Blocks.prototype._events = function() {
var _this = this;
this.$blocks.hover(function(){
$(this).addClass('active');
_this.update();
}, function() {
$(this).removeClass('active');
_this.update();
});
};
/*
* Calculate which row an index is in
*/
function row(index) {
return Math.floor(index / 3);
}
/*
* Calculate which column an index is in
*/
function column(index) {
return index % 3;
}
/*
* Each grid item is a block which positions
* itself within the grid and then applies the
* appropriate transformation
*/
function Block($el, index, activeIndex, factor) {
this.$el = $el;
this.index = index;
this.matrix = new Distort({ $el: $el });
this.row = row(index);
this.column = column(index);
if(activeIndex === -1) { return; }
var activeRow = row(activeIndex);
var activeColumn = column(activeIndex);
this.factor = factor || 20;
var direction;
if(this.isNear(activeRow, activeColumn) && index === activeIndex - 4) {
direction = 'topLeft';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex - 3) {
direction = 'top';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex - 2) {
direction = 'topRight';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex - 1) {
direction = 'left';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex) {
direction = 'center';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex + 1) {
direction = 'right';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex + 2) {
direction = 'bottomLeft';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex + 3) {
direction = 'bottom';
} else if (this.isNear(activeRow, activeColumn) && index === activeIndex + 4) {
direction = 'bottomRight';
}
if(direction && this[direction]) { this[direction](this.factor); }
}
/*
* Calculate if an element is within on space
*/
Block.prototype.isNear = function(row, column) {
if(Math.abs(this.row - row) > 1) { return false; }
if(Math.abs(this.column - column) > 1) { return false; }
return true;
}
/*
* Move the top left corner
*/
Block.prototype.topLeft = function(factor) {
factor = factor || this.factor;
this.matrix.bottomRight.x += -factor;
this.matrix.bottomRight.y += -factor;
}
/*
* Move the top
*/
Block.prototype.top = function(factor) {
factor = factor || this.factor;
this.matrix.bottomLeft.x += -factor;
this.matrix.bottomLeft.y += -factor;
this.matrix.bottomRight.x += factor;
this.matrix.bottomRight.y += -factor;
}
/*
* Move the top right corner
*/
Block.prototype.topRight = function(factor) {
factor = factor || this.factor;
this.matrix.bottomLeft.x += factor;
this.matrix.bottomLeft.y += -factor;
}
/*
* Move the left
*/
Block.prototype.left = function(factor) {
factor = factor || this.factor;
this.matrix.topRight.x += -factor;
this.matrix.topRight.y += -factor;
this.matrix.bottomRight.x += -factor;
this.matrix.bottomRight.y += +factor;
}
/*
* Scale the center
*/
Block.prototype.center = function(factor) {
factor = factor || this.factor;
this.matrix.topLeft.x += -factor;
this.matrix.topLeft.y += -factor;
this.matrix.topRight.x += factor;
this.matrix.topRight.y += -factor;
this.matrix.bottomLeft.x += -factor;
this.matrix.bottomLeft.y += factor;
this.matrix.bottomRight.x += factor;
this.matrix.bottomRight.y += factor;
}
/*
* Move the right
*/
Block.prototype.right = function(factor) {
factor = factor || this.factor;
this.matrix.topLeft.x += factor;
this.matrix.topLeft.y += -factor;
this.matrix.bottomLeft.x += factor;
this.matrix.bottomLeft.y += factor;
}
/*
* Move the bottom left corner
*/
Block.prototype.bottomLeft = function(factor) {
factor = factor || this.factor;
this.matrix.topRight.x += -factor;
this.matrix.topRight.y += factor;
}
/*
* Move the bottom edge
*/
Block.prototype.bottom = function(factor) {
factor = factor || this.factor;
this.matrix.topRight.x += factor;
this.matrix.topRight.y += factor;
this.matrix.topLeft.x += -factor;
this.matrix.topLeft.y += factor;
}
/*
* Move the bottom right corner
*/
Block.prototype.bottomRight = function(factor) {
factor = factor || this.factor;
this.matrix.topLeft.x += factor;
this.matrix.topLeft.y += factor;
}
/*
* Apply the transform to a block
*/
Blocks.prototype.update = function() {
window.requestAnimationFrame(animate.bind(this));
}
function animate() {
var index = -1;
var length = this.$blocks.length;
var activeIndex = this.$blocks.siblings('.active').index();
while(++index < length) {
var $el = this.$blocks.eq(index);
var block = new Block($el, index, activeIndex, 40);
$el.css({
'transform': block.matrix.toString()
});
}
}
/*
* Initialize
*/
new Blocks($('.block'));
/**
* Additional 3D shift on mouse move
*/
var $blocks = $('.blocks');
window.addEventListener('mousemove', function(event){
var width = $(window).width();
var height = $(window).height();
var x = ((event.pageX - (width / 2)) / width) * 2;
var y = ((event.pageY - (height / 2)) / height) * 2;
// Blocks
$blocks.css({
'transform' : 'translateZ(-10px) rotateY(' + (x * -2) + 'deg) rotateX(' + (y * 2) + 'deg)'
});
//Background
$('body').css({
'background-position' : (x * -5) + 'px ' + (y * -5) + 'px'
});
}, false);
//# sourceURL=pen.js
</script>
</body></html>
