Fondo cambiante de color en el desplazamiento

 Mientras trabajaba en un proyecto (¡lo anunciaremos pronto!), Nuestro equipo de diseño quería un fondo agradable que cambiara de color. Ahora, sabemos que podríamos haber usado un degradado estático, o simplemente desvanecernos entre secciones, pero pensamos que sería genial si el fondo cambiara cuando el usuario se desplaza hacia abajo en la página, de manera fija. Por lo general, cuando nos enfrentamos a un desafío como este, lo primero que hacemos es verificar si alguien más ya lo ha hecho, y en poco tiempo encontramos este jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. Es genial, pero necesitábamos un poco más. La versión actual solo admite desvanecimientos entre dos colores, por lo que bifurcamos el código y lo expandimos un poco.

Contenido[Mostrar]
 

pergamino de colores

Instalación

Si desea utilizar este método para su próximo proyecto, necesitará jQueryjquery.color-2.1.0.js, y los bits de HTML / CSS / JS incluidos en este jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.

Hazlo tuyo

En el violín, usamos ' `elementos para marcar los límites del contenido, pero puede usar cualquier elemento que desee cambiando el selector en la línea 8, y el CSS y HTML correspondientes. La matriz de cadenas en la llamada a `scrollColors` (línea 16) es donde almacenamos los colores a los que nos gustaría hacer la transición. Recuerde cambiar la propiedad de color de fondo de CSS para el cuerpo (nuestro objetivo de cambio de color) para que coincida con el primer elemento de esta matriz, o aún obtendrá el color rosa brillante cuando se cargue la página por primera vez.

Gracias al complemento jQuery Color, se permiten valores hexadecimales, rgb e incluso rgba. Esto puede producir algunos efectos interesantes cuando se superpone a una imagen o video. El canal alfa en RGBA está animado al igual que los otros canales de color, por lo que podría tener una opacidad de cambio de color vendida con desplazamiento.

¡Disfrútenlas!

 

Sobre el autor
Autor: super User

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

 

¿quienes somos?

CollectiveRay está dirigido por David Attard: trabajando en y alrededor del nicho del diseño web durante más de 12 años, brindamos consejos prácticos para las personas que trabajan con y en sitios web. También ejecutamos DronesBuy.net, un sitio web para aficionados a los drones.

David attard

 

 

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...