Changement de couleur en défilant

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 506 fois - Téléchargée 34 fois

Contenu du snippet

Juste un petit Javascript (mon premier, soyez pas trop vache) qui modifie la couleur du fond suivant la position verticale de la page.

En exemple, j'ai juste placé des couleurs simples (du rouge au vert puis du vert au rouge) offrant un beau dégradé lorsque l'on fait défilé la barre verticale.

Libre à vous de modifier les différentes valeurs pour des effets plus classes :)

Dernier détail, mais pas des moindres, c'est un code source qui marche avec IE6, pour les modif pour le rendre efficace pour Navigator, je suis preneur (et oui, je le rapelle, c'est mon premier)

Source / Exemple :


<HTML>
<HEAD>
<TITLE>change le fond en déplaçant la barre de défilement</TITLE>

<script language="javascript">
<!--
function chgfond() {

// On copie d'abord la valeur de la position verticale de la page en cours
// dans la variable 'position'

  position = document.body.scrollTop;

// suivant les différentes valeurs de la variable 'position' on calcule les 
// valeurs des variables 'rouge', 'vert' et 'bleu'
  
  if (position < 16) {
    rouge = "FF";
    vert = "0" + position.toString(16);
    bleu = "00";
  }

  else if (position < 256) {
    rouge = "FF";
    vert = position.toString(16);
    bleu = "00";
  }
 
 else if (position < 496) {
    valeur = position - 255;
    valeur = 255 - valeur;
    rouge = valeur.toString(16);
    vert = "FF";
    bleu = "00";
  }

  else if (position < 511) {
    valeur = position - 255;
    valeur = 255 - valeur;
    rouge = "0" + valeur.toString(16);
    vert = "FF";
    bleu = "00";
  }

  else if (position < 525) {
    valeur = position - 510;
    rouge = "00";
    vert = "FF";
    bleu = "0" + valeur.toString(16);
  }

  else if (position < 766) {
    valeur = position - 510;
    rouge = "00";
    vert = "FF";
    bleu = valeur.toString(16);
  }

// On definie une variable 'couleurFond' en fonction des variables 'rouge',
// 'vert' et 'bleu' (concatenation du caractere '#" et des trois chaines)

  couleurFond = '#' + rouge + vert + bleu;

// On change la couleur du fond

  document.bgColor= couleurFond;
}
//-->
</script>
</HEAD>

<BODY onscroll="chgfond();" BGCOLOR="#FF0000">

a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>
a<BR>

</BODY>
</HTML>

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
vendredi 27 août 2004
Statut
Membre
Dernière intervention
27 août 2004

Bravo pour ce script !

Pour ton premier script c'est même impressionnant !
Je te souhaite un bel avenir en JavaScript.
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Rigolo !!
Chez moi ça marche tres bien sur ns et sur mozilla : rien à changer. Par contre, quand la page est trop longue, la couleur ne change plus : Il faudrait peut_etre revoir le calcul de la variable position .
Messages postés
101
Date d'inscription
vendredi 30 août 2002
Statut
Membre
Dernière intervention
5 novembre 2004

Bonne idée, surtout pour un premier script :)

Pour l'ameliorer, il faudrait que les couleurs de debut et de fin soit personnalisable, en gros que ce soit un vrai dégradé :)

Original pour un début ;-)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.