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

June 4, 2014 in Tutorials by Pete R.

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=”https://onextrapixel.com/examples/subtle-zoom-animations-on-images” download=”https://onextrapixel.com/examples/subtle-zoom-animations-on-images/subtle-zoom-animations-on-images.zip”]

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.

How-Tos

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:

HTML

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

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:

$(".zoom-images").zoomScroller({
   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.

Callbacks

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.

$(".zoom-images").zoomScroller({
    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:

$(".zoom-images").zoomScroller({
    beforeZoom: function(element, zoomType) {
      ..
    }
 });

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

$(".zoom-images").zoomScroller({
    afterZoom: function(element, zoomType) {
      ..
    }
  });

Conclusion

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.