In this tutorial we will see how to use scrolla - jQuery plugin for reveal animations when scrolling a mouse. this jquery plugin is very simple and easy to use for scrolling effect. jQuery scroll plugin is use to to display bunch of images with animation effect on scrolling.
If in your website contains lots of images, then this plugin is perfect to display images in very good way. Scrolla is a simple lightweight jQuery plugin to use which will create a fancy scroll reveal effect to image galleries. Scrolla use animate.css and jQuery plugin.
So, let's start to implement Scrolla - jQuery plugin for reveal animations
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 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 given 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 scroll plugin in script tag in footer.
$(document).ready(function(){
$('.animate').scrolla();
});
Scrolla plugins also provide some custom settings so if you want to change any settings then you can modified 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)
});
and finally you will get output like below screenshot.
In this article, we will see how to send email using markdown mailable laravel 9. we will learn laravel 9 to s...
Aug-05-2022
In this tutorial we will learn php array functions with example. An array is a data structure that contains a group of e...
Apr-23-2021
As a developer who has been deeply immersed in the Laravel ecosystem, I've come to appreciate the power and flexibil...
Oct-30-2023
In this article, we will see how to record and play audio in javascript. Here, we will learn about how to record au...
Feb-20-2023