/Magnifier-Lens-Effect

A JS magnify lens effect for images. This project allows you to add a magnifying glass effect to any image, complete with adjustable magnification via the scroll wheel.

Primary LanguageJavaScriptMIT LicenseMIT

Magnifier Lens Effect

A JS magnify lens effect for images. This project allows you to add a magnifying glass effect to any image, complete with adjustable magnification via the scroll wheel.

Demo

demo_resized.mp4

Features

  • Smooth magnification effect that follows the mouse cursor.
  • Adjustable lens size and magnification level using the scroll wheel.
  • Easy to integrate and customize.

Installation

  1. Clone the repository:

    git clone https://github.com/bdekraker/magnifier-lens-effect.git

  2. Open the src/index.html file in your browser to see the effect in action.

Usage

  1. Replace your-image.jpg in the assets/ folder with your own image.
  2. Adjust the magnificationFactor and magnifierSize variables in the script.js file to customize the effect.
  3. Include the style.css and script.js files in your project to integrate the magnifier effect.

Customization

  • Magnification Factor: Controls the zoom level of the magnifier lens. Adjust the initial value in script.js.
  • Lens Size: Controls the diameter of the magnifier lens. The size can be adjusted dynamically via the scroll wheel.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please submit a pull request or open an issue to discuss improvements or report bugs.