HTML
<link rel="stylesheet" type="text/css" href="http://dieselpunkindustries.com/libs/audioplayer/css/audioplayer.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Oswald:300,400,700" rel="stylesheet">
<div class="all light">
<div class="full-panel" style="" name="video-bg">
<div class="vid-bg-box">
<video src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/ny_street_blur.mp4" class="video_background" autoplay="autoplay" loop="loop" muted>
</video>
</div>
<div class="panel-overlay dark"></div>
<div class="middle">
<div class="main-content">
<img class="cover-title-image" src="https://s3.amazonaws.com/imglibs/magazine.svg">
</div>
<div class="full break center"><a href="#intro"><btn>Introduction</btn></a></div>
</div>
</div>
<div class="full-panel" name="intro">
<div class="middle">
<div class="main-content">
<div class="full"><h1 class="center">Magazine Framework V.1</h1></div>
<div class="Full">
<h2>Overview:</h2>
<p>
Magazine is a slim framework primarily designed for tablets and desktop as either a multipage or single page website. The JS and CSS has been optimized to support audio, video, menus, smooth scrolling, image light boxes, video backgrounds and parallax effects without all the overhead created by including additional script and style libraries. Below are list of features included with this framework.
</p>
</div>
<div class="Full">
<h2>Updates:</h2>
<p>
17/01/03 - Hides scrollbar on webkit based browsers<br />
17/01/03 - Disabled text selection<br />
17/01/03 - Right and left arrows open and close menu<br />
17/01/03 - Added content shift to right on menu open<br />
17/01/04 - Fixed device scaling, to prevent content from scaling down on ipad on menu open.<br />
17/01/04 - Fixed full height on full size parallax for Firefox.
</p>
</div>
<div class="full break center"><a href="https://preview.codepad.co/playground/preview/neFnBI4d/1" target="_blank"><btn>Open in new window</btn></a></div>
<h2>Features:</h2>
<div class="full">
<ul>
<li>Fully Responsive</li>
<li>Support for iframe and video lightboxes</li>
<li>Video Backgrounds</li>
<li>Image Lightboxes</li>
<li>Supports MP4 and MP3</li>
<li>Smooth Scrolling</li>
<li>Mininal audio player format</li>
<li>Light and dark themes available</li>
<li>Dynamically loading iframe, audio and video </li>
<li>Lightweight JS, and CSS</li>
<li>Sidr style menu</li>
<li>Prohibitive scrolling during lightbox events</li>
<li>Lightweight Parallax optimized for iOS</li>
<li>Scalable H1, and H2 fonts</li>
</ul>
</div>
<div class="full break center"><a href="#parallax"><btn>Get Started</btn></a></div>
</div>
</div>
</div>
<div class="full-panel parallax" style="background-image:url(https://images.unsplash.com/photo-1432821596592-e2c18b78144f?dpr=1&auto=format&fit=crop&w=1500);" name="parallax">
<div class="panel-overlay"></div>
<div class="middle">
<div class="main-content">
<h1 class="center">Parallax Cover</h1>
<div class="full break center"><a href="#audio"><btn>Audio Samples</btn></a></div>
</div>
</div>
</div>
<div class="full-panel" name="audio">
<div class="middle">
<div class="main-content">
<div class="full"><h2>Audio Samples</h2></div>
<div class="half">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Pellentesque ornare justo non orci aliquet ullamcorper. Nullam consectetur lacus mauris, pellentesque hendrerit dolor hendrerit eget. Nulla non finibus mi, ac dignissim elit. Proin semper bibendum ipsum, non dignissim arcu feugiat sit amet. Vestibulum porta nunc urna, ac mattis quam sodales ut.</p>
<p>Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.</p>
<div class="play-audio" audioUrl="https://www.wpwebos.com/audio/vox-pop-39-09-23.mp3">Play Audio One<i class="fa fa-volume-up" aria-hidden="true"></i></div>
</div>
<div class="half">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Pellentesque ornare justo non orci aliquet ullamcorper. Nullam consectetur lacus mauris, pellentesque hendrerit dolor hendrerit eget. Nulla non finibus mi, ac dignissim elit. Proin semper bibendum ipsum, non dignissim arcu feugiat sit amet. Vestibulum porta nunc urna, ac mattis quam sodales ut.</p>
<p>Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.</p>
<div class="play-audio" audioUrl="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/try_me.mp3">Play Audio Two<i class="fa fa-volume-up" aria-hidden="true"></i></div>
</div>
</div>
<div class="full break center"><a href="#video"><btn>Video Sample</btn></a></div>
</div>
</div>
<div class="full-panel" name="video">
<div class="middle">
<div class="main-content">
<div class="forty pull-right">
<div class="vid-link" vidurl="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/battle_of_britain.mp4">
<img class="img-shadow" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/bob.jpg">
<div class="vid-overlay">
<div class="vid-table">
<div class="cell"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_btn.svg"></div>
</div>
</div>
</div>
<div class="vid-cap">Movie Title</div>
</div>
<div class="sixty pull-left">
<h2>Video Sample</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.
</p>
</div>
</div>
<div class="full break center"><a href="#iframe"><btn>iframe Sample</btn></a></div>
</div>
</div>
<div class="full-panel" name="iframe">
<div class="middle">
<div class="main-content">
<div class="forty">
<div class="tube-link" vidurl="https://www.youtube.com/embed/bRDOrY97wkk">
<img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/overwatch_th.jpg">
<div class="vid-overlay">
<div class="vid-table">
<div class="cell"><img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_btn.svg"></div>
</div>
</div>
</div>
<div class="vid-cap">Movie Title</div>
</div>
<div class="sixty">
<h2>Iframe Sample</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.
</p>
</div>
</div>
<div class="full break center"><a href="#layout"><btn>Basic Layout</btn></a></div>
</div>
</div>
<div class="half-panel parallax" style="background-image:url(https://jsbin-user-assets.s3.amazonaws.com/ipodscott/toastmaster.jpeg);" name="layout">
<div class="panel-overlay"></div>
<div class="middle">
<div class="main-content">
<h1 class="center">Parallax Half Height Cover</h1>
<div class="full break center"><a href="#big-media"><btn>Big Media Link</btn></a></div>
</div>
</div>
</div>
<div class="panel">
<div class="main-content">
<div class="row">
<div class="full"><h2>Basic Layout</h2></div>
<div class="half">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.
</p>
</div>
<div class="half">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.
</p>
</div>
</div>
<div class="row">
<div class="forty"><img imgUrl="https://s3.amazonaws.com/imglibs/fiat.jpeg" class="pop-image shadow" src="https://s3.amazonaws.com/imglibs/fiat.jpeg"/></div>
<div class="sixty">
<h2>Main Copy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.
</p>
</div>
</div>
<div class="row">
<div class="sixty">
<h2>Main Copy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.
</p>
</div>
<div class="forty"><img class="shadow pop-image" imgUrl="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sombra.jpg" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sombra.jpg"/></div>
</div>
<div class="row">
<div class="third">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.</p>
</div>
<div class="third">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.</p>
</div>
<div class="third">
<h2>Section Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.</p>
</div>
</div>
</div>
</div>
<div class="half-panel parallax" style="background-image:url(https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sombra.jpg);" name="big-media">
<div class="panel-overlay"></div>
<div class="middle">
<div class="main-content">
<img class="big-play" vidUrl="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/infiltration.mp4" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/play_dark_btn.svg">
</div>
</div>
</div>
<div class="panel">
<div class="main-content">
<div class="row">
<div class="full"><h2>Video Information</h2></div>
<div class="half">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.
</p>
</div>
<div class="half">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.
</p>
</div>
</div>
<div class="row">
<div class="forty"><img class="shadow" src="https://source.unsplash.com/random/400x300?rand=145"/></div>
<div class="sixty">
<h2>Main Copy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.
</p>
</div>
</div>
<div class="row">
<div class="sixty">
<h2>Main Copy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.
</p>
</div>
<div class="forty"><img class="shadow" src="https://source.unsplash.com/random/400x300?rand=333"/></div>
</div>
<div class="row">
<div class="third">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.</p>
</div>
<div class="third">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.</p>
</div>
<div class="third">
<h2>Section Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.</p>
</div>
</div>
</div>
</div>
<!--Close All Div-->
</div>
<!--Media Layers-->
<div class="footer-audio">
<div class="audio-box shadow">
<div class="controls shadow">
<img class="hide-audio" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/thin_min.svg">
<img class="close-audio" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/thin_close.svg">
</div>
<audio class="myAudio" id="myAudio" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/try_me.mp3" controls></audio>
</div>
</div>
<div class="media-overlay"></div>
<div class="img-pop-box">
<div class="img-container">
<div class="img-box">
<div class="img-holder">
<img class="shadow myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=400&h=300">
</div>
</div>
</div>
</div>
<!--Menu Layers-->
<div class="menu-layer"></div>
<div class="video-box"><video class="myVideo" id="myVideo" poster="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/loading.jpg" controls="" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/DuMont.mp4" style="display: block;"></video></div>
<div class="tube-frame">
<iframe class="youTube" src="" frameborder="0" allowfullscreen=""></iframe>
</div>
<img class="close-media" vidurl="#" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close_btn.svg">
<div class="side-buttons show-right shadow">
<img src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/snd_min.svg"/>
</div>
<img class="menu-btn" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/menu_btn.svg">
<div class="menu shadow">
<div class="menu-title">Main Menu</div>
<ul>
<li><a href="#video-bg">Welcome</a></li>
<li><a href="#intro">Introduction</a></li>
<li><a href="#parallax">Parallax Cover</a></li>
<li><a href="#audio">Audio Samples</a></li>
<li><a href="#video">Video Sample</a></li>
<li><a href="#iframe">Iframe Sample</a></li>
<li><a href="#layout">Basic Layout</a></li>
<li><a href="#big-media">Big Media Link</a></li>
</ul>
<img class="close-menu" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/thin_close.svg">
</div>
<div class="btt-footer">
<a href="#video-bg"><img class="shadow" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/top_link.svg"></a>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//use.fontawesome.com/cbc5f6a98e.js"></script>
<script src="http://www.dieselpunkindustries.com/libs/audioplayer/js/audioplayer.min.js"></script>
<script src="http://www.wpwebos.com/scroller/jquery.custom-scrollbar.js"></script>
CSS
body{
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
font-weight: 300;
background-color: #000;
color: #333;
font-size:14px;
line-height:1.5em;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y:auto;
}
.all{
display:block;
position:relative;
clear:both;
margin-left:0;
transition:all 1s;
float:left;
width: 100%;
height: 100%;
left:0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.all.fade{
width:100vw;
left:260px;
}
body.fade{
overflow:hidden;
}
/*::-webkit-scrollbar {
display: none;
}
*/
a{
color:#999;
text-decoration:none;
}
.full.center{
text-align:center;
}
btn{
font-family:'Lato', sans-serif;
border-width: 1px;
border-style: solid;
border-color: #999;
padding: 8px 8px 8px 14px;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 10px 0 #000000;
box-shadow: 0 0 10px 0 #000000;
color: #efefef;
letter-spacing: 0.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 12px;
margin: 30px auto 0 auto;
cursor: pointer;
transition:all 0.5s;
}
btn:hover{
-webkit-box-shadow: 0 0 20px 0 #000000;
box-shadow: 0 0 20px 0 #000000;
}
btn a{
color:#fff;
text-decoration:none;
}
ul, p{
font-weight: 400;
line-height: 1.5em;
font-size: 16px;
margin: 0 0 1.5em 0;
font-family: 'Lato',sans-serif;
}
ul{
list-style-position: inside;
padding:0;
margin:0;
}
.full ul li{
list-style:circle;
display:block;
float:left;
width:calc(50% - 20px);
padding:0;
margin:0;
transition:all 0.5s;
}
a{color:#666;}
.pull-right{
float:right;
}
.pull-left{
float:left;
}
h1{
font-family: 'Oswald', sans-serif;
font-weight: 400;
letter-spacing: 0.125em;
text-transform: uppercase;
line-height:1.25em;
font-size: calc(75% + 2vw) !important;
}
h2{
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.25em;
font-size: 18px;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #333;
font-size: calc(70% + 0.5vw) !important;
}
.center{
text-align:center;
}
img{
max-width: 100% !important;
height: auto;
}
.dark{background-color: #212121; color: #efefef;}
.light{background-color: #e3e3e3; color: #333;}
.panel{
display:block;
position: relative;
clear:both;
height: auto;
width: calc(100% - 60px);
padding: 0 30px 0 30px;
margin: 0 0 60px 0;
float:left;
}
.panel-overlay{
position:absolute;
width:calc(100% + 60px);
height:100%;
top:0;
left:-30px;
background-color: rgba(255, 255, 255, 0.4);
-webkit-box-shadow:inset 0 0 15px 0 #000000;
box-shadow:inset 0 0 15px 0 #000000;
z-index:0;
}
.panel-overlay.dark{
background-color: rgba(0, 0, 0, 0.4);
}
/*--Video Background--*/
.vid-bg-box{
left:0;
top:0;
position: absolute;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
.video_background {
position: absolute;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
}
.full-panel{
display: table;
position: relative;
height: 100vh;
min-height:100vh;
margin: 0 auto;
width: calc(100% - 60px);
padding: 0 30px 0 30px;
background-size: cover;
background-repeat:no-repeat;
background-position: center top;
background-attachment: scroll;
clear:both;
overflow:hidden;
}
.half-panel{
display: table;
position: relative;
height: 50vh;
min-height:400px;
margin: 0 auto 40px auto;
width:100%;
background-size: calc(100vh + 75vw) ;
background-repeat:no-repeat;
background-position: center top;
clear:both;
overflow: hidden;
background-attachment: scroll;
-webkit-transition: background-size 0.5s; /* Safari */
transition: background-size 0.5s;
background-color:#000;
}
.main-content{
display: block;
position: relative;
margin: 0 auto;
max-width: 1200px;
width: calc(100% - 60px);
padding: 0;
}
.cover-title-image{
display:block;
position:relative;
margin:0 auto;
max-width:700px !important;
opacity:0.7;
}
.full-panel .main-content, .panel .main-content, .half-panel .main-content{
width: calc(100%);
}
.middle{
display: table-cell;
position: relative;
vertical-align: middle;
width:100%;
}
.full{
display: block;
position: relative;
width: calc(100% - 30px);
clear: both;
float:left;
}
.full.break{
margin: 30px 0 30px 0;
}
.row{
display: block;
position: relative;
clear: both;
margin: 0;
width: 100%;
height: auto;
}
.half{
display: block;
float: left;
width: calc(50% - 30px);
}
.sixty{
display: block;
float: left;
width: calc(60% - 30px);
}
.forty{
display: block;
float: left;
width: calc(40% - 30px);
}
.forty img{
width:100%;
height: auto;
}
.third{
display: block;
float: left;
width: calc(33.3% - 30px);
}
.quarter{
display: block;
float: left;
width: calc(25% - 30px);
}
.three-quarters{
display: block;
float: left;
width: calc(75% - 30px);
}
.full, .half, .third, .quarter, .three-quarters, .sixty, .forty{
padding: 10px 15px 10px 15px;
transition: all 0.5s;
text-align: left;
}
.half p img{
width: 100% ;
max-width: 100% !important;
height: auto;
display: block;
position: relative;
margin: 20px 0 20px 0 !important;
}
.play-audio{
cursor:pointer;
}
.footer-audio{
position: fixed;
bottom:-90px;
min-width:100%;
height:50px;
z-index:9999;
transition: all 0.5s;
}
.show-audio{
bottom:0;
cursor: pointer;
}
.audio-box{
display: block;
position:relative;
height:50px;
width: calc(100% - 40px);
max-width:800px;
background-color:#000;
margin: 0 auto 0 auto;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
color:#fff;
font-size:24px;
}
.audio-box .controls{
display:block;
position:absolute;
background-color:#000;
opacity:0.7;
width: 120px;
height:30px;
margin-top:-30px;
right:0;
border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
text-align:center;
}
.audio-box .controls img{
margin-top:7px;
width:38%;
transition: all 0.5s;
opacity: 0.5;
}
.audio-box .controls img:hover{
opacity: 1;
}
.audio-box .fa-minus-square-o{
padding:15px;
color:#fff;
cursor: pointer;
opacity:0.6;
transition:all 0.5s;
float:left;
}
.shadow{
box-shadow: 0 0 10px 0 #000000;
-webkit-box-shadow: 0 0 10px 0 #000000;
}
.no-shadow{
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.audioplayer{
margin:5px 0 0 0;
font-size:16px;
width:calc(100% - 10px);
float:right;
}
.side-buttons{
right: -50px;
height: 40px;
position: fixed;
width: 40px;
background-color:#000;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
color:#fff;
font-size:24px;
transition: all 0.5s;
opacity:0.6;
cursor: pointer;
z-index:9999;
text-align:center;
}
.side-buttons:hover{
opacity:1;
}
.show-side{
right:0px;
}
.side-buttons img{
width:75%;
display:block;
position: absolute;
margin:5px 0 0 7px;
opacity:0.6;
}
.show-right{
bottom:50px;
}
.play-audio{
font-family:'Lato', sans-serif;
display: block;
position: relative;
clear: both;
max-width: 400px;
width: calc(100% - 32px);
border-width: 1px;
border-style:solid;
border-color: #999;
padding: 8px;
text-align: center;
background-color:rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 10px 0 #000000;
box-shadow: 0 0 10px 0 #000000;;
color: #efefef;
letter-spacing: 0.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 12px;
margin: 30px auto 0 auto;
cursor: pointer;
}
/*Video Styles*/
.big-play{
display:block;
position:relative;
margin:0 auto;
width:120px;
height:auto;
opacity:0.3;
cursor:pointer;
}
.vid-link, .tube-link{
display: block;
position: relative;
margin: 20px 0 20px 0;
width: calc(100%);
background-color: #000;
height: auto;
-webkit-box-shadow: 0 0 10px 0 #000000;;
box-shadow: 0 0 10px 0 #000000;;
}
.vid-link img, .tube-link img {
position: relative;
display: block;
position: relative;
width: 100%;
height: auto;
}
.vid-overlay{
display: block;
position: absolute;
width: 100%;
top:0;
left: 0;
height: 100%;
color: #fff;
}
.vid-table{
display: table;
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.5s;
cursor: pointer;
}
.vid-table:hover{
background-color: rgba(0, 0, 0, 0.0);
}
.vid-table .cell{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vid-table .cell img{
max-width: 100px;
height: 100px;
}
.vid-cap{
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 14px;
margin: 0 0 0 0;
}
.vid-link img:hover{
opacity: 1;
}
.menu-btn{
position:fixed;
top:10px;
left:10px;
width:36px;
height:36px;
cursor:context-menu;
opacity:0.6;
transition:all 0.5s;
}
.menu-btn:hover{
opacity:1;
}
.menu{
top:0;
left:-290px;
position: fixed;
background-color:#111;
width:280px;
height:100%;
z-index:999;
color:#efefef;
transition: all 0.75s;
}
.show-menu{
left:0;
}
.menu ul{
margin:0;
padding:0;
list-style:none;
}
.menu ul li{
display:block;
color: #efefef;
font-weight: 300;
text-transform: uppercase;
font-size: 12px;
transition:all 0.5s;
letter-spacing: 0.25em;
font-weight:700;
}
.menu ul li a{
display:block;
position:relative;
padding:10px;
text-decoration:none;
color: #efefef;
}
.menu ul li:hover{
background-color:#333;
}
.menu-title{
text-align:center;
font-weight:700;
text-transform: uppercase;
padding:10px;
color: #999;
font-size:18px;
}
.close-menu{
position: absolute;
top:13px;
right:0;
width:40px;
height:auto;
opacity: 0.6;
transition:all 0.5s;
cursor: pointer;
}
.close-menu:hover{
opacity:1;
}
.menu-layer{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
z-index:999;
display:none;
opacity:0.8;
}
.media-overlay{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
z-index:999;
display:none;
opacity:0.8;
}
.close-media{
width:30px;
height:30px;
position:fixed;
top:10px;
right:10px;
z-index:999;
display:none;
cursor:pointer;
opacity:0.6;
transition:all 0.5s;
}
.video-box{
top:0;
left:0;
position:fixed;
z-index:999;
display:none;
}
.myVideo{
width: calc(100% - 40px);
height:calc(100vh - 40px);
margin:20px;
position:fixed;
top:0;
left:0;
background-color:#000;
}
.tube-frame{
position: fixed;
top:0;
left: 0;
display: block;
width: calc(100% - 40px);
height: calc(100% - 40px);
margin: 20px 0 0 20px;
background-color: #000;
display: none;
z-index: 999;
}
.tube-frame iframe{
display: block;
position: relative;
width: 100%;
height: 100%;
}
.close-media:hover{
opacity:1;
}
/*--Pop Image--*/
.pop-image{
transition:all 0.5s;
cursor:zoom-in;
}
.pop-image.shadow:hover{
box-shadow: 0 0 20px 0 #000000;
-webkit-box-shadow: 0 0 20px 0 #000000;
}
.img-pop-box{
display:none;
z-index:9999;
}
.img-container {
display: table;
width: 100%;
height: 100%;
position:fixed;
z-index:999;
top:0;
left:0;
}
.img-box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.img-holder{
display:inline-block;
position:relative;
width:auto;
height:auto;
margin:0 auto;
padding: 0 30px 0 30px;
}
.img-holder img{
max-width:90vw;
max-height:90vh;
width:auto;
height:auto;
display:none;
cursor:zoom-out;
}
.btt-footer{
display:none;
bottom:0;
left: 0;
height: 37px;
position: fixed;
z-index: 99;
width:100%;
text-align:center;
opacity:0.3;
}
.btt-footer img{
padding:5px 10px 6px 10px;
width:50px;
background-color:#000;
border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
}
.back-to-top{
height:80px;
width: 40px;
background-color: #000;
-webkit-border-radius :6px;
border-radius: 6px;
color: #fff;
font-size: 24px;
transition: all 0.5s;
opacity: 0.6;
cursor: pointer;
text-align: center;
}
.back-to-top img{
display:block;
position:relative;
width:80%;
margin:10px auto 0 auto;
}
@media (max-width: 960px) {
.quarter, .three-quarters, .sixty, .forty {
width: calc(50% - 30px);
float: left;
}
.third{
width: calc(100% - 30px);
}
.lower-copy .content div p img{
width: 100%;
max-width: 100%;
display: block;
position: relative;
margin: 20px 0 20px 0 !important;
float: none !important;
}
}
@media (max-width: 860px) {
.full ul li {
list-style: circle;
display: block;
float: left;
width: calc(100% - 20px);
padding: 0;
margin: 0;
}
}
@media (max-width: 760px) {
.quarter, .half, .three-quarters, .sixty, .forty {
width: calc(100% - 20px);
}
}
ES6
$( document ).ready(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
/*Menu Controls*/
$( ".menu-btn" ).click(function() {
$(".menu").addClass('show-menu');
$('body').addClass('fade');
$('.all').addClass('fade');
$(".menu-layer").fadeIn(500);
});
$( ".menu ul li, .menu ul li a, .close-menu, .menu-layer" ).click(function() {
$(".menu").removeClass('show-menu');
$('body').removeClass('fade');
$('.all').removeClass('fade');
$(".menu-layer").delay(250).fadeOut(500);
});
/*Audio Controls*/
$( ".play-audio" ).click(function() {
$('.myAudio').attr("src", $(this).attr("audioUrl"));
$(".footer-audio").addClass('show-audio');
document.getElementById('myAudio').play();
$('.audioplayer').addClass("audioplayer-playing");
$(".side-buttons").removeClass('show-side');
$('.btt-footer').fadeOut(500);
});
$( ".audio-box .hide-audio" ).click(function() {
$(".footer-audio").removeClass('show-audio');
$(".side-buttons").addClass('show-side');
$('.btt-footer').fadeIn(500);
});
$( ".show-right" ).click(function() {
$(".footer-audio").addClass('show-audio');
$(".side-buttons").removeClass('show-side');
$('.btt-footer').fadeIn(500);
});
$( ".close-audio, .vid-link" ).click(function() {
$(".footer-audio").removeClass('show-audio');
$(".side-buttons").removeClass('show-side');
document.getElementById('myAudio').pause();
$('.btt-footer').fadeIn(500);
});
$(function(){
$('.myAudio').audioPlayer();
});
/*Video Controls*/
$( ".vid-link, .big-play" ).click(function() {
$('.myVideo').attr("src", $(this).attr("vidUrl"));
$('.media-overlay, .close-media, .video-box').fadeIn(500);
$('body').addClass('fade');
$(".footer-audio").removeClass('show-audio');
$(".side-buttons").removeClass('show-side');
document.getElementById('myAudio').pause();
document.getElementById('myVideo').play();
});
/* Image Pop Controls*/
$( ".pop-image" ).click(function() {
$('.myImage').attr("src", $(this).attr("imgUrl"));
$('.media-overlay, .close-media, .img-pop-box').fadeIn(500, function(){
$('.img-holder img').fadeIn(500);
});
$('body').addClass('fade');
});
/*iframe Controls*/
$( ".tube-link" ).click(function() {
$('.media-overlay, .close-media, .tube-frame').fadeIn(500);
$('body').addClass('fade');
$(".footer-audio").removeClass('show-audio');
$(".side-buttons").removeClass('show-side');
document.getElementById('myAudio').pause();
$('.youTube').attr("src", $(this).attr("vidUrl"));
});
$( ".close-media, .img-holder img" ).click(function() {
$('.youTube').attr("src", $(this).attr("vidUrl"));
$('.media-overlay, .tube-frame, .close-media, .video-box, .img-holder img').fadeOut(500, function(){
$('.img-pop-box').fadeOut(500);
});
document.getElementById('myVideo').pause();
$('body').removeClass('fade');
});
/*Parallax*/
(function($) {
$.fn.parallax = function(options) {
var windowHeight = $(window).height();
// Establish default settings
var settings = $.extend({
speed : 0.15
}, options);
// Iterate over each object in collection
return this.each( function() {
// Save a reference to the element
var $this = $(this);
// Set up Scroll Handler
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
// Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}
var yBgPosition = Math.round((offset - scrollTop) * settings.speed);
// Apply the Y Background Position to Set the Parallax Effect
$this.css('background-position', 'center ' + yBgPosition + 'px');
});
});
};
}(jQuery));
$('.parallax').parallax({
speed : -0.125
});
});
window.document.onkeydown = function (e)
{
if (!e) e = event;
if (e.keyCode == 27)
{
$('.youTube').attr("src", $(this).attr("vidUrl"));
$('.media-overlay, .tube-frame, .close-media, .video-box, .img-holder img').fadeOut(500, function(){
$('.img-pop-box').fadeOut(500);
});
document.getElementById('myVideo').pause();
$('body').removeClass('fade');
$(".menu").removeClass('show-menu');
$('body').removeClass('fade');
$('.all').removeClass('fade');
$(".menu-layer").delay(250).fadeOut(500);
$('.btt-footer').fadeIn(500);
}
if (!e) e = event;
if (e.keyCode == 39)
{
$(".menu").addClass('show-menu');
$('body').addClass('fade');
$('.all').addClass('fade');
$(".menu-layer").fadeIn(500);
}
if (!e) e = event;
if (e.keyCode == 37)
{
$(".menu").removeClass('show-menu');
$('body').removeClass('fade');
$('.all').removeClass('fade');
$(".menu-layer").delay(250).fadeOut(500);
}
};
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 40) {
$('.btt-footer').fadeIn(500);
} else {
$('.btt-footer').fadeOut(500);
}
});
7 Responses
there are some smaller issues in the css (i guess 0px instead of 0 is doable but its looking wierd) f.e. in line 510 is a comma that shouldn't be there.
anyways. i'm working on a small project right now where i could use a lot of this. thank you very much for sharing! (:
btw. i hate you for that arrowkey thingy! i'll just press left and right for the next few hours. :D