yangguang314 / enhance.js

Zoom & dynamically crop images. Based on http://github.com/fat/zoom.js by @fat.

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 and object-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