Incrustar GIF animados como Facebook con jqGifPreview

Twitter y Facebook tienen mucha gente que comparte GIF animados diariamente. Si todo esto se reproduce automáticamente, podría ser espantoso en un feed.

Ambas redes solucionan esto con una función de hacer clic para previsualizar todos los archivos GIF. Esto le permite al usuario elegir qué animaciones quieren ver eligiendo cuándo iniciar / detener la animación.

Con el complemento jqGifPreview, puede llevar esta misma funcionalidad a su sitio web.

Este plugin jQuery gratuito funciona en todos los GIF de la página, o puede dirigirse específicamente a cualquier que desee. Es un recurso fantástico, pero toma un poco de tiempo configurarlo.

Un GIF en pausa es realmente solo un cuadro de la animación, que se muestra en la página.

Lamentablemente, este complemento no extrae automáticamente una imagen estática del GIF . Pero puede lograr esto usando PHP o cualquier otro lenguaje de servidor, de modo que con un poco de código, esto puede ser automatizado.

Este complemento utiliza un atributo data- * para almacenar la ubicación de la imagen GIF . Una vez que el usuario hace clic en la imagen, se cargará automáticamente en el atributo src de la imagen y se mostrará en la pantalla.

¡Simple, efectivo, y definitivamente un efecto limpio! Todo lo que necesita son los archivos CSS / JS para este complemento que puede extraer directamente de GitHub . Y, por supuesto, también necesitará una copia de jQuery .

A partir de ahí, configura su imagen de esta manera:

El atributo src principal debe contener la imagen estática . Puede crear un script para generarlo, o puede editar y cargar manualmente un disparo estático para cada GIF.

El atributo data-gif contiene el GIF animado real y cambiarán al hacer clic si se dirige a la clase de imagen principal (en este caso, es .myImg ). Ahora, todo lo que necesita es una línea de jQuery para que todo funcione:

 $ (".myImg"). jqGifPreview (); 

Definitivamente, uno de los mejores plugins de jQuery que he visto este mes y es bastante fácil de configurar.

Puede obtener más información visitando la página de GitHub y también hay una vista previa de demostración en vivo alojada en el sitio web del desarrollador.

Más de 50 bonitos y limpios scripts de navegación basados ​​en pestañas CSS

Una de las tareas más importantes de un diseñador de experiencia de usuario es asegurarse de que la navegación del sitio web sea simple y fácil de usar . Y qué otra manera de hacer esto posible que a través de pestañas de navegación.Las pestañas de navegación bien diseñadas no solo ayudan a los usuarios a saber dónde ir, sino que también son importantes para dirigir el tráfico a las páginas internas de su sitio web o blog.Entonces, para

(Consejos de tecnología y diseño)

Desarrollar buen gusto en el diseño

El famoso monólogo radiofónico de Ira Glass en el programa de radio público de la ciudad de Nueva York This American Life alienta a los jóvenes creativos a superar sus discrepancias iniciales entre su propio trabajo y el trabajo que perciben como "bueno". Glass recuerda a los creativos que todos entramos en trabajo creativo porque "tenemos buen gusto".Est

(Consejos de tecnología y diseño)