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.
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>
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 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>
In this step, we will Initialize the scroll plugin in the script tag in the footer.
$(document).ready(function(){
$('.animate').scrolla();
});
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:
You might also like :
- Read Also : How to Get Current URL in Laravel
- Read Also : jQuery Image Magnifier on Mouse Hover
- Read Also : Load More Data in Laravel Using Ajax jQuery
- Read Also : How To Create List And Grid View Using JavaScript
