Scrolla - jQuery Plugin for Reveal Animations

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

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

So, let's see page scroll animation jquery, animate on scroll jquery plugin, animation effect on scrolling, jQuery scroll animation, animations on scroll.

Include animate.css

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

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

Also, you can add it directly through the 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 give 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 the scroll plugin in the script tag in the 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 modify them 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)
});

Output:

scrolla_jquery_plugin_for_reveal_animations_output

 


You might also like :


 

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS