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.

Conteúdo[Show]
 

rolo de cores

Instalando

Se quiser usar este método em seu próximo projeto, você precisará jQueryjquery.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!

 

Sobre o autor
Autor: Super User

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

 

quem somos nós?

CollectiveRay é administrado por David Attard - trabalhando dentro e ao redor do nicho de web design por mais de 12 anos, oferecemos dicas práticas para pessoas que trabalham com e em sites. Também administramos DronesBuy.net - um site para entusiastas de drones.

David Attard

 

 

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...