Angular Bootstrap Parallax
Angular Parallax - Bootstrap 4 & Material Design
Angular Bootstrap parallax is a design effect visible while scrolling down - background image is moving with a different speed than the foreground content.
Live demoBasic example MDB Pro component
<div class="view intro" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed; height: 1200px;">
<div class="full-bg-img mask rgba-white-light">
<div class="container">
<div class="d-flex align-items-center d-flex justify-content-center" style="height: 1200px">
<div class="row mt-5">
<div class="col-md-12 wow fadeIn mb-3">
<div class="intro-info-content text-center">
<h2 class="h1 display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">CARLA <a class="indigo-text font-bold">SMITH</a></h2>
<h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">Web developer & graphic designer</h5>
<a mdbBtn color="light-blue" size="lg" class="wow fadeIn waves-light" mdbWavesEffect data-wow-delay="0.4s">portfolio</a>
<a mdbBtn color="indigo" size="lg" class="wow fadeIn waves-light" mdbWavesEffect 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-5">
<h2 class="h1 font-bold light-blue-text my-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>
<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" style="background-image: none; z-index: 0; min-height: 700px;">
<div class="full-bg-img mask rgba-white-light">
<div class="container flex-center">
<div class="row mt-5 py-5">
<div class="col-md-12 wow fadeIn mb-3" style="animation-name: none; visibility: visible;">
<div class="text-center">
<h2 class="h1 display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">ANNA'S <a class="white-text font-bold">BLOG</a></h2>
<h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Interior designer & Nature lover</h5>
<a mdbBtn color="elegant" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect data-wow-delay="0.4s">portfolio</a>
<a mdbBtn color="white" outline="true" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect data-wow-delay="0.4s">About me</a>
</div>
</div>
</div>
</div>
</div>
<div class="video-parallax"><video src="https://mdbootstrap.com/img/video/flowers.mp4" frameborder="0" autoplay="" loop=""></video>
</div>
</div>
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12 text-center my-5">
<h2 class="h1 font-bold grey-text mb-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>
<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" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/food2.jpg); background-attachment: fixed; background-size: cover; min-height: 700px">
<div class="full-bg-img mask rgba-pink-slight">
</div>
</div>
<div class="view intro" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg); background-attachment: fixed; min-height: 700px">
<div class="full-bg-img mask rgba-purple-slight">
<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">
<h2 class="h1 display-1 white-text mb-2 wow fadeInDown" data-wow-delay="0.3s">Welcome on my page!</h2>
<h4 class="mb-3 mt-1 white-text font-bold wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet</h4>
<a mdbBtn color="pink" class="wow fadeIn waves-light" mdbWavesEffect 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-5">
<h2 class="h1 font-bold pink-text mb-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>
<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>
Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/angular/7.5.4/index.php on line 143