Simular reflexiones basadas en la orientación física del dispositivo-Shiny. js
| Autor: | rikschennink |
|---|---|
| Views Total: | 223 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 17, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Shiny. js es una biblioteca de JavaScript para simular el efecto brillante basado en la orientación física del dispositivo móvil.
La librería aplica reflexiones personalizadas al fondo, borde o texto de un elemento usando Canvas y DeviceOrientationEvent Api.
Funcionamiento
Descargue & Instale el paquete.
# NPM $ npm install @rikschennink/shiny --save
A continuación, incluya el archivo JavaScript Shiny. UMD. js en la página.
<script src="shiny.umd.js"></script>
Aplique los reflejos a los elementos que especifique.
shiny('.element1, #element2, ...'); Config las reflexiones con los siguientes parámetros:
shiny('.element1, #element2, ...',{
// 'background', 'border', or 'text'
type: 'background',
gradient: {
// 'linear' or 'radial'
type: 'radial',
// angle of gradient when type is linear
angle: '110deg',
// flip axis movement
flip: {
x: true,
y: false
},
// colors to use
colors: [
// offset, color, opacity
// ! don't pass rgba or hsla colors, supply the opacity seperatly
[0, '#fff', 1], // white at 0%
[1, '#fff', 0], // to fully transparent white at 100%
]
},
// optional pattern fill
pattern: {
type: 'noise',
opacity: .5
}
});
