Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.haml
Created Jan 7, 2018

Embed
What would you like to do?
Transparent video 3D Modal
.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
// ## 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);
});
<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>
@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
You can’t perform that action at this time.