Javascript au 1er plan!
arnlig3550
-
arnlig3550 -
arnlig3550 -
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
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:
- Javascript au 1er plan!
- Arrière plan - Guide
- Youtube en arrière plan - Guide
- Plan satellite - Guide
- Logiciel plan maison gratuit facile - Guide
- Plan rapport de stage - Guide
6 réponses
Bonsoir,
regardes du côté du CSS, tu dois pouvoir mettre ton cadre en premier plan et en transparence
https://www.alsacreations.com/
regardes du côté du CSS, tu dois pouvoir mettre ton cadre en premier plan et en transparence
https://www.alsacreations.com/
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
et sinon inserer "zindex" dans le fichier .js ça peut pas faire?
merci
Non zindex c'est en CSS pas en Javascript
essayes d'adapter ça:
tu mets la partie
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)
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>
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
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
ç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
<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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question