jQuery Plugin For Creating Image Zoom Effects On Scroll - Zoom Scroller

Zoom Scroller is a small jQuery plugin that creates an image zoom effect when the image appears on the screen. The image will smoothly zooms in/out as you scroll through it creating a very nice subtle animation that grabs attention. Based on CSS3 transitions and transforms.

How to use it:

1. Include jQuery javascript library and the JQuery zoom scroller plugin in the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.zoom-scroller.js"></script>

2. Wrap your image into a container element with a CSS class 'zoom-images'.

<div class="zoom-images"> 

<img src="images/1.jpg"> 


</div>

3. Call the plugin on the container element.

$(document).ready(function(){
$(".zoom-images").zoomScroller(OPTIONS);
});

4. Default options and callbacks.

$(document).ready(function(){
$(".zoom-images").zoomScroller({
initZoom: 1.15,  // This option let you define the initial scale of the image before it starts animating. 1 is normal size. Increase/decrease this value by decimal points to get the zoom you want. (2 is equivalent to 200% width x height). The default value is 1.15.
zoom: 1,// This is the option that determine 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: 2000,// You an define how long the animation will take place here. The option accept milliseconds. The default value is 2000.
easing: "ease",  // This option accept CSS easing options. This allows you to control the easing of the zoom. The default value is "ease".
onZoom: function(el, zoomType) {}, // This is the callback that will let you execute any function during the animation. The default value is null.
beforeZoom: function(el, zoomType) {},// This is the callback that will let you execute any function before the animation. The default value is null.
afterZoom: function(el, zoomType) {}, // This is the callback that will let you execute any function after the animation. The default value is null.
offsetTop: 0, // This allows you to 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: 200,  // This allows you to define the bottom offset before the animation is initiated. The default value 200 so the animation will initiate only when at least 200 pixels of the element are visible from the bottom of the viewport.
});
});

---

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.