JavaScript: Ramjet transforma elementos HTML

Las transformaciones y animaciones se utilizan en cada vez más sitios web debido a CSS3 y HTML5. La biblioteca JavaScript Ramjet usa opciones CSS3 y le permite transformar cualquier elemento HTML en uno diferente.

Efecto simple con gran impacto

Básicamente, el efecto de transformación utilizado por estatorreactor es simple. Tome dos elementos HTML. Se pueden combinar imágenes, textos y gráficos SVG, y la posición y el tamaño de los elementos tampoco importan. Una simple invocación de JavaScript es lo que hace que el primer elemento se transforme en el segundo a través de la animación.

Ejemplo de una animación de transformación conocida desde iOS

Aquí, el tamaño y la posición del primer elemento coinciden con el segundo. Al mismo tiempo, el primer elemento se desvanece y el segundo se desvanece. Con una animación rápida, crea un efecto de transformación impresionante. Cuanto mayor es la duración de la animación, más obvia es la forma de transformación, lo que riega un poco el «efecto sorpresa».

Ramjet: direccionamiento y transformación de elementos mediante identificación

Ramjet es muy fácil de usar. Una vez que la biblioteca de JavaScript se implementa de la forma habitual, ambos elementos HTML que desea transformar se pueden direccionar a través de su ID.

ramjet.transform(elementA, elementB);

En el ejemplo, un elemento con el ID «elementA» se transforma en el elemento con el ID «elementB». En esta variante simple, ambos elementos de salida permanecen visibles como tales.

Si desea que el segundo elemento aparezca durante la transformación, haciendo que el primer elemento se desvanezca, debe invertir un poco más de JavaScript en el efecto.

elementA.style.opacity = 0;

ramjet.transform(elementA, elementB, {
  done: function () {
    elementB.style.opacity = 1;
  }
});

Para este ejemplo, el segundo elemento («elementoB») debe estar oculto. Para hacerlo, puede establecer su visibilidad en cero (utilizando el atributo CSS «opacidad»). Después de eso, el primer elemento («elementA») se oculta una vez que comienza la transformación. A continuación, activamos la transformación a través de «ramjet.transform ()», transfiriendo los dos ID («elementoA» y «elementoB»). Durante la animación, los elementos de salida ya no son visibles.

Curso de la animación del elemento A al elemento B

El parámetro «hecho» hace que se ejecute una función tan pronto como se complete la transformación. Esto asegura que el segundo elemento sea visible al final de la animación.

Parámetros adicionales

Aparte del parámetro «hecho», hay otras formas de definir la transición. Por ejemplo, «duración» le permite determinar la duración de la animación. Además de eso, también hay «suavizado», que le da la opción de elegir un método de suavizado para acelerar o ralentizar la animación.

ramjet.transform(elementA, elementB, {
  duration: 5000,
  easing: ramjet.easeIn
});

Si bien «ramjet.linear» es el método de aceleración estándar, también existen «ramjet.easeIn», «ramjet.easeOut» y «ramjet.easeInOut», todos los cuales le brindan diferentes efectos de animación.

En lugar de hacer que los elementos sean invisibles a través de «style.opacity», también existen métodos alternativos con «ramjet.hide ()» y «ramjet.show ()». Estos también establecen el atributo «opacidad» en 0 o 1, respectivamente.

Ramjet: soporte de navegador

Ramjet se ejecuta en todos los navegadores modernos como Chrome y Firefox. La biblioteca también funciona en Internet Explorer a partir de la versión 9. Ramjet está disponible bajo la licencia MIT y, por lo tanto, es de uso gratuito para proyectos comerciales y privados por igual.

(dpe)