Cree efectos de paralaje interactivos con JavaScript y CSS3-Perspective. js
| Autor: | Leopoldthecoder |
|---|---|
| Views Total: | 2,356 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 7, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Perspective. js es una biblioteca JS libre de dependencias para crear efectos de paralaje interactivos que reaccionan al desplazamiento de la página y al mouse/mover eventos.
Instalación
# Yarn yarn add perspective.js # NPM $ npm install perspective.js
¿Cómo funciona?
Importe la biblioteca de JS de Perspective. js a su proyecto Web.
<script src="perspective.js"></script>
El JavaScript para crear un efecto de desplazamiento de paralaje.
const Scroll = perspective.Scroll
new Scroll('#container', {
stages: [{
id: 'basic',
scrollNumber: 60,
transition: 0,
items: [{
id: 'slow',
effects: [{
property: 'transform',
start: 'translateY(0px)',
end: 'translateY(-50px)'
}]
}, {
id: 'fast',
effects: [{
property: 'transform',
start: 'translateY(0px)',
end: 'translateY(-180px)'
}]
}]
}]
}) El JavaScript para crear un efecto de desplazamiento de paralaje.
const Hover = perspective.Hover
new Hover('#container', {
max: 0,
scale: 1.1,
perspective: 500,
layers: [{
multiple: 0.1,
reverseTranslate: true
}, {
multiple: 0.3,
reverseTranslate: true
}]
})
