Scrolla – Reveal Animations When Scrolling

scrolla-featured

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

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:

Related post:  RoyalSlider – Touch-Enabled jQuery Image Gallery

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>

DEMODOWNLOAD

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close