Transparent video 3D Modal

index.haml

.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

script.js

// ## 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);
});

scripts

<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>

style.scss

@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)}
}

transparent-video-3d-modal.markdown

Transparent video 3D Modal

A Pen by Jamie Coulter on CodePen.

License.