Efectos JavaScript

[pic 1]Instituto Universitario Politécnico Santiago Mariño[pic 2]

Ext. San Cristóbal

Efectos Lyscord

(Informe) [pic 3]

                                                                                                 Autor:

                                                                          Luis A Urbina M.

                                                                          C.I: 28.256.156

                                                                  Escuela 47             

Mayo, 2021

Efectos JavaScript

Para la incorporación de los efectos JavaScript, lyscord se encamino por adaptar simples animaciones que cuenten con los requerimientos y requisitos para el creador y el docente. Varios elementos fueron añadidos, unos inclusive más sorprendentes que otros,  pero todos poseen la única finalidad que es dar confort visual al sitio y agregarle dinamismo.

Para la construcción y adquisición de estos efectos, simplemente se hizo uso del lenguaje JavaScript y el uso de una de sus librerías más destacados jQuery, que mediante una sintaxis sencilla hace posible el mayor entendimiento de los efectos.

[pic 4]

¿Qué es JavaScript?

Es el lenguaje de programación encargado de dotar de mayor interactividad y dinamismo a las páginas web. Cuando JavaScript se ejecuta en el navegador, no necesita de un compilador. El navegador lee directamente el código, sin necesidad de terceros. Por tanto, se le reconoce como uno de los tres lenguajes nativos de la web junto a HTML y a CSS.

¿Qué jQuery?

Es una popular biblioteca de JavaScript. Fue creada por John Resig en el 2006 con el objetivo de facilitarle el uso de JavaScript en los sitios web a los desarrolladores.

Proceso

Para comenzar a exponer cada efecto se debe tomar en cuenta que, según las indicaciones aportadas en la: Reunión Zoom del día 15/05/22 se puede aplicar los efectos JavaScript solicitados a no solos los menús, sino en cualquier otra sección o elemento del sitio.

Para llamar al CND de JQuery, aplicamos.

[pic 5]

La cantidad de efectos agregados para ésta ocasión son 6, sumándoles los pre-existentes en la página sumaría un total de 9. Los nuevos elementos corresponden a:

Nuevos efectos.

1. Mensaje de Bienvenida.
2. Menú pegajoso con desplazamiento.
3. Zoom en Menú.
4. Menú de acordeón,
5. Título principal Animado.
6. Texto Parpadeante.

Efectos Pre-existentes.

1. Carrusel de Imágenes.
2. Menú tabs o por pestañas.
3. Deslizador de Imágenes.

A continuación cada efecto y su funcionamiento serán expuestos por separado.

• Mensaje emergente.

Como primero y el más simple de los efectos, se optó por incorporar a la página principal, (inicio), un mensaje emergente en JavaScript que manifiesta con exclamación la visita al sitio lyscord.

¿Qué hace?

Prácticamente éste efecto muestra una ventana de bienvenida o mensaje cada vez que se ingresa a la sección inicio.

¿Cómo se elaboró?

1. Para su construcción se incorporó un script sencillo en la página principal, que hacía uso del método "alert" en JavaScript para enviar el mensaje.

Muestra.

[pic 6]

[pic 7]

• Menú pegajoso con desplazamiento.

En segundo lugar tenemos a la barra principal deslizante, un menú ampliamente conocido como pegajoso.

¿Qué hace?

Se trata de un efecto que funciona al momento de hacer scroll hacia abajo en el sitio web, a través de una sentencia en jQuery se le añade una clase en css.

¿Cómo se elaboró?

1. Para comenzar tenemos que hacer la estructura básica del <header> y del menú,  en mi caso ya tenía la estructura plasmada que en su interior se encuentra el logotipo del sitio más el menú con ítems.

1. Se crea una clase adicional en la hojas css que será añadida al momento de realizar el desplazamiento, lo llamamos “animation”.Ésta clase se activa cuando el usuario llega hasta cierto punto al hacer scroll.

1. Luego para completar la clase “animation”, creamos una secuencia de animaciones o @keyframes con nombre “scrollarriba” que establecerá la translación en eje Y.

1. Cuando se ha bajado lo suficiente, a través de JQuery se hace uso del método        “addClass” en donde  se envía nuevas propiedades al elemento con id “header_bar”.

Muestra

[pic 8]          [pic 9]

[pic 10]

• Zoom de Menú.

Aquí se hizo uso de una simple animación gracias a una propiedad simple de css, "transform".

¿Cómo funciona?

Su funcionamiento se visualiza cuando el usuario mueve su ratón encima de cada uno de los ítem presentes en el menú, cuando éste evento acciona, sucede algo similar a  indicador ":hover" de css, pues, el área de la etiqueta "<a>" aumenta su escala de tamaño a scale(1.1).

...