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.
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]
How to disable all input controls inside a form using jQuery
Use the jQuery prop() method...Laravel Eloquent Queries with Eager Loading
When you make relationship in Laravel el...How to remove white spaces from a string in jQuery
Use the jQuery $.trim() function You...Jupyter Notebook installation in Ubuntu
In this article, we will share with you...How to sort an associative array by key in PHP
Use the PHP ksort() and k...