Una de las mejores cosas de la web moderna de hoy es que hay muchas animaciones y efectos fantásticos en las páginas web y las interfaces de usuario. El texto estático aburrido y las imágenes aburridas se han ido, las experiencias ingeniosas y atractivas están de moda. Tener estos efectos puede contribuir enormemente a la navegación general y, a menudo, le da al usuario pistas visuales hábiles sobre cuál es la próxima llamada a la acción, etc. Es importante utilizar estas animaciones y efectos como complemento del pastel, por así decirlo, no queremos exagerar los efectos y confundir al usuario. Estoy seguro de que ha visto algunos sitios web que llevan el atractivo visual al extremo y, a menudo, esto no aporta ningún beneficio y, de hecho, puede restar valor a la experiencia general. Con jQuery, podemos crear animaciones y efectos realmente interesantes, a veces con solo un breve fragmento de código. Es por eso que debe vigilar la cantidad de azúcar de interfaz de usuario que agrega, ¡porque jQuery lo hace muy fácil de hacer! Una vez que tenga algunos trucos bajo la manga, ¡puede tener la tentación de aplicar un efecto a cada elemento con el que se encuentre! ¡Usa la restricción, joven Grapsshopper! Si usa animaciones y efectos correctamente, serán una adición realmente asombrosa a su página web. Entonces, con eso, ¡pasemos directamente al uso de jQuery para impulsar nuestras páginas web con animaciones y efectos increíbles!
Animación y efectos de jQuery
jQuery proporciona animaciones y efectos básicos y muy útiles para realizar acciones comunes desde el primer momento. Crear los efectos que estos métodos proporcionan en JavaScript nativo llevaría mucho tiempo y probablemente no sería un ejercicio tan divertido. Sin embargo, estos métodos en jQuery permiten cosas como mostrar y ocultar elementos, hacer que los elementos aparezcan y desaparezcan, mover elementos en la pantalla y más de una manera muy sencilla. También es posible crear sus propias animaciones personalizadas utilizando el .animate()método. Sin .animate()embargo, usar el método es un poco más avanzado, así que comencemos con algunos de los métodos básicos para mojarnos los pies.
Mostrar y ocultar elementos con jQuery
Los diversos métodos de mostrar y ocultar son un excelente lugar para comenzar cuando se trabaja con animaciones y efectos de jQuery. Mostrar y ocultar elementos es bastante fácil y los elementos se pueden mostrar u ocultar de inmediato o durante un período de tiempo determinado. Si desea especificar la velocidad, simplemente puede pasar una cadena de 'lento', 'normal' o 'rápido'. Si prefiere ser muy específico, esa también es una opción. Simplemente pase un valor numérico, y ese valor estará en milisegundos. Entonces, si desea que algo tome 5 segundos, por ejemplo, use 5000. Con solo esta pequeña cantidad de entrada, puede crear buenos resultados. Esta tabla enumera los métodos de mostrar y ocultar que están disponibles para usted.
Método | Caso de uso |
show() | Muestra los elementos del conjunto envuelto, si están ocultos actualmente |
show(speed, callback) | Al pasar la velocidad, puede controlar la animación y también activar una función de devolución de llamada cuando se completa |
hide() | Oculta los elementos del conjunto envuelto, si se muestran actualmente |
hide(speed, callback) | También puede pasar una velocidad y una devolución de llamada al método hide |
toggle() | Alterna la visibilidad de cualquier elemento coincidente |
toggle(switch) | Pasar verdadero muestra todos los elementos mientras que pasar falso oculta todos los elementos |
toggle(speed, callback) | Pase una velocidad para controlar la animación y activar una función de devolución de llamada cuando se complete |
Ahora que hemos visto cuáles son algunos de estos métodos en la tabla anterior, pongamos algunos para usar en algún código para ver cómo funcionan realmente. Aquí está el HTML sin procesar y jQuery que hacen que suceda el efecto. También tenemos un ejemplo práctico para que pueda probar los efectos usted mismo.
.show () En el ejemplo anterior, el .show()método es el primero que usamos. La forma en que funciona es simplemente mirar el estado del elemento y, si está oculto, seguir adelante y mostrarlo. También pasamos en una opción de velocidad, en este caso lenta . Ejecutar el .show()método en un elemento que ya se está mostrando no tiene ningún efecto.
.hide () La segunda línea de jQuery hace uso del .hide()método y funciona igual, .show()excepto que tiene el efecto contrario. Si se muestra el elemento, entonces ocúltelo. En este caso pasamos a una velocidad normal. La ejecución del .hide()método en un elemento que ya está oculto tampoco tiene ningún efecto, como en el caso de .show().
.toggle () Este método es bastante útil e inteligente ya que puede determinar automáticamente si los elementos coincidentes se muestran o no. Cuando se .toggle()ejecuta, simplemente mira el estado actual y luego lo intercambia con el otro. También tenemos la opción de pasar la velocidad con este método. En este ejemplo pasamos en la opción rápida, y como puede ver haciendo clic arriba para ejecutar la palanca, ¡se ve bastante elegante!
También vale la pena señalar que estamos usando la versión tres de Twitter Bootstrap Framework. De esta manera, podemos agregar clases a nuestros elementos como queramos, y no es necesario tomarnos el tiempo para escribir nuestro propio CSS. Soy vago, bueno.
Desvanecer elementos dentro o fuera con jQuery
Este es otro efecto visual común en las páginas web de hoy. jQuery proporciona una buena implementación del efecto de atenuación para los elementos de la página. Puede controlar el nivel al que se desvanecen, la velocidad del efecto de desvanecimiento, así como los elementos que se desvanecen por completo. El argumento de velocidad funciona de manera similar a los .show(), .hide()y .toggle()métodos en que se puede pasar una cadena como lenta , lo normal o rápida , o, alternativamente, se puede proporcionar la velocidad en milisegundos. Estos son los métodos prediseñados para que los use en jQuery para varios efectos de desvanecimiento. Vea jQuery fadeOut () en acción.
Método | Caso de uso |
fadeIn(speed, callback) | Se desvanece en todos los elementos coincidentes al cambiar la opacidad asignada a ellos y activa una función de devolución de llamada opcional al finalizar |
fadeOut(speed, callback) | Desvanece todos los elementos coincidentes estableciendo la opacidad en 0 y cambiando la visualización a ninguna. Activa una devolución de llamada opcional al finalizar |
fadeTo(speed, callback) | Atenúa la opacidad de todos los elementos coincidentes a un valor proporcionado y activa una función de devolución de llamada opcional cuando se completa |
Con estos métodos jQuery adicionales que ahora forman parte del kit de herramientas, sigamos adelante y veamos algunos ejemplos asombrosos.
Y aquí está la frescura, ¡haz clic en esos botones!
Eso fue bastante hábil, y puedes ver lo fácil que es agregar algunos efectos muy agradables a tu página web con un código realmente simple. En estos ejemplos, simplemente tomamos el elemento y experimentamos con varios efectos de desvanecimiento pasando a diferentes velocidades, pero no exploramos nada con una función de devolución de llamada. Las funciones de devolución de llamada son increíbles porque muchas veces mientras construyes tu próxima obra maestra en tu mente, puedes estar pensando, "Hmm, me gustaría poder activar algo para que suceda automáticamente después de que suceda lo primero". Bueno amigo, estás de suerte, porque eso es exactamente lo que una función de devolución de llamada le permitirá hacer. Activar funciones de devolución de llamada en JavaScript y jQuery es muy común, por lo que definitivamente queremos sentirnos cómodos con cómo escribirlas e implementarlas en nuestros proyectos.
¡Boo Yeah! Veo lo que hiciste alli. Esta vez, agregamos una devolución de llamada a la opción Fade Out. Además, usamos lasetTimeout()funciónJavaScript nativapara esperar 1,5 segundos adicionales antes de activar esa función de devolución de llamada. De esta manera obtienes ese “ Espéralo…. ”Efecto. Para obtener más información sobre cómo usarlosetTimeout(), consulte el artículo que cubre Awesome JavaScript Events. Comprender todos los eventos de JavaScript mencionados allí también ayuda a ponerse al día en el manejo de eventos en jQuery.
Elementos de página deslizante con jQuery
Cha Cha esta vez, pie izquierdo esta vez, deslícese hacia la izquierda, deslice hacia la derecha, ¡todos aplaudan! … Oh, espera, lo siento, aquí está pasando demasiado Nintendo Just Dance. Deslizarse en jQuery no es para bailar y mover elementos en la pantalla, en realidad es otra forma de ocultar y mostrar elementos, pero con un efecto de diapositiva. Puede deslizar elementos fácilmente hacia arriba o hacia abajo en la página, o simplemente alternar el efecto de diapositiva también. Aquí hay un resumen de los métodos de diapositivas que están disponibles y cómo funcionan en un formato de tabla agradable.
Método | Caso de uso |
slideDown(speed, callback) | Muestra todos los elementos emparejados cambiando su altura, dando un efecto de diapositiva. También puede activar una devolución de llamada una vez completada |
slideUp(speed, callback) | Oculta todos los elementos emparejados cambiando su altura, dando un efecto de deslizamiento. También puede activar una devolución de llamada una vez completada |
slideToggle(speed, callback) | Alterna todos los elementos emparejados cambiando su altura, dando un efecto de deslizamiento hacia adentro y hacia afuera. También puede activar una devolución de llamada una vez completada |
Al igual que los otros métodos que hemos estado viendo hasta ahora, saquemos un poco de código para ver cómo funcionan estos efectos en tiempo real en una página web en vivo.
Solo haz un movimiento
¡Increíble! Como podemos ver, los elementos deslizantes también fueron muy fáciles de implementar. Casi parece que verías que las cosas se deslizan por la pantalla, pero nuevamente, este efecto muestra u oculta elementos usando el ajuste de altura de los elementos en el conjunto envuelto.
Creando animaciones personalizadas con jQuery
Además de los métodos de efectos y animación prediseñados en la biblioteca jQuery, también hay formas de animar elementos en la página web usando su propia configuración personalizada. El beneficio de los métodos prediseñados es que son muy fáciles de usar. Usar los métodos de animación personalizados en jQuery es un poco más complicado, pero da un poco más de control. Vale la pena señalar que el método .animate () solo funciona en propiedades CSS que tienen valores numéricos. Si intenta animar algo como borderColor establecido en rojo, ¡no funcionará!
Estos son los formatos de las funciones de animación personalizadas.
Método | Caso de uso |
animate(params, duration, easing, callback) | Crea una animación personalizada params Las propiedades de los elementos a animar. duración El número de milisegundos que debe tomar la animación. suavizado El tipo de suavizado a utilizar, puede ser lineal o oscilante callback La función que se activará al finalizar la animación. |
animate(params, options) | Crea una animación personalizada params Las propiedades para animar opciones Conjunto de opciones para la animación |
stop() | Detiene las animaciones que se estén ejecutando actualmente en el conjunto envuelto |
Muy bien ahora, estamos a punto de ponernos funky. Quiero verlos a todos en la pista de baile. DJ, toca esa canción.
Entonces, ¿qué notamos sobre este código aquí? Así es, amigos, estamos manipulando directamente los valores CSS, ¡y solo pueden ser valores de tipo numérico! Lo interesante de este ejemplo en particular es que estamos usando Twitter Bootstrap Framework para decorar nuestro HTML como punto de partida. Normalmente, tendría una hoja de estilo que asigna varias propiedades CSS a ciertos valores y se aplican a los elementos de la página a través de identificadores o clases. Funciona si también está utilizando un marco. La clave para recordar es que, para empezar, cualquier propiedad que esté intentando animar ya debe estar aplicada al elemento HTML. Por ejemplo, si desea animar un radio de borde a 100 px en un elemento en particular, ese elemento primero debe tener al menos esa propiedad establecida en algún otro valor. En este caso, el valor original del radio del borde era de 6 px. Si el elemento en particular no tiene la propiedad border-radius para empezar, entonces, tu animación no va a funcionar tan bien, ¿verdad? 
¡Basta de hablar, muéstrame los efectos!
¡Cosas divertidas de hecho! El beneficio de usar la opción de animación personalizada es, nuevamente, que obtiene un control muy granular sobre los valores exactos de los estilos CSS asignados a sus diversos elementos en la página. Algunas de las animaciones que hay hoy en la web son realmente increíbles. Estoy seguro de que te han parecido algunos que realmente te han hecho preguntarte cómo se logró el efecto también. Si tienes suficiente paciencia, creatividad e imaginación, ¡también crearás animaciones personalizadas que dejarán boquiabiertos a la gente!
0 Comentarios