JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    zoom in on any element in the DOM
    Filed under  › 

    • 🔾37%Overall
    • 1,343
    • 112.6 days
    • 🕩269
    • 👥4

    zoom.js

    Enables a minimal JS API for zooming in on specific points or DOM elements.

    Note that this is only a proof of concept so don't use it for anything important. Does not work in IE, yet.

    Try out the demo.

    Usage

    Zoom in on an element:

      zoom.to({
        element: document.querySelector( 'img' )
      });
    

    Additional options:

      zoom.to({
        element: document.querySelector( 'img' ),
    
        // Amount of empty space around zoomed element
        padding: 20,
    
        // Function to call once zooming completes
        callback: function() { /* ... */ }
      });
    

    Zoom in on a point:

      zoom.to({
        x: 100,
        y: 200,
        width: 300,
        height: 300
      });
    
      zoom.to({
        x: 100,
        y: 200,
        scale: 3
      });
    

    Reset

      zoom.out();
    

    License

    MIT licensed

    Copyright (C) 2017 Hakim El Hattab, http://hakim.se

    Show All