JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div id="overlay">
    <div id="title"><h1>Parallaxelicious</h1></div>
    <video class="visible-desktop" id="hero-vid" poster="http://www.markhillard.com/sandbox/media/polina.jpg" autoplay loop muted>
        <source type="video/webm" src="http://www.markhillard.com/sandbox/media/polina.webm"></source>
        <source type="video/mp4" src="http://www.markhillard.com/sandbox/media/polina.mp4"></source>
    </video>
    <div id="state" class="visible-desktop"><span class="fa fa-pause"></span></div>
    <img id="hero-pic" class="hidden-desktop" src="http://www.markhillard.com/sandbox/media/polina.jpg" alt="">
</div>

<div id="content">
    <p>Cookie cotton candy powder. Unerdwear.com sweet cake. Powder jujubes marshmallow marzipan. Jelly jelly-o sweet apple pie brownie apple pie. Bonbon sweet roll carrot cake tart gummi bears drag&eacute;e sweet. Marshmallow candy powder. Applicake danish apple pie marzipan cheesecake icing macaroon sweet biscuit. Sesame snaps jelly-o pie cheesecake tootsie roll chocolate cake souffl&eacute; cotton candy. Sweet roll brownie applicake. Sweet roll apple pie sesame snaps biscuit bear claw sweet roll chocolate bar. Tart sweet roll unerdwear.com pie cake brownie carrot cake. Tootsie roll lollipop marshmallow.</p>   
</div>

CSS

/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Poiret+One|Josefin+Sans");

html,body {
color:#fddaec;
font-family:"Josefin Sans", sans-serif;
font-size:100%;
height:100%;
line-height:1.45;
}


/* Video Overlay */

#overlay {
background-color:rgba(0,0,0,.65);
height:100%;
left:0;
position:relative;
top:0;
transition:background-color 300ms ease;
width:100%;
}

.fade { background-color:rgba(0,0,0,.85) !important; }


/* Hero Video + Fallback */

#hero-vid {
backface-visibility:hidden;
background:url("http://www.markhillard.com/sandbox/media/polina.jpg") no-repeat scroll 0 0 #000;
background-size:cover;
bottom:0;
height:auto;
min-height:100%;
min-width:100%;
perspective:1000;
position:fixed;
right:0;
width:auto;
z-index:-1;
}

#hero-pic {
display:block;
height:auto;
width:100%;
}

#state {
bottom:0;
cursor:pointer;
font-size:2.25rem;
left:0;
line-height:1;
padding:2rem 2.5rem 1.65rem;
position:absolute;
}


/* Content Styles */

#title {
backface-visibility:hidden;
left:0;
perspective:1000;
position:fixed;
width:100%;
}

#title h1 {
background-color:rgba(0,0,0,.5);
font-family:"Poiret One", sans-serif;
font-size:2.5rem;
padding:1rem 1.75rem;
}

#content {
background-color:#151515;
padding:2.5rem;
position:relative;
z-index:1;
}

#content p {
font-size:1.25rem;
letter-spacing:.02rem;
margin-bottom:1.3rem;
}


/* Media Queries */

@media only screen and (max-width:768px) {
    #overlay { height:auto; }
}


/* Visibility Helpers */

@media only screen and (min-width:769px) {
    .visible-mobile,.visible-tablet,.hidden-desktop { display:none !important; }
}

@media only screen and (min-width:480px) and (max-width:768px) {
    .visible-mobile,.hidden-tablet,.visible-desktop { display:none !important; }
}

@media only screen and (max-width:479px) {
    .hidden-mobile,.visible-tablet,.visible-desktop { display:none !important; }
}

JavaScript

$(document).ready(function () {
    $(window).on('load scroll', function () {
        var scrolled = $(this).scrollTop();
        $('#title').css({
            'transform': 'translate3d(0, ' + -(scrolled * 0.2) + 'px, 0)', // parallax (20% scroll rate)
            'opacity': 1 - scrolled / 400 // fade out at 400px from top
        });
        $('#hero-vid').css('transform', 'translate3d(0, ' + -(scrolled * 0.25) + 'px, 0)'); // parallax (25% scroll rate)
    });
    
    // video controls
    $('#state').on('click', function () {
        var video = $('#hero-vid').get(0);
        var icons = $('#state > span');
        $('#overlay').toggleClass('fade');
        if (video.paused) {
            video.play();
            icons.removeClass('fa-play').addClass('fa-pause');
        } else {
            video.pause();
            icons.removeClass('fa-pause').addClass('fa-play');
        }
    });
});