Cómo animar con la biblioteca MO.JS

Sep 14, 2025
Cómo
Mo.js: animation
[dieciséis] (Crédito de la imagen: Pexels / Frank Kagumba)

Mo.js es una biblioteca de javascript de gráficos de motion gráficos única que no solo facilita la página de animación de la página de pantalla completa, sino que también hace clic en las micro-interacciones para animar, y toneladas de manipulaciones de forma.

Si ha estado siguiendo la escena del diseño web por un tiempo, es probable que se haya encontrado, o quizás interactúe con: una amplia gama de técnicas y bibliotecas de animación. Las tecnologías principales, como CSS, HTML5 y Javascript se están volviendo aún más poderosas, y el soporte del navegador está mejorando con el tiempo. La implicación es que se pueden admitir animaciones web más sofisticadas en todos los dispositivos. Recuerda, si estás construyendo un sitio complejo, tu Alojamiento web El servicio debe ser capaz de apoyar su proyecto.

¿Necesitas alguna inspiración de animación? Aquí hay algunos ejemplos increíbles de la parte superior. Animación CSS para recrear. ¿Quieres construir un sitio sin codificación? Prueba estos Constructores de sitios web .

¿Cómo se puede ayudar Mo.js?

La animación web, como parece, está aquí para quedarse. Sin embargo, una deficiencia con la mayor cantidad de técnicas de animación popular es que se gravan para animar elementos de UI / UX convencionales, tales como presentaciones de diapositivas, botones con pestañas y menús desplegables. Como resultado, usarlos, eventualmente, puede hacer que su sitio sea demasiado familiar y no emocionante.

Mo.js puede ayudar con esto. El uso de la biblioteca ayuda a animar los elementos del sitio no tan ordinarios utilizando sus componentes incorporados, como HTML, la forma, el remolino, estallido y se tambalean. La biblioteca es muy fácil de usar, rápido, retina lista, modular y de código abierto. En este tutorial, se introducen los conceptos básicos del trabajo con MO.JS y se demuestran dos técnicas; explosión y burbuja.

01. Comienza

Comience por crear una carpeta, Mo.js, en su escritorio para almacenar los archivos tutoriales. Cree tres carpetas adicionales dentro de él: CSS para almacenar los archivos de estilo, IMG para imágenes y JS para los archivos JavaScript. Los archivos HTML se almacenarán en la carpeta raíz. (Es posible que desee considerar la copia de seguridad con almacenamiento en la nube ).

02. Crea estructura de página

Abra su editor de código y cree un documento index.html para contener marcas para la página web principal. Comience por crear la estructura básica y dar un título adecuado a la página. 

 & lt; DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; cabeza y gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt; title & gt; blast técnica & lt;
Título y GT;
 & lt; / cabeza y gt;
& lt; cuerpo y gt; & lt; / body & gt;
& lt; / html & gt;

03. Estructura de la página.

El tutorial se divide en dos partes; El primero demuestra la técnica de explosión, mientras que el segundo ilustra el concepto de burbuja. Como resultado, preparamos dos archivos HTML, uno para cada técnica. Para iniciar la técnica de arranque, cree una sección div que contenga el título de la página. Presente la página en su navegador donde debe observar texto sin estilo en la esquina superior izquierda. 

 & lt; Body & GT;
      & lt; div clase = "texto" & gt;
& lt; p & gt; Mo.js Animation & Lt; / P & GT;
     & lt; / DIV & GT;
& lt; / body & gt;

04. Vincular el CSS

Abra su editor de código y cree un archivo styles.css dentro de la carpeta CSS. Cree un enlace a este archivo en su documento HTML agregando este código en la sección de la cabeza, & lt; link rel = "stylesheet" href = "css / styles.csss" & gt; . Dado que no se han agregado estilos, la página se hace referencia como se ilustra en el Paso 3. Alternativamente, dado que el estilo es mínimo, puede optar por usar el estilo en línea combinando el HTML y el CSS.

05. Estilo el fondo.

Mo.js: step 5

[dieciséis] (Crédito de la imagen: Pexels / Frank Kagumba)

A continuación, estamos siendo el fondo agregando una imagen de fondo. Hemos utilizado el fondo de paisaje escénico gratuito por Nikolai Ultang de Pexels. Usted puede descarguelo aqui . Guarde esto (o su propia imagen) dentro de la carpeta IMG. Render la página para mostrar cambios al fondo. 

 Cuerpo, HTML {
  Imagen - Imagen: URL (bg.jpg);
  Tamaño de fondo: cubierta;
  relleno: 0;
  Margen: 0;
  Ancho: 100%;
  Altura: 100%;
  Desbordamiento: oculto;
}

06. Estilo el texto.

Mo.js: Step 06

[dieciséis] (Crédito de la imagen: Pexels / Frank Kagumba)

Luego, el texto se encuentra en el centro de la página, ya que aparece actualmente en la esquina superior izquierda. Tenga en cuenta que para centralizar el texto, seleccionamos una posición absoluta y establecemos su posicionamiento exacto utilizando los márgenes superior, izquierda y derecha. El texto también se transforma utilizando la propiedad Transforma de texto. La propiedad de texto-alinee también se establece en el centro. 

 Texto {
  Fuente-familia: Gótico del siglo, Sans-Serif;
  Color: #fff;
  Transformación de texto: mayúscula;
  Tamaño de fuente: 50px;
  Peso de fuente: más audaz;
  Posición: Absoluto;
  TOP: 50px;
 izquierda: 25%;
 Derecha: 30%;
  Text-alinec: Centro;
     }

07. Instalar mo.js

Al igual que con otras bibliotecas, Mo.js se instala a través de múltiples opciones. El enfoque más simple, que empleamos, está accediendo directamente desde un servidor CDN. Agregue el siguiente código en la sección del cuerpo. 

 & lt; script src = '//cdn.jsdelivr.net
MOJS / 0.265.6 / MO.MIN.JS '& GT; & LT; / Script & GT;

En caso de que esté desarrollando la línea de FF, la biblioteca puede ser descargado directamente desde github e instalado utilizando los paquetes Bower o NPM utilizando los comandos apropiados. 

 Bower Instale Mo-JS
NPM instalar MO-JS

Una vez descargado, se puede hacer referencia directamente. 

 & lt; script src = "mo.js" tipo = "texto
JavaScript "& gt; & lt; / script & gt;

Finalmente, cree un nuevo archivo Script.js y guárdelo en la carpeta JS. Añadiremos la funcionalidad de JavaScript a este archivo. Vincularlo en la sección del cuerpo de la siguiente manera. Colóquelo por debajo del título del texto como se muestra a continuación. 

 & lt; Body & GT;
& lt; div clase = "texto" & gt;
& lt; p & gt; Mo.js Animation & Lt; / P & GT;
& lt; / DIV & GT;
   & lt; script src = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; script src = "js / script.js" & gt; & lt; & lt; & lt; & lt; & lt; & lt;
script & gt;
& lt; / body & gt;

08. Crea la primera explosión.

Antes de continuar para desarrollar el código, es prudente resaltar lo que estamos creando. Para explotar algo simplemente significa romperlo en pedazos más pequeños de una manera explosiva. Crearemos un simple objeto (Circle) y le configuraremos la búsqueda de que cuando un usuario lo haga hacer clic, se rompe de manera explosiva.

09. Crea el objeto círculo.

Mo.js: Step 09

[dieciséis] (Crédito de la imagen: Pexels / Frank Kagumba)

Primero, se crea el objeto a ser golpeado (círculo). Sin embargo, MO.JS admite otras formas, incluido el rectángulo (RECT), la cruz, la igual, el zigzag y el polígono. Cuando no logran especificar el tipo de forma, se incumplirá en un círculo. Para crear un círculo simple, declare que use el VAR o Const y asigne sus atributos llamando a la función Forma. 

 // creando un objeto simple
Const circ = new mojs.shape ({
  isshowstart: verdadero,
             Radio: 100,
});

El código crea el objeto círculo predeterminado con el radio dado. La variable IsShoWStart se le asigna un valor booleano para especificar si necesita mostrar el objeto o no. Haga que el código muestre un pequeño círculo de color magenta en el centro de la página.

10. Animar el círculo

El fragmento de código especifica que la escala y la opacidad cambiarán de 1 a 0, lo que indica que el objeto desaparece. También se establecen la advertencia y retraso de la animación. Tenga en cuenta que la animación no juega ya que aún no estamos de inicializarlo. Para hacerlo, agregue la función a continuación. 

 Document.AddeventListener ('click', función
(e) {
Circ.
 repetición ();
});

11. Hacer polígonos explotadores.

Mo.js: Step 11

[dieciséis] (Crédito de la imagen: Pexels / Frank Kagumba)

Ahora que el círculo está animando, creamos una animación de explosión que se rinde al mismo tiempo. La primera explosión utiliza las formas de polígono para extraer la explosión. Para crear una explosión, use la función de la función MO.JS, como se muestra en el fragmento de código a continuación. 

 Const Burst1 = New Mojs.Burst ({
  Izquierda: 0, arriba: 0,
  Cuenta: 7,
  Radio: {50: 250},
  niños: {
    Relleno: 'blanco',
    Forma: 'Polygon',
    Stroke: {'White': '# A50710'},
    ancho de truco: 4,
    Radio: 'Rand (30, 60)',
    RADIUSY: 0,
    escala: {1: 0},
    Pathscale: 'Rand (.5, 1)',
    Grado: 360,
    isforce3d: verdadero}});

El código asigna siete formas de polígonos a la explosión y especifica dos radios. El primero se refiere a la animación general, mientras que el segundo se enfoca en los objetos polígonos específicos dentro de la animación. Asegúrese de agregar la ráfaga a la función de escucha del evento para que responda a los clics del mouse. Tenga en cuenta que se han agregado dos nuevos parámetros; La melodía y genera. La melodía hace que la explosión se rinda a cualquier parte de la página, mientras que generará inicializa la explosión de la animación. Rinde la página. Observe los elementos explosivos que aparecen al mismo tiempo que el círculo. 

 Document.AddeventListener ('click', función
(e) {
             RUPST1.
  Tune ({x: e.pagex, y: e.pagey}).
  generar ().
 repetición ();
Circ.
 repetición ();
});

12. Crea la segunda explosión.

Mo.js: Step 12

[dieciséis] (Crédito de la imagen: Pexels / Frank Kagumba)

A continuación, creamos la segunda explosión utilizando diferentes opciones de forma. El código sigue la estructura de la explosión anterior y solo cambia algunos parámetros. 

 Const Burst2 = New Mojs.Burst ({
  Top: 0, izquierda: 0,
  Cuenta: 4,
  Radio: {0: 250},
niños: {
    Forma: ['Círculo', 'RECT'],
    Puntos: 5,
    Relleno: ['blanco'],
    Radio: 'Rand (30, 60)',
    Retraso: 'Tambor (50)',
    aliviando: ['Cubic.out', 'Cubic.out',
'Cubic.OUT'],
    Escala: {1: 0},
    Pathscale: 'Rand (.5, 1)',
    isforce3d: verdadero}});

Agregue la ráfaga a la función de escucha del evento. 

 Document.AddeventListener ('click', función
(e) {
             RUPST1.
  Tune ({x: e.pagex, y: e.pagey}).
  generar ().
 repetición ();
             Burst2.
             Tune ({x: e.pagex, y: e.pagey
}).
             generar().
             repetición();
Circ.
 repetición ();
});

13. Añadir círculo explosiones

Para mejorar aún más la animación, agregamos explosiones circulares. El examen del código en los pasos 11 y 12 revela muchas similitudes existentes entre los dos tipos de ráfagas. Al crear la tercera explosión, evitamos reescribir demasiado código utilizando el operador de distribución que se escribe como tres puntos (...). Sin embargo, primero, declaramos una variable que contiene las características similares que queremos reutilizar. Posteriormente, los otros dos círculos se pueden crear simplemente utilizando el operador de distribución. 

 // creando la variable con similar
parámetros
    Const Circle_opts = {
  Izquierda: 0, arriba: 0,
   Relleno: 'blanco',
  Escala: {.2: 1},
  Opacidad: {1: 0},
  isforce3d: verdadero,
  isshowend: falso
};

El código especifica el tipo de llenado, la escala, la opacidad y si se muestran al final de la animación. Las dos animaciones de círculo son creadas de la siguiente manera. 

 Const Circle1 = NUEVO MOJS.SHAPE ({
  ... Circle_opts,
  radio: 200});
Const Circle2 = NUEVO MOJS.SHAPE ({
  ... Circle_opts,
  Radio: 240,
  aliviando: 'Cubic.out',
  Retraso: 300});

Añadir las formas circulares. 

 Document.AddeventListener ('click', función
(e) {
             RUPST1.
  Tune ({x: e.pagex, y: e.pagey}).
  generar ().
 repetición ();
             Burst2.
             Tune ({x: e.pagex, y: e.pagey
}).
             generar().
             repetición();
Circ.
 repetición ();
});

14. Renderizar una burbuja básica.

A diferencia de la animación de explosión, que rompe el objeto en piezas más pequeñas, la animación de la burbuja, por otro lado, traduce el objeto hecho clic en un espacio más grande. El concepto adopta la analogía de soplar un globo donde el objeto se expande continuamente en tamaño. Para hacer esto, simplemente creamos una nueva variable OpenBackground y asigne atributos que hagan que todo el fondo logre un color similar al objeto. Como resultado, esto crea el matiz de burbujeo. 

 Const OpenBackground = NUEVO MOJS.SHAPE ({
  Rellenar: '# FC2D79',
  Izquierda: 0, arriba: 0,
  Escala: {0: 4.5},
  isshowstart: verdadero,
  Radio: 15,
  isforce3d: verdadero,
  Istimelless sin cuenta: verdadero,
Retraso: 150,
  Radio: 200,
  aliviando: 'Cubic.out',
  retroceso: 'Expo.in',});

Asegúrese de agregar la variable de fondo a la función de escucha del evento. 

 OpenBackground.
  Tune ({x: e.pagex, y: e.pagey}).
  Repetición ();

15. Añadir formas múltiples.

Siguiendo el concepto en el Paso 14, ahora avanzamos en el ejemplo para incluir múltiples objetos circulares de colores, que al hacer clic se expanden de manera similar y mostrar un texto. Edite el archivo HTML existente y copie el código dentro del cuerpo. Crea la estructura básica de la página.

16. Añadir bibliotecas auxiliares

A continuación, se agregan algunas bibliotecas adicionales en la sección del cuerpo para facilitar el desplazamiento y producir sonidos cuando se hacen clic en los objetos. 

& lt; script src = 'https: //cdnjs.cloudflare.com
AJAX / LIBS / Howler / 1.1.26 / Howler.min.js '& gt; & lt; & lt; & lt; & lt
script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
MOJS / 0.119.0 / MO.MIN.JS '& GT; & LT; / Script & GT;
& lt; script src = 'https: //cdn.jsdelivr.net
hammerjs / 2.0.4 / hammer.min.js '& gt; / lt; / script & gt;
& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / libs / iscroll / 5.1.1 / iscroll-probe.min
js '& gt;
& lt; / script & gt;

17. Avanzar la animación.

A continuación, agregamos estilos para las clases individuales resaltadas en los archivos HTML. Luego se agrega la funcionalidad MO.JS. El código completo (CSS y JS) se comparte con los archivos de tutoriales para su revisión.

18. Aprende más sobre Mo.js

Si bien el tutorial demuestra las técnicas de burbuja y explosión, hay otros recursos disponibles en línea que pueden ayudarlo a rastrear rápidamente su proceso de aprendizaje. Algunos de estos incluyen Tutoriales Mo.js en GitHub y demostraciones también en github .

Este artículo se publicó originalmente en el número 291 de la revista Creative Web Design Design Diseñador web . Comprar Emisión 291 .

Leer más:

  • El arte de CSS se arruina brillantemente por los viejos navegadores
  • Mejores piezas de software de prueba de usuario
  • Grandes diseños de ui

Cómo - Artículos más populares

Comienza con WebVR

Cómo Sep 14, 2025

[dieciséis] SALTA A: Recursos webvr WebVR es una API de JavaScript par..

Animar SVG con JavaScript

Cómo Sep 14, 2025

[dieciséis] Hay tanto que se pueden lograr de forma nativa en el navegador utilizando CSS3 o API de animaciones web, en JavaScript. La..

Cómo representar superficies transparentes realistas

Cómo Sep 14, 2025

[dieciséis] Crear un material transparente, como el vidrio, parece fácil, simplemente aumente el control deslizante de la transparenc..

Recrear un clásico manga

Cómo Sep 14, 2025

[dieciséis] He sido un gran fanático de manga desde la infancia y es imposible ocultar la influencia que la pasión tiene en mi arte...

Agregue animaciones de UI a su sitio

Cómo Sep 14, 2025

[dieciséis] La mayoría de las personas ven las interfaces de usuario diariamente, ya sea dentro de una aplicación móvil o en un sit..

Crea retratos ilustrados de fotos

Cómo Sep 14, 2025

[dieciséis] Estudié la bella arte y Técnicas de pintura Y durante mucho tiempo fue completamente contra la idea de ir dig..

Cómo construir diseños complejos usando CSS

Cómo Sep 14, 2025

[dieciséis] El diseño para la web siempre ha sido limitado, nunca ha habido nada realmente dedicado a hacer que el contenido sea fác..

Crea mejores animaciones de caracteres en maya

Cómo Sep 14, 2025

[dieciséis] ANT WARD será uno de nuestros artistas respondiendo a sus preguntas específicas en Vértice ..

Categorías