Changement de couleur en défilant

Commenter

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

S'inscrire maintenant

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.