micku7zu/vanilla-tilt.js
Vanilla Tilt.js
vanilla-tilt.js es una biblioteca de inclinación 3D en JavaScript utilizada para animar elementos web en el espacio 3D. Funciona como una herramienta de animación de interfaz de usuario interactiva que impulsa la rotación y el escalado de elementos basados en el movimiento del ratón o la orientación del dispositivo móvil.
La biblioteca se distingue por la simulación de superficies físicas, utilizando un efecto de brillo dinámico para crear reflejos brillantes que se desplazan con el cursor. También incluye un sistema de profundidad de paralaje que desplaza los elementos internos en relación con un contenedor padre para simular capas físicas y espacio tridimensional.
El kit de herramientas cubre una amplia gama de capacidades de interacción y animación, incluyendo rotación basada en giroscopio para dispositivos móviles, comportamientos de inclinación configurables y monitoreo del estado de rotación. Proporciona callbacks y eventos personalizados que emiten los grados y porcentajes de rotación actuales a oyentes externos.
Features
- Interactive 3D UI Elements - Adds 3D rotation and movement to web elements to make them react to user mouse movements.
- Sensor-Based Rotations - Rotates components based on the physical orientation of a mobile device using device orientation sensors.
- Input-to-Rotation Mapping - Calculates 3D rotation angles by mapping cursor coordinates relative to the element center.
- JavaScript Animation Libraries - Provides a lightweight JavaScript library for implementing smooth 3D tilt and rotation animations.
- Surface Glare Effects - Simulates physical surface reflections with a dynamic light glare that shifts based on cursor position.
- Parallax Layering Offsets - Creates a sense of physical depth by offsetting inner elements relative to the parent container's movement.
- Mobile Motion Effects - Creates visual effects on mobile devices that shift based on the physical orientation of the phone.
- 3D Perspective Transforms - Implements 3D perspective and rotation on elements using CSS transforms to create a tilt effect.
- 3D Transform Animations - Animates elements in 3D space by adjusting CSS rotation axes based on mouse movement.
- Gyroscope-Driven Interfaces - Allows web elements to react to the physical tilt and rotation of a mobile device.
- Device Orientation Controllers - Processes gyroscope sensor data to tilt web elements according to the physical angle of a mobile device.
- Animated UI Components - Provides a toolset for adding depth and movement to web components through rotation and scale effects.
- Glossy Surface Reflections - Simulates surface reflections by shifting a semi-transparent glare overlay based on tilt and mouse position.
- UI Gloss Simulations - Adds a glossy light reflection to elements that shifts realistically as the object tilts.
- Glare Effects - Simulates glossy physical surfaces by reflecting light based on cursor position using a visual overlay.
- Parallax Effects - Layers elements within a container to create a sense of three dimensional space and physical depth.
