Inverser le sens

Sujet résolu

22 février 2009 à 14:00:36

Bonjour,

J'ai trouvé cet hiver, un code pour faire tomber de la neige sur mon site en javascript mais je ne connais pas du tout ce langage, j'ai juste deviner quelques explications données en anglais que j'ai traduit en français.

Aujourd'hui je voudrait faire inverser ce code, je voudrais savoir quelle est la ligne de code qui permet de faire voler les flocons du bas vers le haut (parce que je vais aussi changer l'image pour remplacer le flocon).

Voilà donc le code que j'ai actuellement :

<script type="text/javascript">
	//Configure below to change URL path to the snow image
	var snowsrc="element_site/flocon11.gif"   // INDIQUE ICI LE CHEMIN OU SE TROUVE TON FLOCON //
	// (http://i46.servimg.com/u/f46/11/06/95/72/flocon11.gif) //
	// Configure below to change number of snow to render
	var no = 10;
	// Configure whether snow should disappear after x seconds (0=never):
	var hidesnowtime = 0;
	// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
	var snowdistance = "pageheight";

	///////////Stop Config//////////////////////////////////
	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;    // coordinate and position variables
	var am, stx, sty;  // amplitude and step variables
	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;                        // set coordinate variables
		xp[i] = Math.random()*(doc_width-50);  // set position variables
		yp[i] = Math.random()*doc_height;
		am[i] = Math.random()*20;         // set amplitude variables
		stx[i] = 0.02 + Math.random()/10; // set step variables
		sty[i] = 0.7 + Math.random();     // set step variables
		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() 
	{  // IE and NS6 main animation function
		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) 
		{  // iterate for every dot
			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>

Quelqu'un pourrait-il m'aider avec ce code pour obtenir ce que je souhaite ?

Merci à vous.
caline

Nesk

22 février 2009 à 15:07:01

Hum... Inverser le sens de défilement d'une animation n'est pas aussi simple que tu as l'air de le penser hein, surtout si elle n'a pas été prévue pour ça. Bref, je te conseille de laisser tomber, le code serait bien trop long à modifier et je doute que quelqu'un soit prêt à t'aider pour un aussi gros travail surtout si tu n'y mets pas du tien (vu que tu ne connais pas le Javascript).

De plus ce genre d'animation est, à mon goût, très superflu.

Golmote

23 février 2009 à 11:43:45

Dans la situation actuelle, inverser le sens n'est pas très difficile en fait.

Je pense que ceci devrait fonctionner :

//Configure below to change URL path to the snow image
	var snowsrc="element_site/flocon11.gif"   // INDIQUE ICI LE CHEMIN OU SE TROUVE TON FLOCON //
	// (http://i46.servimg.com/u/f46/11/06/95/72/flocon11.gif) //
	// Configure below to change number of snow to render
	var no = 10;
	// Configure whether snow should disappear after x seconds (0=never):
	var hidesnowtime = 0;
	// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
	var snowdistance = "pageheight";

	///////////Stop Config//////////////////////////////////
	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;    // coordinate and position variables
	var am, stx, sty;  // amplitude and step variables
	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;                        // set coordinate variables
		xp[i] = Math.random()*(doc_width-50);  // set position variables
		yp[i] = Math.random()*doc_height;
		am[i] = Math.random()*20;         // set amplitude variables
		stx[i] = 0.02 + Math.random()/10; // set step variables
		sty[i] = 0.7 + Math.random();     // set step variables
		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() 
	{  // IE and NS6 main animation function
		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) 
		{  // iterate for every dot
			yp[i] -= sty[i];
			if (yp[i] < 5) 
			{
				xp[i] = Math.random()*(doc_width-am[i]-30);
				yp[i] = doc_height;
				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)
	}

caline

23 février 2009 à 13:14:53

Merci beaucoup Golmote pour ton aide, c'est exactement ce que je voulais faire.

Je vais comparer les 2 codes pour voir ce que tu as modifié et où.

Golmote

23 février 2009 à 13:16:44

Lignes 69, 70 et 73 je crois.

caline

23 février 2009 à 13:34:39

70,71 et 74

Nesk

23 février 2009 à 18:13:29

Citation : Golmote

Dans la situation actuelle, inverser le sens n'est pas très difficile en fait.

Ah merde je me sens con là

caline

24 février 2009 à 10:39:47

En fait oui tu as raison Golmote, ce sont bien les liens. J'ai un décalage chez moi car ma ligne 1 est ma balise de script

Mais j'ai déchiffré un peu plus le code et j'ai trouvé la ligne qui permet de ralentir les objets.

Inverser le sens

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Inverser le sens

Inverser le sens

Supprimer

Modérer

Signaler le message aux modérateurs