Arrière-plan changeant de couleur sur le défilement

 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.

Contenu[Afficher]
 

couleurs

Pose

Si vous souhaitez utiliser cette méthode pour votre prochain projet, vous aurez besoin jQueryjquery.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!

 

À propos de l’auteure
Auteur: super User

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
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.

 

qui sommes nous?

CollectiveRay est dirigé par David Attard - travaillant dans et autour du créneau de la conception de sites Web depuis plus de 12 ans, nous fournissons des conseils pratiques aux personnes qui travaillent avec et sur des sites Web. Nous gérons également DronesBuy.net - un site Web pour les amateurs de drones.

David Attard

 

 

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...