jd-zoom

Zoom-in for images.

Demo

Look here and here

Cool, uh? 😎

Features

Simple
AN AWESOME ZOOM-IN ANIMATION THAT MAKES SENSE.
Minimal DOM requirements. Just your image and a container.
Relies on CSS transform functions — scale and translate.
Because of that, it is smooth af.
Scales the image up to 100% their resolution, display scaling aware. Depends on the window width and height. Change that part of the code if you need a different behaviour.
Super high resolution screen or image already big enough? Forces the image to upscale to a fallback amount (x1.4 default).

Caveats

No mobile support. Only desktop. At least for now. I may have to use hammer.js to make it work.
No configuration. Change parts of the code to suit your need. It should be pretty straightforward anyways, as the code is well commented

jd because I was listening to Joy Division when I thought about the name.

How to use it

Include the stylesheet in the head, or copy it to your .css

<link rel="stylesheet" href="jd-zoom.css">

Place the attribute jd-zoom in a simple container for the image. And the attribute jd-zoom-image for the image to be zoomed.

<div jd-zoom>
  <img jd-zoom-image src="https://images.unsplash.com/photo-1657735794570-c1fa44886b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
</div>

Call the script at the end of body tag

<script defer src="jd-zoom.js"></script>
</body>

That's it.

The code at the end of jd-zoom.js is responsible to make events for each jd-zoom found in the DOM.

const jdZoomContainers = document.querySelectorAll("[jd-zoom]")
for (const element of jdZoomContainers) {
  jdZoomEnabler(element)
}

['scroll', 'resize'].forEach(evt =>
  window.addEventListener(evt, e => {
    for (const element of jdZoomContainers) {
      jdZoomOut(element)
    }
  })
)

Configuration

No configuration available for now. Code is well documented and simple enough that making changes should be easy.

Tips

As you can see, it also listens for scroll and resize window events, so it will zoom-out the image if these events happen. Feel free to change any of these to your needs.
If there's a change in the size or position of the elements while the zoom effect is active, it won't dynamically update. The user needs to zoom-out and zoom-in again to recalculate the values. This is a extremely specific use-case which I don't really know how it could even work from a UX perspective, but you can make it dynamic if you wish. The function calculateConstants() should be called inside moveImg() for it to work. Beware of possible performance hits.
In jd-zoom.css you can comment out the line overflow: hidden to set the zoom effect free from the boundaries of the container. It can look cool. I use it in martyr— 🙃