Biblioteca de animación JavaScript Performant-Animate Plus

Vista prévia

Descripción

Animate Plus es una biblioteca de JavaScript de rendimiento que le ayuda a animar propiedades CSS y atributos SVG. Animate Plus es ideal para interacciones de IU rápidas, así como para secuencias de animación más largas tanto en el escritorio como en el móvil.

CSS Animation included:

• Opacidad
• translateX
• translateY
• translateZ
• Scalex
• Scaley
• scaleZ
• rotateX
• RotateZ
• rotateZ
• skewX
• skewY
• Perspectiva

Easing types included:

• Lineal
• easeInQuad
• easeInCubic
• easeInQuart
• easeInQuint
• easeInSine
• easeInExpo
• easeInCirc
• easeInElastic
• easeInBack
• easeOutQuad
• easeOutCubic
• easeOutQuart
• easeOutQuint
• easeOutSine
• easeOutExpo
• easeOutCirc
• easeOutElastic
• easeOutBack
• easeOutBounce
• easeInOutQuad
• easeInOutCubic
• easeInOutQuart
• easeInOutQuint
• easeInOutSine
• easeInOutExpo
• easeInOutCirc
• easeInOutElastic
• easeInOutBack

¿Cómo funciona?

Descargue e incluya la biblioteca de Animate más JavaScript en el documento.

<script src=animate.min.js></script>

Animar elementos con parámetros personalizados.

animate({

el: "div",

Opacidad: 0
});

// Or:
var params = new Map();
params.set("el", "div");
params.set("Opacidad", 0);
animate(params);

Todos los parámetros.

animate({

/*

The elements to animate:
CSS selector: "div"
jQuery-like object: $("div")
DOM element: document.querySelector("div")
Array of DOM elements: [document.querySelector("div")]
NodeList or HTMLCollection: document.getElementsByTagName("div")
*/
el: "div",

// The duration of your animation in milliseconds.
duration: 1000,

// The delay before your animation starts in milliseconds.
 delay: 0,

// The easing type.
easing: "easeOutElastic",

// Animation speed
speed: 1

// The animation type.
Opacidad: 0,

// Specifies if your animation should run indefinitely.
loop: false,

// Forces hardware acceleration during an animation if set to true
optimize: false

// The direction of your animation.
 // normal, reverse or alternate
direction: "normal",

// Simulates a motion blur effect.
// e.g. blur: {x: 20, y: 2}
blur: null

// invoked on every frame of the animation
change: null

});

Registro de cambios

v2.1.1 (07/19/2018)

• actualizar