Skip to content

Other Effect

Progress Bar

This is the HTML code for progess bar in Homepage 4

<div class="progress-bar bg-encox" role="progressbar" data-cue="progressLeft" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>

You can change the aria-valuenow with your own value.

Here is the code in the script.js for this function. But you might want to avoid editing the code.

/* change value for progress bar to style width*/
if (document.querySelector('.progress_box')) {
    const progressBar = document.querySelector('.progress_box').querySelectorAll('.progress-bar');

    for (i = 0; i < progressBar.length; i++) {
        /*  width based on aria-valuenow */
        const barWidth = progressBar[i].getAttribute('aria-valuenow');
        progressBar[i].style.width = barWidth + "%";
    }
}

Tilting Effect

This is the HTML code for tilting image in Homepage 2

<div class="col-lg-2 stat_img rdn_tilt">

    <div class="counter_boxbg">
        <img src="img/background/11.jpg" alt="image">
    </div>
    <a href="https://www.youtube.com/watch?v=H55W1NhAbQo" class="popup_video">
        <i class="fa fa-play"></i>
    </a>
</div>

The javascript in script.js

/* tilting effect script  */
VanillaTilt.init(document.querySelector(".rdn_tilt"), {
    max: 15,
    speed: 600,
    easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
    glare: false,
});
You can play with max and speed value.

You can visit this plugin site for more info & detail.

Back to top