This is a responsive layout that features a full screen "hero" video with a hardware accelerated parallax scrolling effect. You can play/pause the video at any time, set different scroll rates to as many elements as you like as well as add additional CSS transitions using jQuery.
A Pen by Mark Hillard on CodePen.
| <div id="overlay"> | |
| <div id="title"><h1>Parallaxelicious</h1></div> | |
| <video class="visible-desktop" id="hero-vid" poster="https://www.markhillard.com/sandbox/media/polina.jpg" autoplay loop muted> | |
| <source type="video/webm" src="https://www.markhillard.com/sandbox/media/polina.webm"></source> | |
| <source type="video/mp4" src="https://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="https://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é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é 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é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é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é 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é 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é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ée croissant gummi bears jujubes dessert. Icing jujubes sugar plum fruitcake brownie cookie soufflé. Candy oat cake bonbon sesame snaps. Donut biscuit icing liquorice. Applicake lollipop liquorice pudding. Dessert muffin chupa chups. Jelly-o bear claw caramels soufflé 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ée danish soufflé candy canes icing tart. Lollipop tootsie roll croissant biscuit pastry jelly-o tootsie roll pastry. Pastry cake applicake icing cake danish lollipop. Croissant soufflé marshmallow gummi bears dessert soufflé 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ée. Cupcake cheesecake gummies cotton candy sweet roll. Pudding marzipan oat cake. Muffin chupa chups lemon drops. Soufflé 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é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é. Danish wafer cheesecake fruitcake marshmallow sweet carrot cake cookie brownie. Icing muffin lollipop jelly.</p> | |
| </div> |
| $(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'); | |
| } | |
| }); | |
| }); |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
| /* Global Styles */ | |
| @import url("https://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("https://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 { | |
| background-color:rgba(0,0,0,.5); | |
| bottom:0; | |
| cursor:pointer; | |
| font-size:2.25em; | |
| left:0; | |
| padding:1.5rem 2.5rem; | |
| position:absolute; | |
| width:31px; | |
| } | |
| /* 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.5em; | |
| padding:.5em .725em; | |
| } | |
| #content { | |
| background-color:#151515; | |
| padding:2em; | |
| position:relative; | |
| z-index:1; | |
| } | |
| #content p { | |
| font-size:1.25em; | |
| letter-spacing:.02em; | |
| margin-bottom:1.3em; | |
| } | |
| /* 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; } | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |