begin process at 2012 02 14 11:03:55
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > CHANGEMENT DE COULEUR EN DÉFILANT

CHANGEMENT DE COULEUR EN DÉFILANT


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Débutant Date de création :06/08/2004 Vu :5 027
Auteur : Chucks

Ecrire un message privé
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

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

  • <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>
<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>



 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de francktfr le 06/08/2004 08:27:14

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 ;-)

Commentaire de roro06 le 23/08/2004 08:56:52

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 .

Commentaire de BobOlivier le 27/08/2004 12:49:58

Bravo pour ce script !

Pour ton premier script c'est même impressionnant !
Je te souhaite un bel avenir en JavaScript.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)