es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo jugar GIF animados onClick

El GIF animado es una forma popular de visualizar un concepto de diseño (aquí hay un ejemplo de cómo lo hicimos para los efectos de mensaje de texto creados con CSS) o mostrar un video corto. Pero si tiene demasiados en la misma página, desviará el enfoque de su usuario. Para las páginas que muestran muchos GIF, estas son malas noticias.

La solución: servir a los usuarios con una imagen estática y solo permitir que el GIF animado se ejecute al hacer clic en el usuario . En este breve tutorial, vamos a mostrar cómo hacerlo.

  • Ver demostración
  • Descargar Fuente

Empezando

Comience con la preparación de las carpetas y archivos del proyecto que incluyen: un archivo HTML, jQuery y, por último, un archivo JavaScript donde escribiremos nuestro código. Puede vincular jQuery a un CDN o tomar la copia y vincularla al directorio de su proyecto. Dejaría los estilos y CSS a tu imaginación. La parte más esencial es el marcado HTML es el siguiente:

Observe el atributo adicional data-alt en el elemento img . Aquí es donde almacenamos el GIF, en lugar de la imagen estática que servimos inicialmente. Puede agregar más imágenes y también agregar un título para cada una a través del elemento figcaption .

Después de eso, escribiremos el JavaScript que traerá la magia. La idea es servir la imagen GIF cuando el usuario hace clic en la imagen.

El JavaScript

Primero, creamos una función que recuperará la ruta de la imagen GIF que hemos puesto en el atributo data-alt . Recorreremos cada una de las imágenes y usaremos el método jQuery .data() para hacerlo:

 var getGif = function () {var gif = []; $ ('img'). each (function () {var data = $ (this) .data ('alt'); gif.push (data);}); devolver gif; } var gif = getGif (); 

Ejecutamos la función y guardamos la salida en un archivo gif variable, como se gif arriba. La variable gif ahora contiene la ruta del GIF desde las imágenes en la página.

Precarga de imagen

Ahora tenemos un problema de carga: con el GIF aún no cargado, existe la posibilidad de que el GIF animado no se reproduzca al instante (ya que el navegador necesitaría unos segundos para cargar completamente el GIF). Este retraso se sentiría más significativamente cuando el tamaño de la imagen GIF es grande.

Necesitamos precargar o cargar los GIF simultáneamente mientras la página se está cargando.

 // Precarga todo el GIF. var image = []; $ .each (gif, función (índice) {imagen [índice] = nueva Imagen (); imagen [índice] .src = gif [índice];}); 

Ahora, abra DevTools y diríjase a la pestaña Red (o Recursos ). Notará que los GIF ya están cargados a pesar de que están guardados en el atributo data-alt . Y el siguiente es todo el código que necesita para hacerlo.

La última parte del código es donde vinculamos cada elemento de figure que envuelve la imagen con el evento click .

El código intercambiará el origen de la imagen entre el atributo src donde se sirve la imagen estática y el atributo data-alt donde inicialmente servimos la imagen GIF.

El código también volverá a la imagen estática cuando el usuario haga clic por segunda vez, "deteniendo" la animación.

 $ ('figure'). on ('click', function () {var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); if ($ imgExt [1] === 'gif') {$ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc);} else {$ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt'));}}); 

Y eso es. Puede pulir la página con estilos, por ejemplo, puede agregar un botón de reproducción que se superpone a la imagen para indicar que es "jugable" o un GIF animado.

Vea la demostración y descargue la fuente aquí.

  • Ver demostración
  • Descargar Fuente

5 maneras de mantenerte enfocado en el trabajo

5 maneras de mantenerte enfocado en el trabajo

Mantenerse enfocado en el trabajo puede ser difícil a veces. Aquí hay una ocurrencia que usted ve muchas veces antes: comienza el día diciéndose a sí mismo que recibirá (inserte la cantidad) de la tarea realizada hoy. Con la determinación que tengas, podrías tener una conversación directa con tus amigos, responder y enviar correos electrónicos y, por supuesto, estar realmente ocupado en las redes sociales, al igual que la mayoría de nosotros aquí .Entonces, ¿

(Consejos de tecnología y diseño)

Cómo extraer texto de imágenes usando la línea de comandos

Cómo extraer texto de imágenes usando la línea de comandos

Es bastante fácil leer una imagen y extraer el texto usted mismo. Pero sacar dinámicamente el texto de una foto es un poco más difícil, y afortunadamente, imgclip ofrece una solución bastante simple.Esta herramienta de línea de comandos se ejecuta en la terminal para Mac, Windows y Linux. Simplemente toma un argumento para el archivo de imagen junto con el idioma, luego devuelve el texto copiado a su portapapeles.Puede

(Consejos de tecnología y diseño)