Javascript au 1er plan!

Fermé
arnlig3550 - 5 déc. 2008 à 22:07
 arnlig3550 - 8 déc. 2008 à 20:06
Bonjour,

j'ai créer un site entièrement en flash, et vu que noel approche, j'aimerais mettre un effet de neige qui tombe par dessus le site, j'ai voulu le faire en flash mais celà ralenti trop le site, donc je suis parti sur de la neige en javascript, j'ai donc un fichier nommé "snow.js" avec comme code:



if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 50; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}


if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}


function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}


function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}


function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}


function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}


if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}

})();
}//End.



et dans mon fichier index du site j'ai mis entre les balises body, ce code:


<script type="text/javascript" src="snow.js"></script>


le soucis c'est que je ne vois pas la neige car je pense qu'elle se trouve derrière mon site!
j'aimerais donc savoir comment faire pour mettre la neige au 1er plan, devant le site en flash quoi
si quelqu'un peut m'aider a rajouter le bout de code qui servira a ça, j'ai vu sur le net qu'il y avait "zindex" mais je n'arrive pas le faire fonctionner, étant débutant je dois surement mal faire car je pense cette solution bonne, donnez moi confirmation et si possible la solution

merci
A voir également:

6 réponses

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
5 déc. 2008 à 22:42
Bonsoir,

regardes du côté du CSS, tu dois pouvoir mettre ton cadre en premier plan et en transparence

https://www.alsacreations.com/
0
peux tu me faire un modèle de code car je suis débutant dans la programmation et j'y pige pas grand chose, lol
et sinon inserer "zindex" dans le fichier .js ça peut pas faire?

merci
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
6 déc. 2008 à 11:54
Non zindex c'est en CSS pas en Javascript

essayes d'adapter ça:

tu mets la partie
<div id="premier_plan">
<script language="javascript">neige();</script>
</div>


tout à la fin, juste après </body>

attention j'ai modifié ta fonction rajout function enige(){..... au début et une } à la fin


ça marche avec IE mais pas avec Firefox (Mozila)

<html>
<head>
<script language="javascript" type="text/javascript">
function neige(){
if ((document.getElementById) && window.addEventListener || window.attachEvent){

	(function(){
		//Configure here.
		var num = 50; //Number of flakes
		var timer = 30; //setTimeout speed. Varies on different comps
		var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).
		//End.

		var y = [];
		var x = [];
		var fall = [];
		var theFlakes = [];
		var sfs = [];
		var step = [];
		var currStep = [];
		var h,w,r;
		var d = document;
		var pix = "px";
		var domWw = (typeof window.innerWidth == "number");
		var domSy = (typeof window.pageYOffset == "number");
		var idx = d.getElementsByTagName('div').length;

		if (d.documentElement.style && typeof d.documentElement.style.MozOpacity == "string") num = 12;

		for (i = 0; i < num; i++){
			sfs[i] = Math.round(1 + Math.random() * 1);
			document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
			+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

			currStep[i] = 0;
			fall[i] = (sfs[i] == 1)? Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
			step[i] = (sfs[i] == 1)? 0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
		}


		if (domWw) r = window;
		else{
			if (d.documentElement && typeof d.documentElement.clientWidth == "number" &&d.documentElement.clientWidth != 0)
		r = d.documentElement;
			else{
				if (d.body && typeof d.body.clientWidth == "number") r = d.body;
			}
		}


		function winsize(){
			var oh,sy,ow,sx,rh,rw;
			if (domWw){
			if (d.documentElement && d.defaultView &&
			typeof d.defaultView.scrollMaxY == "number"){
			oh = d.documentElement.offsetHeight;
			sy = d.defaultView.scrollMaxY;
			ow = d.documentElement.offsetWidth;
			sx = d.defaultView.scrollMaxX;
			rh = oh-sy;
			rw = ow-sx;
			}
			else{
			rh = r.innerHeight;
			rw = r.innerWidth;
			}
			h = rh - 2;
			w = rw - 2;
			}
			else{
			h = r.clientHeight - 2;
			w = r.clientWidth - 2;
			}
		}


		function scrl(yx){
			var y,x;
			if (domSy){
			y = r.pageYOffset;
			x = r.pageXOffset;
			}
			else{
			y = r.scrollTop;
			x = r.scrollLeft;
			}
			return (yx == 0)?y:x;
		}


		function snow(){
			var dy,dx;

			for (i = 0; i < num; i++){
			dy = fall[i];
			dx = fall[i] * Math.cos(currStep[i]);

			y[i]+=dy;
			x[i]+=dx;

			if (x[i] >= w || y[i] >= h){
			y[i] = -10;
			x[i] = Math.round(Math.random() * w);
			fall[i] = (sfs[i] == 1)?
			Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
			step[i] = (sfs[i] == 1)?
			0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
			}

			theFlakes[i].top = y[i] + scrl(0) + pix;
			theFlakes[i].left = x[i] + scrl(1) + pix;

			currStep[i]+=step[i];
			}
			setTimeout(snow,timer);
		}


		function init(){
			winsize();
			for (i = 0; i < num; i++){
			theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
			y[i] = Math.round(Math.random()*h);
			x[i] = Math.round(Math.random()*w);
			}
			snow();
		}


		if (window.addEventListener){
			window.addEventListener("resize",winsize,false);
			window.addEventListener("load",init,false);
		}
		else if (window.attachEvent){
			window.attachEvent("onresize",winsize);
			window.attachEvent("onload",init);
		}

	})();
}//End.
}
</script>
</head>
<STYLE type="text/css">
       BODY { background-color: black; }
	   #premier_plan{
	   width:auto
	   heigth:auto
	   }
    </STYLE>

<body background>
blabal  bolobolo
</body>
<div id="premier_plan">
<script language="javascript">neige();</script>
</div>

</html>

0
j'ai essayer mais j'arrive pas, je dois mal faire je pense, mon fichier nommé "snow.js" il ne me sert plus? car daprès ce que j'ai compris tout le code que tu a mis c'est a mettre dans mon index, non? car je vois que tu as mis les balises html alors que dans le fichier js il y en a pas, ai-je bon?

sinon c'est dommage que ça marche pas sur mozilla, car j'ai pris ce code exprès parsqu'il marchait sur mozilla et sur IE, il y a pas une solution pour ça?

merci
0
ça y es j'ai trouver une solution toute simple enfait, dans mon index, entre les balises body où se trouve le swf de mon site, j'ai rajouter:

<param name=”wmode” value=”transparent” />

donc du coup on voit la neige qui tombe, mais il me reste un soucis c'est que l'arrière plan est blanc autour de mon swt alors qu'avant il était bien noir comme je voulais car dans la balise body ou se trouve le swf, j'ai mis "bgcolor="#000000"", j'ai donc l'impression que vu que j'apelle un fichier js externe ma couleur de fond du swf n'est plus pris en compte, quelqu'un a t'il la solution pour que la couleur de fond soit noire?

merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
enfait c'est bon j'ai trouver la solution, j'ai rajouter


<style type="text/css">
<!--
body {background-color: #000000;}
-->
</style>


et c'est bon ça marche
0
et zut! ça marche pas sous mozilla

quelqu'un aurait-il la solution pour que ça marche sous IE et sous mozilla?

merci
0