Adding an Animated Scroll Effect to your Images

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).

This tutorial provides a simple implementation of a web page with this animated effect you can make your own. Below is the HTML, CSS, and JavaScript required.

Step 1 — index.html

Add the HTML below to your web page

<div class="container-fluid">
   <div class="heading">
      <h1>
         A New Approach to Business
      </h1>
      <p class="lead">
         Companies are looking to do business with other great companies.<br />WebCorpCo theme has what it takes to show the world you mean business.
      </p>
   </div>
   <section>
      <div class="row">
         <div class="col-md-8 col-md-push-4 text-center">
            <div class="featuredImage hiddenImg">
               <i class="fa fa-users"></i>
            </div>
         </div>
         <div class="col-md-4 col-md-pull-8 productFeature">
            <h2>Marketing</h2>
            <p>WebCorpCo is all about making sure your marketing stack is in alignment with your company as well as the customers you serve. There is no 'one size fits all' approach to marketing. Every business is unique, customers are unique, and your marketing should be as well.</p>
         </div>
      </div>
   </section>
   <section>
      <div class="row">
         <div class="col-md-8 col-md-push-4 text-center">
            <div class="featuredImage hiddenImg">
               <i class="fa fa-paint-brush"></i>
            </div>
         </div>
         <div class="col-md-4 col-md-pull-8 productFeature">
            <h2>Design</h2>
            <p>Designs are automatically created to both mimic and improve your existing designs and dynamically A/B tests various designs and layouts until finding the ones with the highest engagement and conversion rate.</p>
         </div>
      </div>
   </section>
   <section>
      <div class="row">
         <div class="col-md-8 col-md-push-4 text-center">
            <div class="featuredImage hiddenImg">
               <i class="fa fa-code"></i>
            </div>
         </div>
         <div class="col-md-4 col-md-pull-8 productFeature">
            <h2>Programming</h2>
            <p>Programming not required. WebCorpCo enables marketers to manage their entire stack in one place without needing the ability to program as all code is automatically written by webcorpco.</p>
         </div>
      </div>
   </section>
   <section>
      <div class="row">
         <div class="col-md-8 col-md-push-4 text-center">
            <div class="featuredImage hiddenImg">
               <i class="fa fa-dollar"></i>
            </div>
         </div>
         <div class="col-md-4 col-md-pull-8 productFeature">
            <h2>Sales</h2>
            <p>Sales is the direct result of marketing and sales data is sometimes even more important than the sales themselves. Why did they buy? What did they buy? When? Who bought? How much did it cost? Then a comparison of sales YTD or Year over Year. This analysis can optimize your ability to sell with WebCorpCo Analytics.</p>
         </div>
      </div>
   </section>
   <section>
      <div class="row">
         <div class="col-md-8 col-md-push-4 text-center">
            <div class="featuredImage hiddenImg">
               <i class="fa fa-support"></i>
            </div>
         </div>
         <div class="col-md-4 col-md-pull-8 productFeature">
            <h2>Support</h2>
            <p>WebCorpCo offers state of the art support and training to enable users to make the most out of the platform and learn all of the functionality under the hood. Training can be "as requested" although there are regular webinars and training courses offered on our website.</p>
         </div>
      </div>
   </section>
</div>

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 page

index.css

Step 3 — scroll.js

Copy and paste the JavaScript below into a new file called scroll.js and include it in your web page

jQuery(document).ready(function() {
        jQuery('.featuredImage').addClass("hiddenImg").viewportChecker({
            classToAdd: 'visibleImg animated fadeInUp', // Class to add to the elements when they are visible
            offset: 100    
           });   
});

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.7/jquery.viewportchecker.min.js"></script>

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!

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.