CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 21 04:41:12

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

CHANGEMENT DE COULEUR EN DÉFILANT

Information sur la source

Note :

10,00 / 10

Catégorie :Effets Niveau :Débutant Date de création :06/08/2004 Vu :4 093

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
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
</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

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

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

Derniers Blogs

NOUVEAU SYSTèME D'AIDE POUR VISUAL STUDIO 2010 : POUR CEUX QUI N'APPRéCIENT PAS TROP L'ABSENCE D'INDEX... par coq

L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit

COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL

SQL SERVER : QUERY NOTIFICATION OU COMMENT êTRE NOTIFIé DE MODIFICATIONS DE DONNéES CôTé APPLICATION (SQLDEPENDENCY) par christian

[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson

Forum

SUPPRESSION BANDEAU LECTEUR VIDEO par philou8

RE : PRELOAD IMAGES ET SWF D'UN SITE ENTIER par pegase31

PRELOAD IMAGES ET SWF D'UN SITE ENTIER par Zedbar1

RE : FERMER LA PAGE par PetoleTeam

RE : LECTEUR VIDEO FLASH + JAVASCRIPT par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods