SCSS
html {
box-sizing: border-box;
}
body {
overflow: hidden;
height: 100vh;
background: radial-gradient(ellipse at center,
rgba(89,89,89,1) 0%,
rgba(89,89,89,1) 1%,
rgba(28,28,28,1) 91%,
rgba(19,19,19,1) 100%);
perspective: 1000px;
}
.block {
overflow: hidden;
width: 500px;
height: 400px;
margin: 0 auto;
margin-bottom: 45px;
border-radius: 2%;
background: radial-gradient(
circle at 50% 50%, #76daff 0%,
darken(#76daff, 25%) 80%);
box-shadow: 0 10px 20px rgba(0,0,0,.1),
0 6px 6px rgba(0,0,0,.2);
}
h1 {
font-family: 'Droid Sans';
font-weight: 300;
margin: 0 auto;
text-align: center;
color: #777;
}
.foreground {
position: relative;
top: 50%;
width: 40%;
margin: auto;
transform: translateY(-50%);
img {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
height: 200px;
padding: 0 10px;
border-radius: 50%;
background: #333;
box-shadow: 0 3px 6px rgba(0,0,0,.16),
0 3px 6px rgba(0,0,0,.23);
}
}
.highlight {
position: relative;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
transform: translateY(-90%) translateX(-50%);
background: radial-gradient(circle at 50% 50%,
rgba(white,.60) 5%,
rgba(white, 0) 70%);
background-repeat: no-repeat;
background-size: cover;
}
.wrap {
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT
$(document).ready(function() {
var body = $('body');
var block = $('.block');
var highlight = $('.highlight');
var logo = $('#logo');
var intensity = 20;
$('body').mousemove(function(event) {
cx = Math.ceil(body.width() / 2.0);
cy = Math.ceil(body.height() / 2.0);
dx = event.pageX - cx;
dy = event.pageY - cy;
tiltx = - (dy / cy);
tilty = (dx / cx);
radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
degree = (radius * intensity);
var shadow1 = -tilty*intensity + 'px '+ tiltx*intensity + 'px 25px rgba(0,0,0,.1)';
var shadow2 = -tilty*intensity/2 + 'px '+ tiltx*intensity/2 + 'px 25px rgba(0,0,0,.2)';
var logoShadow1 = -tilty*intensity + 'px '+ tiltx*intensity + 'px 25px rgba(0,0,0,.1)';
var logoShadow2 = -tilty*intensity/2 + 'px '+ tiltx*intensity/2 + 'px 25px rgba(0,0,0,.2)';
block.css('transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
block.css('box-shadow', shadow1 + ', ' + shadow2);
logo.css('box-shadow', logoShadow1 + ', ' + logoShadow2);
logo.css('transform', 'translateX(' + (tilty*intensity/1.2) + 'px) translateY(' + (-tiltx*intensity/1.2) + 'px)');
highlight.css('background-position', -tilty*8*intensity+'px ' + tiltx*5*intensity+'px')
});
});
