A port of @fat's simple jQuery plugin for image zooming – now with support for object-fit
/object-position
, powered by Velocity.js animations, complete with some pre-defined image cropping classes.
✨ Demo ✨
Differences
- Removes Boostrap dependency
- Adds Velocity.js dependency
- Supports
object-fit
andobject-position
CSS properties - Has some classes to get you started with cropped images
To-Dos
- Consider porting to GSAP?
- Cleanup codebase (in line with zoom.js latest)
- Add optional lazy/preloading if there is a wrapping
<a>
tag to a high-resolution image - Add more robust demo
- Synchronize Velocity.js timing with CSS animation timing
- Clean up code to allow passing a custom selector/attribute for the targeted images
Known Issues (more todos?)
- Causes content reflow for images without (expclitly sized) containers, including floated images
- Doesn’t work on
margin: auto
centered images - Due to animating non-
transform
properties there is more layout/repainting on images that are cropped