Today’s fancy plugin comes from Max Zhurkin and it is a great solution for every web project that requires lots of images to be displayed in an interesting and appealing way.
Scrolla is a lightweight JS plugin is very easy to implement and will create a scroll reveal effect to image galleries. It can be particularly useful for portfolio-based websites.
Scrolla takes advantage of the popular animate.css plugin to add different types of effects for the photo galleries you choose to display.
To give it a try on your websites, follow the three simple steps outlined below.
Step 01
You need to start with the animate.css plugin. If you are not familiar with the plugin, go to animate.css website and download it. Put the animate.min.css in a suitable folder within your project and link it before the ending </head> tag in your HTML document as shown:
<link rel="stylesheet" href="animate.min.css">
Step 02
Include jQuery library and the Scrolla plugin itself just before the ending </body> tag. To download Scrolla, go to its github page and hit the green button to download the zipped folder. You can choose an appropriate for your project jQuery library here, if you have not done it already.
<script src="jquery.min.js"></script> <script src="scrolla.jquery.min.js"></script>
Step 03
Call Scrolla. You can choose include this code snippet again before the ending </body> tag or to create a separate js doc and link it to your HTML document. I prefer to keep my HTML docs neat so I would create an external js file and link it. But it is your choice. Both ways will do the job.
<script>
$('.animate').scrolla();
</script>
Step 04
To create a revealing item, just follow the same structure as the example below:
<div class="animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s" data-offset="100">
Options:
You can also choose not to have this scroll reveal effect on small devices. If that’s the case, you need to update the code as follows:
<script>
$('.animate').scrolla({
mobile: false
});
</script>