DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
01-09-2016

En esta entrada veremos como generar otra animación con anime.js en la cual se aplican varias transformaciones 3D; anteriormente vimos como crear la siguiente animación:

<span class=anime.js para realizar animaciones con JavaScript" title="anime.js para realizar animaciones con JavaScript">

Ahora veremos cómo crear una animación como la mostraba con imagen promocional de esta entrada; este experimento también fue tomado de la página oficial: CodePen; ahora se procede a explicar su composición y ver lo sencillo que resulta emplear la librería anime.js para realizar animaciones:

Definiendo el HTML y CSS

Como HTML base tenemos una simple sección:

<section class="wrapper"></section>

Y cómo CSS indicamos el tamaño total del contenedor anteriormente mostrado como HTML base:

  .wrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 800px;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }

Y el CSS para cada uno de los rectángulos contenidos dentro del tag anterior:

  div {
    width: 10vw;
    height: 10vh;
  }

Usando la librería anima.js - definiendo el JavaScript

Como en el ejemplo anterior, se emplea el JavaScript para construir los distintos componentes del contenedor:

    function createEl(className) {
      var el = document.createElement('div');
      el.classList.add(className);
      wrapperEl.appendChild(el);
    }

    for (var i = 0; i 

Y la función encargada de realizar la animación, lo cual viene siendo la sección en donde empleamos la librería anime.js:

    anime({
      targets: 'div',
      translateZ: 720,
      rotateX: 180,
      rotateY: 180,
      delay: function(el, i) {
        return i * 5;
      },
      loop: true,
      direction: 'alternate',
      easing: 'easeOutQuad',
    });

Como punto interesante tenemos el valor de la propiedad translateZ el cual traslada en el eje de las Z todos los recuadros anteriores dando como resultado la sensación de que "aumentan" de tamaño dichos contenedores, esto en conjunto con las rotaciones dan un resultado interesante que puede ser empleado en aplicaciones web como proceso de selección de un elemento.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Esfera de agrupación

Esfera de agrupación

Corazón con CSS

Corazón con CSS

Pulpo animado con solo CSS

Pulpo animado con solo CSS

Algunos artículos que te pueden interesar

¿Cómo usar y configurar un ajax con jQuery?

¿Cómo usar y configurar un ajax con jQuery?

AJAX es una tecnología que permite crear aplicaciones que mantienen una comunicación asíncrona con el servidor.

Andrés Cruz 28-08-2014

Elementos reversibles con estilo 3D en CSS

Elementos reversibles con estilo 3D en CSS

En esta entrada veremos como hacer que un elemento sea reversible empleando las animaciones y transiciones en CSS.

Andrés Cruz 30-03-2015

Creando una caja de luz difuminada con CSS

Creando una caja de luz difuminada con CSS

Se explica cómo crear una caja de luz difuminada en fondo y se presentan algunas variantes del experimento.

Andrés Cruz 11-05-2017