Jarallax

Adds a semi-transparent overlay over an element.

Plugin Documentation

Usage

JS

copy

<script src="assets/libs/jarallax/dist/jarallax.min.js"></script>

CSS

copy

<script src="assets/libs/jarallax/dist/jarallax.css"></script>

Examples

  1. Background Image

    Perfect solutions at your ideas

    We run all kinds of services to manage business, build a site, and reach your goals with customized bootstrap components.

    copy
    
<div class="jarallax py-10 mb-3 overlay overlay-black overlay-75" data-jarallax data-speed="0.2" style="background-image: url(../html/assets/img/banner/cover-05.jpg);">
    <div class="row align-items-center">
        <div class="col-12">
            <div class=" text-center">
                <h3 class="text-white mb-4">Perfect solutions at your ideas</h3>
                <p class="lead w-md-50 m-auto text-white opacity9">We run all kinds of services to manage business, build a site, and reach your goals with customized bootstrap components.
                </p>
            </div>
        </div>
    </div>
</div>
    You can change the black overlay to primary overlay with replacing class overlay-black to overlay-primary and also you can change the overlay opacity as well with change class overlay-70.
  2. Background Video

    Ready to get started?

    With our themes there are more than 7000
    satisfied customers in the world.

    Get Started
    copy
    
<section class="jarallax overlay overlay-black overlay-70 mx-lg-5" style="background-image: url(assets/img/banner/video-cover.jpg);" data-jarallax data-speed="0.8" data-video-src="https://www.youtube.com/watch?v=pDWUf_g2zsc&list=PLt_GKfBvBhLd59QVK527ofH9zbdwqVtwI&index=6">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8  text-center">

                <h2 class="text-white font-weight-normal">Ready to <strong>get started?</strong></h2>

                <p class="text-white display-7 line-height-sm mb-5">
                    With our themes there are more than <strong class="badge badge-pill badge-warning align-middle text-white display-9 countup">7000</strong>
                    <br> satisfied customers in the world.
                </p>
                <a href="#!" class="btn btn-primary shadow-none mr-3 px-4">Get Started</a>
            </div>

        </div>
    </div>
</section>
    For a background video jarallax-video.js is necessary.
Summary