Efecto de inclinación de paralaje hover en Vanilla JavaScript-universal-Tilt. js
| Autor: | JB1905 |
|---|---|
| Views Total: | 1,523 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 16, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Esta es la versión de JavaScript Vanilla del universal-Tilt. js plugin de jQuery que hace que sea fácil de implementar efecto de inclinación de paralaje interactivo y táctil en uno o varios elementos que especifique.
Funcionamiento
Cree un elemento en el que desee aplicar el efecto de inclinación de paralaje.
<div class="tilt"> <h2>wikicss.com</h2> </div>
Config el efecto utilizando los siguientes atributos de de datos :
- Data-Shadow: Añadir sombra al elemento
- Data-Shine: añadir brillo al elemento
- Data-Shine-Opacity: nivel de opacidad
- escala de datos: añadir escala al elemento
- datos desactivados: desactive el eje X o Y del elemento
- Data-Reverse: revertir todos los elementos
- Data-Position-base: establecer la posición base
- Data-RESET: desactivar el reinicio de un solo elemento
<div class="tilt" data-shadow="true" data-shine="true" data-shine-opacity="0.5"> <h2>wikicss.com</h2> </div>
Aplique el efecto de paralaje al contenido interno.
h2 {
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
} Cargue el archivo JavaScript principal universal-Tilt. js al final del documento HTML.
<script src="dist/universal-tilt.js"></script>
Inicialice universal-Tilt. js y done.
var myTilts = document.querySelectorAll('.tilt');
var instance = new UniversalTilt(myTilts); También puede onfig el efecto Hover Tilt con las siguientes opciones.
var instance = new UniversalTilt(myTilts,{
position-base: 'element', // element or window
reset: true,
shadow: false,
shadow-save: false,
shine: false,
shine-opacity: 0,
shine-save: false,
max: 35,
perspective: 1000,
scale: 1.0,
disabled: null,
reverse: false,
animation: true
}); Registro de cambios
v1.1.0 (07/16/2018)
- cambió de Gulp a WebPack
- actualizado Babel a V7
- sólo 2 versión Dist
- archivo principal cambiado de universal-Tilt. js a universal-Tilt. min. js
- movido demo a la rama GH-pages
