2023-08-15 11:47:15 +02:00
|
|
|
// Extended Type definitions for vanilla-tilt 1.8.1
|
2019-04-12 20:47:52 +02:00
|
|
|
// Project: https://github.com/micku7zu/vanilla-tilt.js
|
|
|
|
// Definitions by: Livio Brunner <https://github.com/BrunnerLivio>
|
|
|
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Options which configures the tilting
|
|
|
|
*/
|
|
|
|
export interface TiltOptions {
|
|
|
|
/**
|
|
|
|
* Reverse the tilt direction
|
|
|
|
*/
|
|
|
|
reverse?: boolean;
|
|
|
|
/**
|
|
|
|
* Max tilt rotation (degrees)
|
|
|
|
*/
|
|
|
|
max?: number;
|
2019-04-13 09:19:56 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Starting X tilt rotation (degrees)
|
|
|
|
*/
|
|
|
|
startX?: number;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Starting Y tilt rotation (degrees)
|
|
|
|
*/
|
|
|
|
startY?: number;
|
|
|
|
|
2019-04-12 20:47:52 +02:00
|
|
|
/**
|
|
|
|
* Transform perspective, the lower the more extreme the tilt gets.
|
|
|
|
*/
|
|
|
|
perspective?: number;
|
|
|
|
/**
|
|
|
|
* 2 = 200%, 1.5 = 150%, etc..
|
|
|
|
*/
|
|
|
|
scale?: number;
|
|
|
|
/**
|
|
|
|
* Speed of the enter/exit transition
|
|
|
|
*/
|
|
|
|
speed?: number;
|
|
|
|
/**
|
|
|
|
* Set a transition on enter/exit.
|
|
|
|
*/
|
|
|
|
transition?: boolean;
|
|
|
|
/**
|
2022-10-29 19:37:19 +02:00
|
|
|
* What axis should be enabled. Can be "x" or "y".
|
2019-04-12 20:47:52 +02:00
|
|
|
*/
|
|
|
|
axis?: null | "x" | "y";
|
|
|
|
/**
|
|
|
|
* If the tilt effect has to be reset on exit.
|
|
|
|
*/
|
|
|
|
reset?: boolean;
|
2022-12-13 00:08:35 +01:00
|
|
|
/**
|
|
|
|
* Whether the exit reset will go to [0,0] (default) or [startX, startY].
|
|
|
|
*/
|
|
|
|
"reset-to-start"?: boolean;
|
2019-04-12 20:47:52 +02:00
|
|
|
/**
|
|
|
|
* Easing on enter/exit.
|
|
|
|
*/
|
|
|
|
easing?: string;
|
|
|
|
/**
|
|
|
|
* if it should have a "glare" effect
|
|
|
|
*/
|
|
|
|
glare?: boolean;
|
|
|
|
/**
|
|
|
|
* the maximum "glare" opacity
|
|
|
|
*/
|
|
|
|
"max-glare"?: number;
|
|
|
|
/**
|
|
|
|
* false = VanillaTilt creates the glare elements for you, otherwise
|
|
|
|
* you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
|
|
|
|
*/
|
|
|
|
"glare-prerender"?: boolean;
|
|
|
|
|
2019-04-12 22:57:54 +02:00
|
|
|
// If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
|
|
|
|
"full-page-listening"?: boolean;
|
|
|
|
|
2019-04-12 20:47:52 +02:00
|
|
|
// Boolean to enable/disable device orientation detection,
|
|
|
|
gyroscope?: boolean;
|
|
|
|
|
|
|
|
// css-selector or link to HTML-element what will be listen mouse events
|
|
|
|
"mouse-event-element"?: string;
|
|
|
|
|
|
|
|
// This is the bottom limit of the device angle on X axis,
|
|
|
|
// meaning that a device rotated at this angle would tilt the element as if
|
|
|
|
// the mouse was on the left border of the element;
|
|
|
|
gyroscopeMinAngleX?: number
|
|
|
|
|
|
|
|
// This is the top limit of the device angle on X axis,
|
|
|
|
// meaning that a device rotated at this angle would tilt the element as if
|
|
|
|
// the mouse was on the right border of the element;
|
|
|
|
gyroscopeMaxAngleX?: number
|
|
|
|
|
|
|
|
// This is the bottom limit of the device angle on Y axis,
|
|
|
|
// meaning that a device rotated at this angle would tilt the element as if
|
|
|
|
// the mouse was on the top border of the element;
|
|
|
|
gyroscopeMinAngleY?: number
|
|
|
|
|
|
|
|
// This is the top limit of the device angle on Y axis,
|
|
|
|
// meaning that a device rotated at this angle would tilt the element as if
|
|
|
|
// the mouse was on the bottom border of the element;
|
|
|
|
gyroscopeMaxAngleY?: number
|
|
|
|
|
2019-04-12 22:57:54 +02:00
|
|
|
//How many gyroscope moves to decide the starting position.
|
|
|
|
gyroscopeSamples?: number
|
|
|
|
|
2019-04-12 20:47:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface TiltValues {
|
|
|
|
/**
|
|
|
|
* The current tilt on the X axis
|
|
|
|
*/
|
|
|
|
tiltX: number;
|
|
|
|
/**
|
|
|
|
* The current tilt on the Y axis
|
|
|
|
*/
|
|
|
|
tiltY: number;
|
|
|
|
/**
|
|
|
|
* The current percentage on the X axis
|
|
|
|
*/
|
|
|
|
percentageX: number;
|
|
|
|
/**
|
|
|
|
* The current percentage on the Y axis
|
|
|
|
*/
|
|
|
|
percentageY: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface HTMLVanillaTiltElement extends HTMLElement {
|
|
|
|
vanillaTilt: VanillaTilt;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
|
|
|
|
*/
|
|
|
|
export default class VanillaTilt {
|
|
|
|
/**
|
|
|
|
* Creates a new instance of a VanillaTilt element.
|
|
|
|
* @param element The element, which should be a VanillaTilt element
|
|
|
|
* @param settings Settings which configures the element
|
|
|
|
*/
|
|
|
|
constructor(element: HTMLElement, settings?: TiltOptions);
|
|
|
|
/**
|
|
|
|
* Initializes one or multiple elements
|
|
|
|
* @param elements The element, which should tilt
|
|
|
|
* @param settings Settings, which configures the elements
|
|
|
|
*/
|
|
|
|
static init(elements: HTMLElement | HTMLElement[], settings?: TiltOptions): void;
|
|
|
|
/**
|
|
|
|
* Resets the styling
|
|
|
|
*/
|
|
|
|
reset(): void;
|
|
|
|
/**
|
|
|
|
* Get values of instance
|
|
|
|
*/
|
|
|
|
getValues(): TiltValues;
|
|
|
|
/**
|
|
|
|
* Destroys the instance and removes the listeners.
|
|
|
|
*/
|
|
|
|
destroy(): void;
|
|
|
|
/**
|
|
|
|
* Start listening to events
|
|
|
|
*/
|
|
|
|
addEventListeners(): void;
|
|
|
|
/**
|
|
|
|
* Stop listening to events
|
|
|
|
*/
|
|
|
|
removeEventListener(): void;
|
|
|
|
}
|