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.
For detailed instructions, view Solodev's Adding an Animated Scroll Effect to your Images article.
Try out a working example on JSFiddle.
Within this tutorial, 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.
<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>
All required CSS is in animated-scroll-effect.css
The following jQuery will initialize the effect, finding each "featuredImage" class and appending the necessary animation classes.
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
});
});
This tutorial contains the following third party resources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.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>