Skip to content

Instantly share code, notes, and snippets.

@RhaDaX

RhaDaX/parallax.html

Last active April 5, 2017 20:34
Show Gist options
  • Save RhaDaX/8b385f5b6e9e08e894f1677e4dcb92e4 to your computer and use it in GitHub Desktop.
Save RhaDaX/8b385f5b6e9e08e894f1677e4dcb92e4 to your computer and use it in GitHub Desktop.
Download ZIP
Parallax Bootstrap
Raw
parallax.html
<!--Main parallax wrapper-->
<div class="parallax">
<!--First section-->
<div id="section-1" class="parallax-section">
<!--Parallax content-->
<div class="parallax-layer parallax-layer-base">
<!--Container to center the content-->
<div class="full-bg-img flex-center">
<ul>
<li>
<h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">Parallax example</h1></li>
<li>
<p class="wow fadeInDown" data-wow-delay="0.2s">Scroll down to see the parallax effect</p>
</li>
<li>
<a class="btn btn-outline-white btn-lg wow fadeInLeft" data-wow-delay="0.2s"><i class="fa fa-user left"></i> Button 1</a>
<a class="btn btn-outline-white btn-lg wow fadeInRight" data-wow-delay="0.2s"><i class="fa fa-book left"></i> Button 2</a>
</li>
</ul>
</div>
<!--/Container to center the content-->
</div>
<!--/Parallax content-->
<!--Parallax background-->
<div class="parallax-layer parallax-layer-back">
</div>
<!--/Parallax background-->
</div>
<!--/First section-->
<!--Dummy Content-->
<div id="section-2">
<div class="container text-center pt-1 mb-3">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="mt-3 mb-3 h1-responsive">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
officia harum earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
officia harum earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
officia harum earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
officia harum earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
officia harum earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
officia harum earum.</p>
</div>
</div>
</div>
</div>
<!--Dummy Content-->
</div>
<!--/Main parallax wrapper-->
Copy
Raw
style.css
/********************************************************************
CSS CSS CSS CSS CSS
*********************************************************************/
/*Parallax section*/
#section-1 {
z-index: 1;
color: #fff;
height: 100vh;
}
#section-1 .row {
position: fixed;
}
/*Parallax background*/
#section-1 .parallax-layer-back {
background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(2).jpg")no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Section with dummy content*/
#section-2 {
z-index: 2;
position: relative;
background: #fff;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment