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

Unavoidable bullet

Unavoidable bullet

Creando un pulso con CSS

Creando un pulso con CSS

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

Recortes de imágenes con HTML5 y jQuery

Recortes de imágenes con HTML5 y jQuery

En este artículo veremos cómo recortar imágenes y guardarlas en nuestra computadora o dispositivo móvil con HTML5 y jQuery.

Andrés Cruz 07-05-2014

Primeros pasos con las animaciones en CSS

Primeros pasos con las animaciones en CSS

En esta nueva entrada sobre CSS daremos los primero pasos con las animaciones en CSS; veremos como los @keyframes de CSS son fundamentales para las animaciones, entre otras cosas.

Andrés Cruz 12-01-2015

¿Cómo obtener la resolución de pantalla con JavaScript?

¿Cómo obtener la resolución de pantalla con JavaScript?

En esta entrada veremos como obtener la resolución de una pantalla con JavaScript nativo.

Andrés Cruz 04-08-2014