Material Design Bootstrap

Introduction

Eye-catching, alluring and fascinating - only a few to words to describe Parallax - a design element, recognized by most web designer, who love to enrich their creations with more advanced constructions.

Parallaxes provide you with a charming effect of having two simultaneously progressing objects (in most of the cases - pictures and text fields), which both move with different speed.

It is worth to notice, that we have approached the topic of parallaxes in a different way, and made them purely in CSS. Thanks to that solution, they are way more responsive when it comes to other devices.

Live demo

Basic example

HTML construction


<!--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">Parallax example</h1></li>
                    <li>
                        <p>Scroll down to see the parallax effect</p>
                    </li>
                    <li>
                        <a class="btn btn-white-outline btn-lg"><i class="fa fa-user left"></i> Button 1</a>
                        <a class="btn btn-white-outline btn-lg"><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-xs-center p-t-3">

            <h1 class="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>
    <!--Dummy Content-->

</div>
<!--/Main parallax wrapper-->

Set your options via CSS:


/*Parallax section*/
#section-1 {
    z-index: 1;
    color: #fff;
    height: 100vh;
}
/*Parallax background*/
#section-1 .parallax-layer-back {
    background: url("https://mdbootstrap.com/images/regular/nature/img%20(54).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%;
}

Introduction
Basic example