Image Loupe JS

Description coming soon.

 

Demo

https://alecrios.github.io/image-loupe-js/

 

Features

• Lightweight
• No dependencies
• Performant
  • Animates only transform and opacity
  • Utilizes the requestAnimationFrame API
• Customizable
  • Very minimal CSS
  • Easy to change loupe size, border, shadow, etc

 

Development

This project is still under development and not production-ready. It is written in ES2015, so it needs to be compiled with something like Babel for better browser support.

 

Usage

1. Include image-loupe.css.

<link href="css/image-loupe.css" rel="stylesheet">

2. Include image-loupe.js.

<script src="js/image-loupe.js"></script>

3. Add the data-loupe-image attribute to an <img>.

<img src="img/fruit.jpg" data-loupe-image>