JS Tutorial
- Overview
- Documents
Zoom Scroller is a jquery plugin that let you create a Subtle Zoom in/out Animation on Images on Scroll.
Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE.
Source: github.com
1. INCLUDE JS FILES
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="zoom-scroller/jquery.zoom-scroller.js"></script>
2. HTML
<body>
..
<div class="zoom-images">
<img src="images/1.jpg">
</div>
<div class="zoom-images">
<img src="images/2.jpg">
</div>
..
</body>
3. JAVASCRIPT
$(".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.
});
4. CALLBACKS
You can use this callback to perform actions during the animation.
This callback gets called during the zoom animation. The "element" variable will let you get the current element that is being animated and "zoomType" variable will let you know whether the animation is caused by elements entering the viewport or exiting the viewport. Values returned are "in" or "out". Here's an example:
$(".zoom-images").zoomScroller({
onZoom: function(element, zoomType) {
if (zoomType == "in") {
..
} else {
..
}
}
});
Same variables available as the onZoom callbacks but this will execute before the animation started instead:
$(".zoom-images").zoomScroller({
beforeZoom: function(element, zoomType) {
..
}
});
Same variables available as the onZoom callbacks but this will execute after the animation started instead:
$(".zoom-images").zoomScroller({
afterZoom: function(element, zoomType) {
..
}
});
