Scrolla - jQuery Plugin for Reveal Animations

Websolutionstuff | Apr-21-2021 | Categories : jQuery

In this tutorial we will see how to use scrolla - jQuery plugin for reveal animations when scrolling a mouse. this jquery plugin is very simple and easy to use for scrolling effect. jQuery scroll plugin is use to to display bunch of images with animation effect on scrolling.

If in your website contains lots of images, then this plugin is perfect to display images in very good way. Scrolla is a simple lightweight jQuery plugin to use which will create a fancy scroll reveal effect to image galleries. Scrolla use animate.css and jQuery plugin.

So, let's start to implement Scrolla - jQuery plugin for reveal animations

Include animate.css

Download the animate.css and include in the <head> tag.

<head>
    <link rel="stylesheet" href="animate.min.css">
</head>

or add it directly through CDN link

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

 

 

Download Scrolla Plugin From The GitHub

In this step download scrolla plugin from github and add jQuery and Scrolla plugin js files before </body> tag.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/dist/js/jquery-scrolla.min.js"></script>

 

Add HTML Code

Add the animate class to the div tag which you want to given animation.

<div 
    class="animate" 
    data-animate="bounceIn" 
    data-duration="1s" 
    data-delay="0.5s" 
    data-offset="100" 
    data-iteration="1">
</div>

 

 

Initialize Scrolla Plugin

 In this step we will Initialize scroll plugin in script tag in footer.

$(document).ready(function(){
    $('.animate').scrolla();
});

 

Custom Settings

 Scrolla plugins also provide some custom settings so if you want to change any settings then you can modified as per your requirements.

$('.animate').scrolla({
    // default
    mobile: false, // disable animation on mobiles
    once: false, // only once animation play on scroll
    animateCssVersion: 4 // used animate.css version (3 or 4)
});

and finally you will get output like below screenshot.

Scrolla - jQuery plugin for reveal animations

Recommended Post
Featured Post
Laravel 8 Artesaos SEOTools Tutorial
Laravel 8 Artesaos SEOTools Tu...

Hello Devs, In this tutorial we will learn how to use SEOTools in laravel 8. we will give you example of se...

Read More

Jun-07-2021

How To Integrate Razorpay Payment Gateway In Laravel 9
How To Integrate Razorpay Paym...

In this article, we see how to integrate razorpay payment gateway in laravel 9. As you all know if you are developi...

Read More

Apr-11-2022

How To Import SQL File Into MySQL Using Command
How To Import SQL File Into My...

In this article, we will see how to import SQL files into MySQL using the command. You can import databases in multiple...

Read More

Nov-10-2022

How to Send E-mail Using Queue in Laravel 7/8
How to Send E-mail Using Queue...

Today I will show you how to send e-mail using queue in laravel 7/8, many times we can see some processes take...

Read More

Oct-30-2020