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.
