What is it?

MagicLens is an interactive effect that brings your text to life. By focusing on specific texts of your webpage.

How to set it up?

This element is customized using several attributes that control how MagicLens behaves. Here’s how to set it up:

'data-magnify'. Activates the MagicLens effect.

'data-magnify-scale' (Optional). Adjusts how much the text is magnified. The default value is 1.5. You can increase or decrease this value based on the level of zoom you want.

'data-magnify-size' (Optional). Adjusts the transparency of the magnifying effect. The default is 0.1, making the magnified area slightly transparent for a smooth visual effect.

'data-magnify-mobile-size' (Optional). Sets the size of the magnifying area on mobile devices. The default value is 100px.

'data-magnify-opacity' (Optional). Adjusts the transparency of the magnifying effect. The default is 0.1, making the magnified area slightly transparent for a smooth visual effect.

'data-magnify-distortion' (Optional). Controls the amount of visual distortion applied to the text within the magnified area. The default value is 5, but you can increase or decrease this for a more intense or subtle effect.

'data-magnify-speed' (Optional). Defines the speed of the distortion animation in the magnified area. The default value is 0.001. A higher value will make the animation faster.

'data-magnify-color' (Optional). Sets the color of the text inside the magnified area. By default, the color is set to #ff00ff (a bright pink), but you can customize it.

'data-magnify-background' (Optional). Changes the background color inside the magnifying lens. The default is white, but you can choose any color.

'data-magnify-replace' (Optional). Replaces the original text within the magnified area with new content. This is useful if you want to display different text inside the magnification.

Additional considerations

Mobile Responsiveness. While MagicLens is compatible with mobile devices (via the data-magnify-mobile-size attribute), adjusting the magnifying glass size and distortion level specifically for smaller screens is recommended.

Avoiding Overuse. As with any interactive animation, it's important not to overload the page with too many MagicLens elements. Overuse could distract users or make the page appear cluttered. We recommend using it sparingly to achieve visual impact without sacrificing the overall user experience.

Replacing Words. If you use the data-magnify-replace attribute to replace the text with another word or phrase, it’s ideal to choose a replacement that roughly matches the length and size of the original text. If the replacement text is too long, parts of the word might be cut off or distorted, making it harder to read. A useful trick is to adjust the size of the replacement word until it fits neatly into the available space, ensuring it remains fully visible within the magnified area.