Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap parallax

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.

Live demo

Basic examples MDB Pro component

                                    
<div class="view intro hm-white-light jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); height: 1200px;">
    <div class="full-bg-img">
        <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 850px">
                <div class="row mt-5">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="intro-info-content text-center">
                            <h1 class="display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">NATALIE <a class="indigo-text font-bold">SMITH</a></h1>
                            <h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">Web developer & graphic designer</h5>
                            <a class="btn btn-light-blue btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-indigo btn-lg wow fadeIn" data-wow-delay="0.4s">About me</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12 text-center mb-3">
    
            <h1 class="font-bold light-blue-text my-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
            <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    
        </div>
        <!--Grid column-->
    
    </div>
    <!--Grid row-->

</div>

<div class="view intro hm-white-light jarallax" data-jarallax-video="https://vimeo.com/groups/freehd/videos/153749651" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%30.jpg);">
    <div class="full-bg-img">
        <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 700px">
                <div class="row mt-5">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="intro-info-content text-center">
                            <h1 class="display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">ANNA'S <a class="white-text font-bold">BLOG</a></h1>
                            <h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">Interior designer & Nature lover</h5>
                            <a class="btn btn-elegant btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-outline-white btn-lg wow fadeIn" data-wow-delay="0.4s">About me</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12 text-center my-3">
    
            <h1 class="font-bold grey-text mb-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
            <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    
        </div>
        <!--Grid column-->
    
    </div>
    <!--Grid row-->

</div>

<div class="view intro hm-pink-slight jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/food2.jpg);">
    <div class="full-bg-img">
        
    </div>
</div>

<div class="view intro hm-purple-slight jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg);">
    <div class="full-bg-img">
        <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 700px">
                <div class="row mt-5">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="intro-info-content text-center">
                            <h1 class="display-1 white-text mb-2 wow fadeInDown" data-wow-delay="0.3s">Welcome on my page!</h1>
                            <h4 class="mb-3 mt-1 white-text font-bold wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet</h4>
                            <a class="btn btn-pink wow fadeIn" data-wow-delay="0.4s">Read more</a> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12 text-center my-3">
    
            <h1 class="font-bold pink-text mb-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
            <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    
        </div>
        <!--Grid column-->
    
    </div>
    <!--Grid row-->

</div>        <div class="view intro hm-white-light jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); height: 1200px;">
    <div class="full-bg-img">
        <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 850px">
                <div class="row mt-5">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="intro-info-content text-center">
                            <h1 class="display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">NATALIE <a class="indigo-text font-bold">SMITH</a></h1>
                            <h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">Web developer & graphic designer</h5>
                            <a class="btn btn-light-blue btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-indigo btn-lg wow fadeIn" data-wow-delay="0.4s">About me</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12 text-center mb-3">
    
            <h1 class="font-bold light-blue-text my-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
            <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    
        </div>
        <!--Grid column-->
    
    </div>
    <!--Grid row-->

</div>

<div class="view intro hm-white-light jarallax" data-jarallax-video="https://vimeo.com/groups/freehd/videos/153749651" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%30.jpg);">
    <div class="full-bg-img">
        <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 700px">
                <div class="row mt-5">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="intro-info-content text-center">
                            <h1 class="display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">ANNA'S <a class="white-text font-bold">BLOG</a></h1>
                            <h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">Interior designer & Nature lover</h5>
                            <a class="btn btn-elegant btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-outline-white btn-lg wow fadeIn" data-wow-delay="0.4s">About me</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12 text-center my-3">
    
            <h1 class="font-bold grey-text mb-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
            <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    
        </div>
        <!--Grid column-->
    
    </div>
    <!--Grid row-->

</div>

<div class="view intro hm-pink-slight jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/food2.jpg);">
    <div class="full-bg-img">
        
    </div>
</div>

<div class="view intro hm-purple-slight jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg);">
    <div class="full-bg-img">
        <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 700px">
                <div class="row mt-5">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="intro-info-content text-center">
                            <h1 class="display-1 white-text mb-2 wow fadeInDown" data-wow-delay="0.3s">Welcome on my page!</h1>
                            <h4 class="mb-3 mt-1 white-text font-bold wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet</h4>
                            <a class="btn btn-pink wow fadeIn" data-wow-delay="0.4s">Read more</a> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12 text-center my-3">
    
            <h1 class="font-bold pink-text mb-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
            <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    
        </div>
        <!--Grid column-->
    
    </div>
    <!--Grid row-->

</div>