Medium-Style Image Zoom Animation – ZoomableImage

Category: Image , Javascript , Zoom | January 17, 2024
Author:tahazsh
Views Total:87 views
Official Page:Go to website
Last Update:January 17, 2024
License:

Preview:

Medium-Style Image Zoom Animation – ZoomableImage

Description:

Disrupting reading flow with jarring lightbox popups is a thing of the past. The ZoomableImage is designed to revolutionize image interaction on your website. Inspired by the elegant zoom functionality of Medium.com, this JavaScript library lets visitors explore visuals without compromising the reading experience.

Click an image, and it gracefully expands to full size, taking center stage with a subtle overlay. Need to return to your content? A simple interaction with the page, like scrolling or clicking, will automatically dismiss the overlay, returning the image to its original position.

How to use it:

1. Wrap your image to the <zoomable-image /> custom element.

<zoomable-image>
  <img
    src="1.jpg"
    alt="Image 1"
  />
</zoomable-image>

2. Download and load the main script at the end of the document. That’s it.

<script src="./script.js"></script>

You Might Be Interested In:


Leave a Reply