Parallax banner
Parallax
Parallax scrolling is let the elements are allowed to move independently by giving a 2D feel.
Parallax scrolling is allow to put an image or video on the background
Certain considerations that you must bear in mind when using parallax on the page
- Loading time: User on the internet have short attention and limited time. Special for the mobile user.You may lose the vistor if take long time to loading the page. Please avoid to
- put mutiple parallax on the same page
- use the large background image
- use the large video
File format recommendations:
- The video will only playing on desktop view ( > 992px). The background will be switch to a image on the mobile and tablet. Video dimension and format: 1280x720 ( aspect ratio is: 16 : 9 ) and mp4
- There is no set image size for parallax section background. The image will cover the area no matter what size. Keep in mind, bigger images will look better on bigger displays, but will also take longer to load.
Check the parallax Demo
Code
<!--Play the video on the background-->
<div class="parallax">
<video class="" loop="" muted="muted" autoplay="">
<source src="{{ video url (e.g. video.mp4) }}" type="video/mp4">
<!--WebM- webvtt ogv-->
</video>
<figure class="mobile-video-background-image {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Backup Image URL (e.g. image.jpg) }}' );"></figure>
<div class="parallax-inner video">
<div class="row">
<!--The content box is placed on the right side-->
<div class="col-12 col-sm-6 offset-sm-6 col-lg-4 offset-lg-8">
<div class="video-body text-right {{ coc-black-opacity | coc-white-opacity }}">
<h1>{{ Title }}
<p class="h3">{{ Subtitle }}</p>
<a href="{{ URL }}" class="cui btn-md primary">{{ Call to action }}<span class="cicon-angle-right right" aria-hidden="true"></span></a>
</div>
</div>
<!--The content box is placed on the left side-->
<div class="col-12 col-sm-6 col-lg-4">
<div class="video-body text-left {{ coc-black-opacity | coc-white-opacity }}">
<h1>{{ Title }}
<p class="h3">{{ Subtitle }}</p>
<a href="{{ URL }}" class="cui btn-md primary">{{ Call to action }}<span class="cicon-angle-right right" aria-hidden="true"></span></a>
</div>
</div>
<!--The content box is placed on the center -->
<div class="col-lg-8 offset-lg-2">
<div class="video-body text-center {{ coc-black-opacity | coc-white-opacity }}">
<h1>{{ Title }}
<p class="h3">{{ Subtitle }}</p>
<a href="{{ URL }}" class="cui btn-md primary">{{ Call to action }}<span class="cicon-angle-right right" aria-hidden="true"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Place the image on the background-->
<div class="parallax">
<figure class="background-image" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></figure>
<div class="parallax-inner">
<div class="row">
<div class="col-12 col-md-4">
<div class="body coc-white-opacity">
<h2>{{ Title }}</h2>
<p>{{ Content }}</p>
<p>
<a href="{{ URL }}" class="cui btn-md primary">{{ Call to action }}<span class="cicon-angle-right right" aria-hidden="true"></span></a>
</p>
</div>
</div>
</div>
</div>
</div>