Tout en travaillant sur un projet (nous l'annoncerons bientôt!), Notre équipe de conception voulait un joli fond changeant de couleur. Maintenant, nous savons que nous aurions pu utiliser un dégradé statique, ou simplement s'estomper entre les sections, mais nous avons pensé que ce serait cool si l'arrière-plan changeait lorsque l'utilisateur faisait défiler la page, de manière fixe. Habituellement, lorsque nous relevons un défi comme celui-ci, la première chose que nous faisons est de vérifier si quelqu'un d'autre l'a déjà fait, et en un rien de temps, nous avons trouvé ce jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. C'est génial, mais nous avions besoin d'un peu plus. La version actuelle ne prend en charge que les fondus entre deux couleurs, nous avons donc bifurqué le code et l'avons développé un peu.
Pose
Si vous souhaitez utiliser cette méthode pour votre prochain projet, vous aurez besoin jQuery, jquery.color-2.1.0.js, et les bits de HTML / CSS / JS inclus dans ce jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.
Faites votre propre
Dans le violon, nous utilisons ` `éléments pour marquer les limites du contenu, mais vous pouvez utiliser n'importe quel élément de votre choix en modifiant le sélecteur à la ligne 8, ainsi que le CSS et le HTML correspondants. Le tableau de chaînes dans l'appel à `scrollColors` (ligne 16) est l'endroit où nous stockons les couleurs vers lesquelles nous aimerions faire la transition. N'oubliez pas de modifier la propriété CSS background-color pour body (notre cible de changement de couleur) pour qu'elle corresponde au premier élément de ce tableau, ou vous obtiendrez toujours la couleur rose vif lors du premier chargement de la page.
Grâce au plugin jQuery Color, les valeurs hex, rgb et même rgba sont autorisées. Cela peut produire des effets sympas lorsqu'il est superposé sur une image ou une vidéo. Le canal alpha dans RGBA est animé comme les autres canaux de couleur, vous pouvez donc avoir une opacité de changement de couleur vendue avec défilement.
Chin!
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...