Biblioteca de animaciones DOM Smooth JavaScript-terciopelo

Vista prévia

Descripción

velvet is a small (~6kb minified) JavaScript animation library that preferentially uses Web Animations API to create smooth, accelerated animations on DOM elements.

Características

• Permite reproducir, pausar y revertir la animación.
• Compatible con animaciones CSS3 (solo transformaciones y opacidad).
• Funciones de devolución de llamada.
• Very fast and easy to use.

¿Cómo funciona?

Sólo tiene que importar la biblioteca Velvet. js en la página HTML y estamos listos para ir.

<script src="/path/to/velvet.min.js"></script>

Cree una animación en el elemento de destino ' div '.

var div = velvet(document.getElementById('div'));
div.weave({ translateX: 100 }, { durarion: 400 });

Personaliza la animación con estilos y opciones de CSS3.

var w = v.weave({


translateX: 100,

// (px)


translateY: 200,

// (px)


translateZ: 300,

// (px) Not supported in IE9


scale: 1.5,

 // Equivalent to { scaleX: 1.5, scaleY: 1.5 }


scaleX: 2,


scaleY: 2,


scaleZ: 2,


// Not supported in IE9


rotate: 30,

 // (deg) Equivalent to { rotateZ: 30 }


rotateX: 45,

// (deg) Not supported in IE9


rotateY: 60,

// (deg) Not supported in IE9


rotateZ: 30,

// (deg) Not supported in IE9


skewX: 45,


// (deg)


skewY: 45,


// (deg)


perspective: 400,
 // (px)


opacity: 0.5
}, {


delay: 1000,

// (ms)


durarion: 400,
// (ms)


easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'


oncancel: function () {




// This is called when the animation is canceled.


},


onfinish: function () {




// This is called when the animation is finished.


}
});

Crea una animación distinta de la transformación y opacidad de CSS3.

// t.weave(from, to, options, cb)
var w = t.weave([0], [200], {


delay: 1000,

// (ms)


duration: 400,
// (ms)


easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'


oncancel: function () {




// This is called when the animation is canceled.


},


onfinish: function () {




// This is called when the animation is finished.


}
}, function (values) {


// The scroll position will transition from 0px to 200px.


window.scrollTo(0, values[0]);
});

API methods.

// pauses the animation.
w.pause()

// resumes the paused animation, or replays the stopped animation.
w.play()

// goes to the end position of the animation, and stops.
w.finish()

// goes back to the start position of the animation, and stops.
w.cancel()

// reverses the current play direction, and starts to play the animation.
w.reverse()

// returns current play direction. (1: forward direction, -1: backward direction)
w.direction()

Registro de cambios

08/18/2018

• separado de Bezier-Easing del módulo principal