A interactive component that enables zooming into images, videos and other elements.
motion-sv
Your next camp
See our latest and best camp destinations all across the five continents of the globe.
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
lens.svelte
index.ts
Folder Structure
Folder Structure
Props
Lens
A component for Lens.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | | Content wrapped by the lens (image, video, etc.). |
zoomFactor | number | 1 | The zoom factor of the lens. |
lensSize | number | 100 | The size of the lens (diameter in pixels). |
position | { x: number; y: number } | { x: 0, y: 0 } | The position of the lens (x and y coordinates). |
defaultPosition | { x: number; y: number } | { x: 0, y: 0 } | The default position of the lens. |
isStatic | boolean | false | Whether the lens is static (doesn't follow pointer). |
duration | number | 0.3 | The duration of the animation (seconds). |
lensColor | string | "rgba(255,255,255,0.5)" | The color of the lens overlay. |
ariaLabel | string | "zoom lens" | The aria label of the lens for accessibility. |
class | string | "" | Additional CSS classes to apply to lens container. |