Mudança de cor de fundo na rolagem

 Enquanto trabalhava em um projeto (vamos anunciar em breve!), Nossa equipe de design queria um bom fundo com mudança de cor. Agora, sabemos que poderíamos ter usado um gradiente estático, ou simplesmente esmaecido entre as seções, mas achamos que seria legal se o fundo mudasse conforme o usuário rolava para baixo na página, de maneira fixa. Normalmente, quando encontramos um desafio como este, a primeira coisa que fazemos é verificar se alguém já o fez e, em nenhum momento, encontramos este jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. É ótimo, mas precisávamos de um pouco mais. A versão atual suporta apenas esmaecimento entre duas cores, então nós bifurcamos o código e o expandimos um pouco.

Instalando

Se quiser usar este método em seu próximo projeto, você precisará jQuery, jquery.color-2.1.0.jse os bits de HTML / CSS / JS incluídos neste jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.

Torná-lo seu próprio

No violino, usamos ` `elementos para marcar os limites do conteúdo, mas você pode usar qualquer elemento que desejar alterando o seletor na linha 8 e o CSS e HTML correspondentes. A matriz de strings na chamada para `scrollColors` (linha 16) é onde armazenamos as cores para as quais gostaríamos de fazer a transição. Lembre-se de alterar a propriedade CSS background-color para body (nosso destino de mudança de cor) para corresponder ao primeiro elemento nesta matriz, ou você ainda obterá a cor rosa brilhante quando a página carregar pela primeira vez.

Graças ao plugin jQuery Color, valores hex, rgb e até mesmo rgba são permitidos. Isso pode produzir alguns efeitos interessantes quando colocado sobre uma imagem ou vídeo. O canal alfa em RGBA é animado exatamente como os outros canais de cores, então você poderia ter uma opacidade de mudança de cor vendida com rolagem.

Divirta-se!