• Stars
    star
    99
  • Rank 343,315 (Top 7 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created over 10 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create a Subtle Zoom Animation on Images while Scrolling

#Zoom Scroller by Pete R. Zoom Scroller let you add a smooth subtle zoom in/out animation to images when scrolling Created by Pete R., Founder of Travelistly and BucketListly

License: Attribution-ShareAlike 4.0 International

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE.

Basic Usage

To use this plugin, simply include the latest jQuery library (preferably version 2.0.0 or higher) together with jquery.zoom-scroller.js into your document's <head> follow by an HTML markup as follows:

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

Make sure that the image you want to zoom is wrapped within a container that will be used to call the jQuery function.

Once you got your images setup, call the function as shown below:

 $(".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.
 });

With the default setup above, your images will now have a very subtle, smooth zoom out animation as you scroll through the page.

Callbacks

You can use this callback to perform actions during the animation.

onZoom(element, zoomType)

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 {
        ..
      }
    }
  });

beforeZoom(element, zoomType)

Same variables available as the onZoom callbacks but this will execute before the animation started 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 started instead:

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

Now you can create a smooth subtle animation on images you wish to grab viewers attention.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

  • Tutorial (Coming Soon)

More Repositories

1

onepage-scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
JavaScript
9,544
star
2

purejs-onepage-scroll

The javascript version of the infamous jQuery One Page Scroll without relying on jQuery.
JavaScript
770
star
3

simple-text-rotator

Add a super simple rotating text to your website with little to no markup
HTML
748
star
4

loading-bar

Add a Youtube-like loading bar to all your ajax links
HTML
661
star
5

label_better

Label your form input like a boss with beautiful animation and without taking up space
JavaScript
517
star
6

flat-shadow

A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
HTML
483
star
7

panorama_viewer

Embed panorama photos on your website with Panorama Viewer
JavaScript
473
star
8

wheel-menu

Add a fully customisable Path-like wheel menu button to your website
HTML
403
star
9

interactive_3d

Create a 3D interactive object using images and one simple JS call
JavaScript
378
star
10

notify-better

An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications
JavaScript
373
star
11

tiltedpage_scroll

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
JavaScript
323
star
12

autofix_anything

Fix position of anything on your website automatically with one js call
JavaScript
314
star
13

interactive_bg

Create an interactive moving background/object that reacts to viewer's cursor
JavaScript
232
star
14

shuffle-images

The Simplest Way to shuffle through images in a Creative Way
JavaScript
212
star
15

tip_cards

Create a card layout that let your user flip through it like you see on Google Tips
JavaScript
211
star
16

zepto-onepage-scroll

Zepto One Page Scroll is the javascript version of the infamous jQuery One Page Scroll.
JavaScript
186
star
17

adaptive-modal

Create modal windows that can be morphed from anything
JavaScript
168
star
18

fancy-scroll

Add Overflow Scroll Effect like on iOS/Android but for your website
HTML
157
star
19

immersive-slider

Create an immersive slider that changes the whole container to match the viewing slide
JavaScript
138
star
20

square_menu

Create a Square-like Menu Animation for Website using jQuery and CSS3
CSS
124
star
21

fly_sidemenu

Recreate an Airbnb iOS7 App Menu Animation using CSS3 and jQuery
CSS
113
star
22

flipout_cards

Create a Dynamic Multi Level Flip Out Cards
CSS
110
star
23

fullpage-menu

Create a Full Page, Fully CSS3 Animated Menu for your Navigation with Full Page Menu
CSS
106
star
24

jumpto

A plugin that let you create a smooth jump to sub navigational menu in one JS call
JavaScript
105
star
25

let_it_snow

Create and Control a Festive Snow on Your Website using HTML5 Canvas
JavaScript
92
star
26

endpage-box

A plugin that let you add an end page box that will display when scrolled to the bottom.
HTML
86
star
27

flipping_gallery

Create a simple but beautiful 3D flipping gallery with on JS call
JavaScript
79
star
28

subscribe-better

Create a better, highly customizable subscription modal or newsletter signup window with jQuery Subscribe Better
CSS
74
star
29

planetarium

Construct an Interactive Planet and Build the Universe on your website
JavaScript
58
star
30

flipping_text

Create a ticking text intro animation for your typography.
JavaScript
55
star
31

fullpagenav

Create a fully responsive and dynamic full page navigation with one JS call
JavaScript
35
star
32

parallax-scroller

Scroll through lists with a smooth parallax effect
JavaScript
27
star
33

flatline_icon_free

180+ high quality & minimal icons webfont for Bootstrap Framework
26
star
34

endpage_next

Navigate without moving your mouse. Pull to refresh/Hold to go next functionality on the web,
JavaScript
12
star