@limetech/lime-elements
Version:
114 lines • 3.59 kB
TypeScript
/**
* Utility functions for creating a 3D tilt hover effect.
*
* This module provides functions to enable a 3D tilt effect for consumer components,
* allowing elements to visually follow the cursor's position and tilt towards it.
* It also includes a glow effect for added interactivity.
*
* ## Usage
*
* 1. **Import the utility**:
*
* ```tsx
* import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';
* ```
*
* 2. **Define the structure of your component**:
*
* To enable the 3D tilt effect, the host element of your component should act as
* the "parent-of-the-3d-element", and a nested child element should act as
* "the-3d-element" (the interactive element). This structure is necessary
* to properly isolate the 3D transformations and maintain visual fidelity.
*
* For example:
*
* ```tsx
* <Host>
* <section class="the-3d-element">
* <!-- Your component content -->
* </section>
* </Host>
* ```
*
* Apply the required SCSS mixins to these elements:
*
* - **On the host element**:
* ```scss
* @include parent-of-the-3d-element;
* ```
* - **On the nested "interactive" element**:
* ```scss
* @include the-3d-element;
* ```
* - **For clickable interactive elements**:
* ```scss
* @include the-3d-element--clickable;
* ```
* - **For the glow effect**:
* Add a `<limel-3d-hover-effect-glow />` inside "the-3d-element".
*
* 3. **Initialize in your component**:
*
* Use `getMouseEventHandlers()` to attach the required mouse event listeners
* to the "interactive element" (`the-3d-element`). For example:
*
* ```tsx
* @Element()
* private host: HTMLElement;
*
* private handleMouseEnter: () => void;
* private handleMouseLeave: () => void;
*
* public componentWillLoad() {
* const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(
* this.host.querySelector('.the-3d-element'),
* );
* this.handleMouseEnter = handleMouseEnter;
* this.handleMouseLeave = handleMouseLeave;
* }
* ```
*
* 4. **Attach event handlers in your render method**:
*
* ```tsx
* public render() {
* return (
* <Host>
* <section
* class="the-3d-element"
* onMouseEnter={this.handleMouseEnter}
* onMouseLeave={this.handleMouseLeave}
* >
* <!-- Your component content -->
* <div class="limel-3d-hover-effect-glow" />
* </section>
* </Host>
* );
* }
* ```
*
* ## Styling Notes
*
* - The host element (`parent-of-the-3d-element`) must have these styles:
* ```scss
* @include parent-of-the-3d-element;
* ```
* - The nested "interactive element" (`the-3d-element`) should have:
* ```scss
* @include the-3d-element;
* ```
* - For components like Card or Info Tile, using a nested "interactive element"
* is the only way to achieve the 3D effect, as the host serves as the parent
* and must maintain proper isolation for the effect.
*/
export declare const MOUSE_SCALE_FACTOR = 100;
export declare const SCALING_BASE = 50;
export declare const ROTATION_DEGREE_MULTIPLIER = 1.6;
export declare const GLOW_POSITION_MULTIPLIER = 2;
export declare const CENTER_DIVISOR = 2;
export declare const tiltFollowingTheCursor: (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => void;
export declare const getMouseEventHandlers: (element: HTMLElement) => {
handleMouseEnter: () => void;
handleMouseLeave: () => void;
};
//# sourceMappingURL=3d-tilt-hover-effect.d.ts.map