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.
Instalación
Si desea utilizar este método para su próximo proyecto, necesitará jQuery, jquery.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.
¡Que la disfrutes!
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.
y muchos más ...