Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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>

    <p>Jelly-o lollipop pie bear claw powder macaroon lollipop lemon drops. Topping jujubes jujubes sesame snaps fruitcake biscuit chocolate jelly beans. Cookie dessert gingerbread. Pudding sweet applicake. Wafer sweet roll marshmallow toffee jelly halvah. Drag&eacute;e lemon drops oat cake tart halvah jujubes jelly biscuit. Pie wafer wafer jelly-o jelly gummies sugar plum pudding. Topping oat cake bear claw danish cookie brownie. Jelly beans tootsie roll gingerbread pastry cookie liquorice applicake. Gummi bears biscuit icing toffee chocolate cake. Powder cheesecake drag&eacute;e brownie applicake lollipop. Jelly beans gingerbread unerdwear.com chocolate bar cake. Chocolate cake caramels dessert sweet topping icing gingerbread sesame snaps marzipan.</p>

    <p>Muffin chocolate cake pudding sweet roll donut marshmallow tootsie roll gingerbread candy canes. Marshmallow cookie topping cookie tiramisu. Unerdwear.com donut brownie unerdwear.com brownie pudding sesame snaps. Souffl&eacute; danish candy sweet sweet candy. Gummi bears dessert jelly macaroon tootsie roll gummi bears lemon drops sweet. Applicake sugar plum gummies chupa chups halvah. Gummies souffl&eacute; icing lollipop. Ice cream chocolate caramels pudding. Marzipan cupcake candy jelly beans fruitcake tiramisu wafer danish bonbon. Halvah biscuit chocolate halvah. Cookie danish cookie lemon drops candy chocolate cake. Jelly beans pastry dessert gummies cake sweet danish.</p>

    <p>Macaroon candy sweet fruitcake jelly beans. Pudding applicake gummies sweet roll. Drag&eacute;e bear claw tiramisu oat cake chocolate bar wafer. Pastry donut chocolate cake danish sesame snaps tiramisu jujubes apple pie wafer. Sesame snaps tootsie roll drag&eacute;e croissant gummi bears jujubes dessert. Icing jujubes sugar plum fruitcake brownie cookie souffl&eacute;. Candy oat cake bonbon sesame snaps. Donut biscuit icing liquorice. Applicake lollipop liquorice pudding. Dessert muffin chupa chups. Jelly-o bear claw caramels souffl&eacute; bonbon toffee gingerbread. Toffee cake lollipop chocolate bar. Jelly-o tiramisu cake carrot cake carrot cake tiramisu sesame snaps. Macaroon cake marzipan macaroon danish croissant halvah unerdwear.com.</p>

    <p>Tart gummies cotton candy marshmallow chocolate gummi bears dessert. Sesame snaps powder liquorice donut. Croissant chocolate ice cream jelly-o cupcake sweet roll jelly-o chocolate bar liquorice. Brownie biscuit croissant ice cream. Candy chocolate sweet roll gummi bears pastry cupcake pie lollipop pie. Brownie lemon drops powder muffin. Gummi bears apple pie apple pie applicake powder. Wafer gummi bears chocolate brownie halvah. Gingerbread sesame snaps unerdwear.com cookie sweet roll. Gingerbread gummies lemon drops pie sesame snaps jujubes applicake cupcake. Drag&eacute;e danish souffl&eacute; candy canes icing tart. Lollipop tootsie roll croissant biscuit pastry jelly-o tootsie roll pastry. Pastry cake applicake icing cake danish lollipop. Croissant souffl&eacute; marshmallow gummi bears dessert souffl&eacute; marshmallow cookie candy.</p>

    <p>Sweet macaroon cheesecake halvah toffee marzipan sweet tootsie roll. Chocolate lemon drops powder chupa chups cake. Jujubes cotton candy liquorice brownie pudding pudding. Pie sesame snaps topping macaroon lemon drops. Chocolate bar gingerbread caramels bear claw cookie icing macaroon gummi bears drag&eacute;e. Cupcake cheesecake gummies cotton candy sweet roll. Pudding marzipan oat cake. Muffin chupa chups lemon drops. Souffl&eacute; caramels cookie. Chocolate cake fruitcake pudding powder dessert fruitcake pie wafer. Sugar plum pudding sweet lemon drops jelly-o pie. Candy canes sweet roll wafer croissant. Gummi bears tart toffee. Chocolate cake lollipop jujubes halvah.</p>

    <p>Pudding candy chocolate cake donut gingerbread toffee cotton candy jujubes. Gummi bears carrot cake tart macaroon cheesecake sugar plum chocolate cake gummi bears. Biscuit fruitcake pastry apple pie carrot cake bonbon jelly beans. Fruitcake sugar plum drag&eacute;e. Oat cake lollipop toffee lollipop sugar plum powder caramels. Macaroon chocolate pudding ice cream gummies pie donut jelly-o. Candy canes macaroon powder pastry. Pudding candy canes bonbon pie topping cupcake sweet tootsie roll. Cake marshmallow sugar plum chupa chups macaroon carrot cake marzipan lollipop topping. Gummi bears unerdwear.com muffin cupcake jelly beans tart souffl&eacute;. Danish wafer cheesecake fruitcake marshmallow sweet carrot cake cookie brownie. Icing muffin lollipop jelly.</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; }
}
              
            
!

JS

              
                $(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');
        }
    });
});
              
            
!
999px

Console