Codepad for Apple TV

JADE
.wrap .block .foreground img#logo(src='https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0', alt='') .highlight h1.title Codepad for Apple TV
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') }); });
Expand for more options Login