gijsroge/tilt.js
Tilt.js
tilt.js is a jQuery plugin and mouse-driven animation library used to create 3D parallax effects and interactive rotations on web elements. It functions as a frontend interaction tool that maps cursor coordinates to rotation angles, simulating three-dimensional perspective and spatial depth.
The library features a dynamic glare overlay that simulates light reflection on a surface, mimicking materials such as glass or glossy plastic. It also implements layered parallax offsetting to shift inner elements along different axes, creating a perceived sense of depth as the main container rotates.
The toolset includes capabilities for tracking tilt coordinates, triggering custom actions via lifecycle callbacks, and removing interactivity to reset elements to their original state.
Features
- 3D Perspective Transforms - Creates three-dimensional depth and tilting effects on UI elements using CSS perspective transforms.
- Tilt Effects - Provides a jQuery plugin that implements three-dimensional rotation and depth effects based on mouse movement.
- Glossy Surface Reflections - Simulates light reflecting off a glossy surface to mimic materials like glass or plastic.
- Input-to-Rotation Mapping - Maps cursor coordinates to angular rotation values to drive 3D element movement.
- Glare Effects - Implements visual overlays that simulate light reflections and glare on surfaces.
- Surface Glare Effects - Provides dynamic glossy reflections that simulate light reflecting on a surface based on movement.
- Parallax Layering Offsets - Shifts multiple visual layers at different speeds to create a perceived sense of depth.
- Mouse-Coordinate Animations - Implements utilities for tracking cursor coordinates to trigger dynamic rotation animations on interactive elements.
- Interactive 3D UI Elements - Creates UI components that respond to user input with three-dimensional movement and rotation.
- Parallax Effects - Implements techniques for creating depth and motion in web layouts based on mouse position.
- 3D Depth Effects - Uses 3D rotations and mouse-driven movement to create a sense of spatial depth.
- jQuery Plugins - Ships as a jQuery plugin for easy attachment of 3D interactions to DOM elements.
- Content Card Action Triggers - Triggers custom logic functions when specific interactive content cards are tilted or hovered.
- Interaction Lifecycle Callbacks - Triggers custom functions when users enter, leave, or change the tilt angle of an element.
- UI Rotation Tracking - Exposes current rotation angles and percentages via events to synchronize movements with other elements.
- Z-Axis Depth Overlays - Utilizes Z-axis offsets to make child elements appear to float above the main container.
- Tactile and Visual Feedback - Provides visual feedback through hover effects and light-reflecting glare to simulate physical materials.
