Scrolla jQuery plugin for reveal animations when scrolling

444 views 6 months ago jQuery

If your website contains lots of images, then this plugin is perfect to display images fancy way.

Scrolla is a simple lightweight jQuery plugin by Max Zhurkin to use which will create a fancy scroll reveal effect to image galleries. Scrolla use animate.css and jQuery plugin.

You can use Scrolla plugin in below four simple steps:

1. 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.

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

2. Donwload Scrolla plugin from the GitHub and now add jQuery and Scrolla plugin js files before </body> tag.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/dist/js/jquery-scrolla.min.js"></script>

3. Add the animate class to the element 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>

3. Initialise scrolla plugin with below code.

<script type="javascript/text">
    $(document).ready(function() {
        $('.animate').scrolla();
    }
</script>

Scrolla provides few setups through adding properties.

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

I hope you would like this article.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]