In this tutorial, Solodev will show you how to add an animated scroll effect to your images using CSS and jQuery.
Animated images are more engaging to site visitors than static images. In this tutorial, Solodev will show you how to add an animated scroll effect to your website's images using animate.css and the viewport checker jQuery plugin. This will animate your images to display their full resolution as you scroll, providing an interactive user experience (UX).
Step 1 - index.html
Add the HTML below to your web page
A specific image can be given the animated scroll effect by giving it the class "featuredImage". Additionally, each image is initially given the "hiddenImg" class so that it is not visible upon immediate page load.
Step 2 - index.css
Download the CSS below and include it in your web pageindex.css
Step 3 - scroll.js
The following jQuery will initialize the effect, finding each "featuredImage" class and appending the necessary animation classes.
Step 4 - Add the includes below to your web page
In this article, Solodev showed you how to add an animated scroll effect to your website's images. Swap out the images and copy to make it your own!