adaptive_backgrounds_LP

Combinación perfecta: Fondos adaptables para jQuery Colorea su sitio web automáticamente

Este complemento para jQuery es gas. Adaptive Backgrounds de Brian Gonzalez analiza los colores de las imágenes en su sitio web, determina cuáles son dominantes y colorea el fondo del elemento que contiene la imagen en consecuencia. Como Fondos adaptables funciona con el padre más cercano de forma predeterminada, puede tener varios fondos diferentes en la misma página. El efecto es impresionante.

Fondos adaptables para jQuery: paleta de colores armoniosos en piloto automático

El uso de fondos adaptables me recuerda un poco a Ambi-Light, una iluminación instalada detrás de su televisor, que varía en color, controlada por el color dominante que se muestra en la pantalla. Se supone que esto mejorará su experiencia visual. Todavía no me enamoré de este concepto.

fondos_adaptables_EXPL

Fondos adaptativos extrae el verde dominante y colorea el fondo en consecuencia

Con los sitios web esto es algo totalmente diferente, aunque admito que no funcionará con todos y cada uno de los proyectos. Adaptive Backgrounds lee su imagen, busca el color dominante, lo extrae y colorea automáticamente el fondo del elemento principal de la imagen en dicho color. Mire la página de demostración para ver algunas vistas realmente impresionantes.

Ponerlo en práctica es absolutamente simple y directo. Una vez que haya incrustado jQuery y el script en su proyecto, llame a la funcionalidad de la siguiente manera:

€(document).ready(function(){
  €.adaptiveBackground.run()
});

De ahora en adelante, el script sigue buscando imágenes que lleven el atributo de datos data-adaptive-background. Este atributo se adjunta a su regular img:

Usando una variable, digamos defaults puede personalizar aún más el comportamiento del complemento. Esto es necesario tan pronto como no desee apuntar al más cercano parent, que por defecto será el predecesor en el árbol DOM, o si desea mantener colores de texto específicos. La variable luego se adjunta a la run dominio:

€.adaptiveBackground.run(defaults)

Como el complemento funciona con canvas y ImageData, solo puede procesar imágenes alojadas en el mismo dominio que el script. Sin embargo, existen soluciones para cambiar esto. Además del procesamiento de su día a día img Adaptive Backgrounds también puede trabajar con imágenes de fondo CSS. Usarás el atributo de datos adicionales data-ab-css-background para lograr eso:

Las imágenes que no desea que se procesen, simplemente no estarán equipadas con el atributo de datos. ¿Te imaginas una manera más fácil?

enlaces relacionados

#Combinación #perfecta #Fondos #adaptables #para #jQuery #Colorea #sitio #web #automáticamente

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.