Create a Subtle Zoom Animation on Images while Scrolling with jQuery.Zoom-Scroller.js

Create a Subtle Zoom Animation on Images while Scrolling with jQuery.Zoom-Scroller.js

Another week, another free plugin from me. When it comes to designing a website, it’s all about grabbing users’ attention so that they will stay longer and explore more. There are several ways to do this, from creating a beautiful parallax effect to animating all kinds of elements on the site.

Today, I have decided to experiment on this and have combined animation with images and scrolling and here’s the result. Introducing jQuery Zoom Scroller, a small plugin that will let you add a smooth, subtle zoom effect to images while scrolling. The idea is to grab users’ attention when they scroll down without being too obtrusive.

Note: This plugin has been tested on Chrome, Firefox, Safari, on desktop and mobile.

Create a Subtle Zoom Animation on Images while Scrolling with jQuery.Zoom-Scroller.js

[tut demo=”” download=””]

How to Use jQuery.Zoom-Scroller.js

How does this work?

The concept is really simple. The subtle zoom animation should be animated when the element is visible in the viewport through scrolling. Developers need to be able to control the animation with ease and the plugin should provided several callbacks before, after and during animation so that anyone can expand its functionalities to fit their needs.

All I had to do with the plugin was detect when each element enters the viewport, and add associated CSS3 animation to the element as it enters the window. When it is no longer visible, the CSS3 animation is removed automatically. The CSS3 I used is transform with scale set to values you specified when calling the function.

The way the plugin detects each element is by looping through all elements while scrolling and if the top portion of the element is visible at the bottom of the viewport, then execute the “in” animation. If the bottom part of the element is no longer visible at the top of the viewport, then execute the zoom “out” animation.

That’s all for the concept and the implementation of the plugin. Let’s see how you can integrate this into your projects.


First and foremost, make sure you’ve included the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jquery.zoom-scroller.js which can be found here, into your document’s <head>.

Now prepare your HTML with the images you wish to animate, wrapped within a container as shown below:


  <div class="zoom-images">
    <img src="images/1.jpg">
  <div class="zoom-images">
    <img src="images/2.jpg">

You need to wrap your images in a container to prevent overflow when animating.

Once that is done, call the function on the container (not the image itself) like this:


   initZoom: 1.15,
   zoom: 1, 
   animationTime: 2000,  
   easing: "ease",  
   onZoom: function(el, zoomType) {},
   beforeZoom: function(el, zoomType) {},
   afterZoom: function(el, zoomType) {},
   offsetTop: 0, 
   offsetBottom: 200,

With the default options above, your images will smoothly zoom out as you scroll down the page. To play around with this, here are all the options available for you to experiment on:

  • initZoom: This option lets you define the initial scale of the image before it starts animating. 1 is the default normal size of the image. Increase/decrease this value by decimal points to get the desired zoom. (2 is equivalent to 200% width x height). The default value is 1.15.
  • zoom: This is the option that determines whether to zoom in or out when animating. If you want to zoom in, make sure this value is more than initZoom. If not, then this value must be lower than initZoom. The default value is 1.
  • animationTime: You can define how long the animation will take place with this option. The option accept milliseconds. The default value is 2000.
  • easing: You can set the animation easing here. The option accepts CSS3 easing methods such as “linear”, “ease”, “ease-in”, “ease-out”, “ease-in-out”, or “cubic-bezier”, etc. The default value is “ease”.
  • onZoom: This is the callback that will let you execute any function during the animation. The default value is null.
  • beforeZoom: This is the callback that will let you execute any function before the animation. The default value is null.
  • afterZoom: This is the callback that will let you execute any function after the animation. The default value is null.
  • offsetTop: This option will let you define the top offset before the animation is initiated. The default value 0 so the animation will initiate right when 1 pixel of the element appears from the top of the viewport.
  • offsetBottom: Last but not least, this option will let you define the bottom offset before the animation is initiated. The default value is 200 so the animation will initiate only when at least 200 pixels of the element are visible from the bottom of the viewport.


As mentioned earlier, it is important for this plugin to have callbacks so you can extend its functionalities to match your needs. Here are several callbacks I have put in place:

onZoom(element, zoomType)
This callback gets called when the zoom animation is ongoing. The “element” variable is the current element being animated and “zoomType” variable is the type of zoom the animation is. Values returned are “in” or “out” which means the element is entering the viewport and exiting the viewport respectively.

    onZoom: function(element, zoomType) {
      if (zoomType == "in") {
      } else {

beforeZoom(element, zoomType)
Same variables available as the onZoom callbacks but this will execute before the animation starts instead:

    beforeZoom: function(element, zoomType) {

afterZoom(element, zoomType)
Same variables available as the onZoom callbacks but this will execute after the animation starts instead:

    afterZoom: function(element, zoomType) {

[tut demo=”” download=””]


And that’s all for the options available on jQuery Zoom Scroller plugin. I hope you like this free plugin and if you have any questions or suggestions based on this plugin, please do let me know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of and Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.