A Pen by Jamie Coulter on CodePen.
Created
January 7, 2018 23:17
Star
You must be signed in to star a gist
Transparent video 3D Modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modal{'data-deep-ui' => 'true'} | |
.modal_inner{'data-depth' => '0'} | |
.modal_inner__back{'data-depth' => '-80'} | |
%img.a{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rusty.png', 'data-depth' => '-40'} | |
.cog_one{'data-depth' => '-10'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog1.png'} | |
.cog_two{'data-depth' => '50'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog2.png'} | |
.cog_three{'data-depth' => '32'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog3.png'} | |
.cog_four{'data-depth' => '75'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog4.png'} | |
.cog_five{'data-depth' => '83'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cogHand.png'} | |
.cog_six{'data-depth' => '88'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cogHand.png'} | |
.cog_seven{'data-depth' => '32'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog3.png'} | |
.cog_eight{'data-depth' => '42'} | |
%img{:Src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog2.png'} | |
.text{'data-depth' => '170'} | |
%h1 The Ink blot modal | |
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/trill.png'} | |
%p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius, quam eget tempus sagittis, ex felis consequat ante, vitae venenatis enim felis ac velit. | |
%a confirm | |
.modal_inner__shadow{'data-depth' => '10'} | |
.modal_inner__front{'data-depth' => '50'} | |
%video#myVideo | |
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ink3.webm" type="video/webm"> | |
.button Open the modal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ## DeepUI | 3D User interface builder | |
// ## Author: Jamie Coulter | |
// ## Depths can be defined on the html element as data-depth. | |
// ## Depth is calculated from the parent element with depth-ui set as true. | |
function deepUI() { | |
/* ============================================================================= | |
Global Options | |
================================================================================ */ | |
const globalPerspective = 600; // Global perspective set to parent effect | |
const sensitivity = 80; // Sets how much tilt we get, less is more in this case | |
/* ============================================================================= | |
Chroma Options | |
================================================================================ */ | |
const chromaActive = true; // Turn on/off chromatic aberation | |
const chromaFuzz = 1; // Amount of blur seen in the chromatic effect | |
const chromaRed = 'rgba(255, 0, 0, 0.9)'; // Chromatic red rgba value | |
const chromaYellow = 'rgba(255, 255, 0, 0.9)'; // Chromatic yellow rgba value | |
const chromaBlue = 'rgba(0, 0, 255, 0.9)'; // Chromatic blue rgba value | |
const chromaTeal = 'rgba(0, 255, 255, 0.9)'; // Chromatic teal rgba value | |
const chromaMinOffset = 9; // Chromatic yellow / teal spread | |
const chromaMaxOffset = 20; // Chromatic red / blue spread | |
/* ============================================================================= | |
Elements | |
================================================================================ */ | |
const deepParent = $('*[data-deep-ui="true"]'); // Parent with deep active | |
const deepElement = $('[data-depth]'); // Elements with depth | |
const chromaElement = $('[data-chroma]'); // Elements with depth | |
/* ============================================================================= | |
Set the perspective of every deep parent | |
================================================================================ */ | |
deepParent.each(function() { | |
$(this).css({ // Set perspective of parent | |
'perspective': `${globalPerspective}px`, | |
'transform-style': 'preserve-3d' | |
}); | |
setDepth(); // Set depths | |
}); | |
/* ============================================================================= | |
Set the depths of all parent elements | |
================================================================================ */ | |
function setDepth() { | |
// Set element depth | |
deepElement.each(function() { | |
$(this).css({ | |
'transform': `translatez(${$(this).data('depth')}px) translateY(-50%)`, | |
'transform-style': 'preserve-3d' // Set CSS to all elements | |
}); | |
}); | |
} | |
/* ============================================================================= | |
Tilt the parent element depending on mouse position | |
================================================================================ */ | |
$(document).on('mousemove', e => { | |
const x = -($(window).innerWidth() / 2 - e.pageX) / sensitivity; // Get current mouse x | |
const y = ($(window).innerHeight() / 2 - e.pageY) / sensitivity; // Get current mouse y | |
deepParent.css('transform', `rotateY(${x}deg) rotateX(${y}deg)`); // Set parent element rotation | |
if(chromaActive) { | |
deepChroma(x, y); // Set chromatic effects | |
} | |
}); | |
/* ============================================================================= | |
Set chromatic effect | |
================================================================================ */ | |
function deepChroma(x, y) { | |
const chroma = | |
`${x / chromaMaxOffset}px ${y / chromaMaxOffset}px ${chromaFuzz}px ${chromaYellow}, | |
${x / chromaMinOffset}px ${y / chromaMinOffset}px ${chromaFuzz}px ${chromaRed}, | |
${-x / chromaMaxOffset}px ${-y / chromaMaxOffset}px ${chromaFuzz}px ${chromaTeal}, | |
${-x / chromaMinOffset}px ${-y / chromaMinOffset}px ${chromaFuzz}px ${chromaBlue}`; | |
const chromaImage = | |
`drop-shadow(${x / chromaMaxOffset}px ${y / chromaMaxOffset}px ${chromaFuzz}px ${chromaYellow}) | |
drop-shadow(${x / chromaMinOffset}px ${y / chromaMinOffset}px ${chromaFuzz}px ${chromaRed}) | |
drop-shadow(${-x / chromaMaxOffset}px ${-y / chromaMaxOffset}px ${chromaFuzz}px ${chromaTeal}) | |
drop-shadow(${-x / chromaMinOffset}px ${-y / chromaMinOffset}px ${chromaFuzz}px ${chromaBlue})`; | |
chromaElement.each(function() { | |
let element = $(this); | |
if(element.data('chroma-text')) { // If element is text apply chroma effect as text shadow | |
element.css('text-shadow', chroma); | |
} else if(element.data('chroma-iamge')) { // If element normal apply chroma effect as box shadow | |
element.css('box-shadow', chroma); | |
} else { | |
console.log(chromaImage) | |
element.css('-webkit-filter', chromaImage); | |
} | |
}); | |
} | |
} | |
// Init | |
deepUI(); | |
var vid = document.getElementById("myVideo"); | |
function playVid() { | |
vid.play(); | |
} | |
$('.button').click(function(){ | |
$('.modal').show(); | |
$(this).fadeOut(500); | |
setTimeout(function(){ | |
playVid(); | |
},800); | |
setTimeout(function(){ | |
$('h1,.text img,a').css('opacity','1'); | |
$('p').css('opacity','.6'); | |
},1700); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: 'Princess'; | |
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/PrincesSANDTHEFROG.woff') format('woff'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
$modalSize: 940px; | |
%position { | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 50%; | |
margin: auto; | |
transform: translateY(-50%); | |
} | |
body { | |
overflow: hidden; | |
} | |
.modal { | |
display: none; | |
height: 100vh; | |
font-family: 'Princess'; | |
&_inner { | |
@extend %position; | |
height: 100vh; | |
&__front { | |
@extend %position; | |
width: $modalSize; | |
video { | |
box-shadow: 0 0 0 150px white; | |
@extend %position; | |
width: 870px; | |
} | |
} | |
&__shadow { | |
@extend %position; | |
width: 540px; | |
height: 420px; | |
top: calc(50% - 42px); | |
background: radial-gradient(ellipse at center, rgba(23, 8, 0, 0.54) 30%, #000000 100%); | |
} | |
&__back { | |
@extend %position; | |
width: $modalSize; | |
& .cog_one { | |
width: 160px; | |
height: 160px; | |
filter:blur(1px); | |
left: 172px; | |
top: -130px; | |
position: absolute; | |
img { | |
width: 100%; | |
-webkit-animation: spin 26s linear infinite; | |
animation: spin 36s linear infinite; | |
} | |
} | |
& .cog_two { | |
width: 140px; | |
height: 140px; | |
left: 300px; | |
filter:blur(0px); | |
top: -150px; | |
position: absolute; | |
img { | |
width: 100%; | |
-webkit-animation: spin 8s linear infinite; | |
animation: spin 18s linear infinite; | |
} | |
} | |
& .cog_three { | |
width: 120px; | |
height: 120px; | |
left: 423px; | |
top: -213px; | |
filter:blur(0); | |
position: absolute; | |
position: absolute; | |
img { | |
width: 100%; | |
-webkit-animation: spin 8s linear infinite; | |
animation: spinBack 18s linear infinite; | |
} | |
} | |
& .cog_four { | |
width: 120px; | |
height: 120px; | |
left: 380px; | |
top: -45px; | |
position: absolute; | |
img { | |
width: 100%; | |
-webkit-animation: spin 38s linear infinite; | |
animation: spinBack 38s linear infinite; | |
} | |
} | |
& .cog_five { | |
width: 27px; | |
height: 120px; | |
left: 423px; | |
transform-origin: 50px 0px; | |
top: -153px; | |
position: absolute; | |
img { | |
width: 100%; | |
transform-origin: 50% 100%; | |
-webkit-animation: spin 20s linear infinite; | |
animation: spinBack 20s linear infinite; | |
} | |
} | |
& .cog_six { | |
width: 27px; | |
height: 120px; | |
left: 423px; | |
transform-origin: 50px 0px; | |
top: -153px; | |
position: absolute; | |
img { | |
transform-origin: 50% 100%; | |
width: 100%; | |
-webkit-animation: spin 3s linear infinite; | |
animation: spinBack 3s linear infinite; | |
} | |
} | |
& .cog_seven { | |
width: 190px; | |
height: 200px; | |
left: 463px; | |
-webkit-transform-origin: 50px 0px; | |
transform-origin: 50px 0px; | |
top: 97px; | |
position: absolute; | |
filter: blur(2px); | |
img { | |
width: 100%; | |
-webkit-animation: spin 53s linear infinite; | |
animation: spinBack 53s linear infinite; | |
} | |
} | |
& .cog_eight { | |
width: 70px; | |
height: 70px; | |
left: 452px; | |
top: 17px; | |
filter: blur(1px); | |
position: absolute; | |
img { | |
width: 100%; | |
-webkit-animation: spin 33s linear infinite; | |
animation: spinBack 33s linear infinite; | |
} | |
} | |
img.a { | |
@extend %position; | |
width: 830px; | |
top: calc(50% - 50px); | |
} | |
& .text { | |
@extend %position; | |
color: white; | |
text-align: center; | |
width: 240px; | |
left: -58px; | |
top: calc(50% - 32px); | |
h1 { | |
font-weight: 400; | |
font-size: 13px; | |
transform: translateZ(20px); | |
opacity: 0; | |
transition: all 0.8s 0.2s; | |
} | |
p { | |
opacity: 0.9; | |
font-weight: 300; | |
opacity: 0; | |
font-size: 8px; | |
line-height: 15px; | |
transition: all 0.8s 0.3s; | |
} | |
img { | |
opacity: 0; | |
transform: translateZ(-20px); | |
transition: all 0.8s 0.4s; | |
} | |
a { | |
color: white; | |
opacity: 0; | |
font-size: 12px; | |
border-bottom: 1px solid white; | |
transition: all 0.8s 0.5s; | |
transform: translateZ(30px); | |
} | |
} | |
} | |
} | |
} | |
.button { | |
font-family: 'Princess'; | |
position: absolute; | |
z-index: 3; | |
color: #483737; | |
display: block; | |
width: 132px; | |
border: 1px solid #bdbdbd; | |
text-align: center; | |
border-radius: 2px; | |
top: 50%; | |
padding: 13px; | |
right: 0; | |
margin: auto; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
font-size: 12px; | |
left: -90px; | |
cursor: pointer; | |
-webkit-transition: background .7s; | |
transition: background .7s; | |
background: rgba(61, 21, 24,0.78); | |
color: white; | |
border: none; | |
&:hover { | |
background: rgb(61, 21, 24); | |
color: white; | |
border: none; | |
} | |
} | |
@keyframes spin { | |
from {transform:rotate(0deg)} | |
to {transform:rotate(360deg)} | |
} | |
@keyframes spinBack { | |
from {transform:rotate(0deg)} | |
to {transform:rotate(- 360deg)} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment