Aide - Recherche - Membres - Calendrier
Version complète : Des Images Qui Tombent Sur Votre Site
CCS Forums > Informatique > Outils WebDesigns > JavaScript
C•Dryk™
12/12/2007, 15:22
En voulant agrémenter le site Web CCScript pour cette fin d'année, je cherchais un script JavaScript qui permet de simuler de la neige qui tombe. J'ai trouvé un script libre intéressant, que tout le monde peut utiliser en conservant bien sur les crédits de l'auteur. Je vous le dépose ici tel quel, j'ai simplement traduit les commentaires de l'anglais vers le français pour une utilisation plus facile:

HTML
<script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configurer ci-dessous pour changer l'URL de l'image du flocon de neige
var snowsrc="snow.gif"
// Configurer ci-dessous pour changer le nombre de flocons de neige à rendre
var no = 10;
// Configurer après combien de temps les flocons de neige disparaissent (0=jamais)
var hidesnowtime = 0;
// Configurer si la chute des flocons de neige est basée sur la hauteur de la fenêtre du navigateur, ou sur la hauteur de la page web complète ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Fin de la configuration//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // variables de coordonnées et position
var am, stx, sty; // variables d'amplitude et de session
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // régler les variables de coordonnées
xp[i] = Math.random()*(doc_width-50); // régler les variables de position
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // régler les variables d'amplitude
stx[i] = 0.02 + Math.random()/10; // régler les variables de session
sty[i] = 0.7 + Math.random(); // régler les variables de session
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // Fonction d'animation principale pour IE et NS6
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // réitérer pour chaque point
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>


Source: http://www.dynamicdrive.com/dynamicindex3/snow.htm

Images proposées par l'auteur:

et une alternative:

*Faites un clic sur une image avec le bouton droit de la souris, et sélectionnez "enregistrer la photo sous..."


• Version modifiée pour CCScript

J'ai ensuite voulu adapter plusieurs choses:

- Je souhaitais que certains flocons puissent tomber sur toute la hauteur de la page (pour qu'il y en ai un peu partout) donc avec le réglage "pageheight", mais pour les forums étalés en hauteur (pages très longues) je voulais également que certains flocons ne parcours pas tout l'écran pour repartir plus rapidement du haut de la page (après 1400 pixels).
- Je voulais également que certains flocons ne puissent parcourir que l'entête du site.
- Je cherchais un système pour pouvoir gérer plusieurs images, utilisant par exemple des tableaux JavaScript (arrays).
- Je voulais trouver un moyen d'éviter le bogue de ce code lors du chargement progressif des pages (les flocons étaient concentrés 2 à 5 secondes tout en haut de la page, ce n'était pas beau). L'idée était par exemple de définir une hauteur minimale de chute des flocons.
- Je voulais fluidifier l'apparition via un timer qui permet de commencer l'animation un peu après le chargement.
- Je voulais enfin créer mes images personnalisées de flocons de neiges, et donc en utiliser plusieurs.

Voici mon code retravaillé. Vous pouvez l'utiliser librement pour vos sites web ou autres, en maintenant les crédits bien sur:

HTML
<script type="text/javascript">
//Created and submitted by Altan d.o.o. (http://www.altan.hr/snow/index.html)
//Edited by C-Dryk (http://www.ccscript.net/forum/index.php?showtopic=1114)
//This notice must stay intact for use

// Configurer après combien de temps les flocons de neige disparraissent (0=jamais)
var hidesnowtime = 0;
// Configurer si la chute des flocons de neige est basée sur la hauteur de la fenêtre du navigateur, ou sur la hauteur de la page web complète ("windowheight" or "pageheight")
// Configurer la vitesse de l'animation
var speed = 9;
// Hauteur minimum de l'animation (previent des erreurs visuelles lors du chargement de la page)
var doc_min = 400;
// Taille de l'entête pour les flocons seulement sur l'entête (ot array)
var doc_header = 140;
// Configurer ci-dessous pour changer le nombre de flocons de neige à rendre (en fonction de snow array ci-dessous)
var no = 16;
// Tableau des images utilisées
var snow = new Array();
snow[0] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow1.gif"
snow[1] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[2] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[3] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow1.gif"
snow[4] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[5] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[6] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow1.gif"
snow[7] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[8] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[9] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[10] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[11] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[12] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[13] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow1.gif"
snow[14] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow3.gif"
snow[15] = "http://www.ccscript.online.fr/ccsmedia/ccs_snow2.gif"
// Flocons de neige réglés pour toujours descendre sur toute la page "pageheight" depuis snow array (les autres images retouneront en haut après 1400 pixels)
var ph = new Array();
ph[0] = "true"
ph[1] = "true"
ph[2] = "true"
ph[3] = "true"
ph[4] = "true"
// Flocons de neige réglés pour toujours descendre le long de l'entête uniquement depuis snow array
var ot = new Array();
ot[5] = "true"

///////////Fin de la configuration//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // variables de coordonnées et position
var am, stx, sty; // variables d'amplitude et de session
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
ccs = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // régler les variables de coordonnées
xp[i] = Math.random()*(doc_width-50); // régler les variables de position
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*15; // régler les variables d'amplitude
stx[i] = 0.02 + Math.random()/10; // régler les variables de session
sty[i] = 0.7 + Math.random(); // régler les variables de session
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://www.ccscript.net\"><img src='" + snow[ccs] + "' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" + snow[ccs] + "' border=\"0\"><\/div>");
}
}
if (ccs == (snow.length-1)) { ccs = 0; }
else { ccs += 1; }
}

function snowIE_NS6() { // Fonction d'animation principale pour IE et NS6
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // réitérer pour chaque point
yp[i] += sty[i];
if ((((yp[i] > doc_height-50) || ((yp[i] > 1400) && !ph[i])) && (doc_height > doc_min)) || (ot[i] && (yp[i] > doc_header))) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", speed);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
function showsnow(){
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="visible"
}

if (ie4up||ns6up){
snowIE_NS6();
setTimeout("showsnow()", 1000)
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>


Voici les images, que j'ai créées dans photoshop (donc exclusivité, unique sur le web et tout, genre les flocons de neige que personne n'a jamais eu!!! lol). Bien sur, vous pouvez également les utiliser...

et une variante argentée:

*Faites un clic sur une image avec le bouton droit de la souris, et sélectionnez "enregistrer la photo sous..."

Vous pouvez bien sur utiliser d'autres images que de la neige, pour rendre d'autres effets, ainsi que plus d'images en ajoutant des entrées au tableau snow[x] avec les urls des images, en n'oubliant pas de changer le nombre d'images (actuellement 16, soit toujours 1 de plus que le snow[x] le plus élevé, ici snow[15]). Vous pouvez utiliser plusieurs fois une même image, pour en avoir plusieurs copies affichées dans l'effet final.

Compatibilité:
Internet Explorer 5.5 ou superieur
FireFox 1.0 (versions beta également)
Netscape 6.0 ou superieur
Opera 7.0 ou superieur

Note: Le code se place entre les balises <BODY> et </BODY> d'une page HTML par exemple.


Vous pouvez voir un exemple en sélectionnant le Theme VS xmas sur notre site Web CCScript (pour les utilisateurs enregistrés uniquement).


Joyeuses fêtes de fin d'année à tous !
Félix-le-©hat™
24/12/2007, 09:32
Merci C-Dryk wub.gif

Moi c'est mis sur une des pages de mon site good.gif
J'ai juste rajouté un peu de flocons innocent.gif

Super beau et super idée thumbsup.gif
C•Dryk™
24/12/2007, 14:44
Content que ce soit utile smile.gif
Félix-le-©hat™
08/01/2008, 13:30
CITATION(C•Dryk™ @ 24/12/2007, 14:44) *
Content que ce soit utile smile.gif


euhhhhhhh
Pas vraiment utile rolleyes.gif

Mais le fait que tout soit modifiable (y compris les images)
Là.... çà devient vachement interressant (passez moi l'expression)
Ceci une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquez ici.
Invision Power Board © 2001-2012 Invision Power Services, Inc.