Con toda la competencia que existe en la actualidad, tu sitio web no sólo debe tener un diseño impecable, sino que debe tener elementos interactivos para incrementar la experiencia de usuario y la satisfacción que éste obtiene al navegar por tu sitio web. De hecho, si visitamos alguna página web notaremos que muchos elementos interactivos que allí se incluyen no son mera decoración, sino que tiene un aporte positivo en la experiencia de usuario porque le ofrecen algún tipo de información, de manera visual.
En este artículo te listamos 4 plugin JQuery que actúan intuitivamente y detectan si el fondo es oscuro o claro y realizan otras acciones adicionales:
Background Check
Este plugin JQuery automáticamente cambia el elemento a una versión oscuro o clara dependiendo totalmente del porcentaje de brillo de las imágenes que se encuentran detrás de dicho elemento. Sin duda, una característica muy útil si tu sitio web tiene muchas fotografías podrías emplearlo en el cursor o en cualquier otro elemento que creas pertinente.
colourBrightness.js
Este plugin JQuery te permite determinar si el color de fondo d cualquier elemento es claro u oscuro. Primero, toma una muestra del color de fondo de dicho elemento y usa un algoritmo para determinar el porcentaje de brillo de ese color y añadir las clases correspondientes para cada caso. Habiendo realizado ese paso previo, puedes elegir qué color te gustaría que se mostrara, dependiendo del fondo.
Jquery-adaptativebackground.js
Este plugin JQuery detecta el color que más predomina en alguna imagen o foto, lo extrae y lo aplica al fondo. Cuando la página se carga, el color predominante es extraído y aplicado al fondo. Este proceso se da en cuestión de segundos lo que resulta en un efecto muy fluido.
getImageBrightness
Este plugin JQuery te permite detectar el porcentaje de brillo de cualquier imagen o foto. Sólo debes pinchar en la imagen y en la parte inferior aparecerá la información deseada. Funciona solamente para detectar el brillo total de la imagen, no de cada color o zona por separado.