BlogTuto

Tuto pour blog et assistance blogueur. Dépannage des blogueurs, passage en mode avancé accompagné, relooking blog, bannière pour blog

Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :

http://www.blogtuto.org/

mardi 28 octobre

Faire traverser le blog par des images animées

C'est Halloween et envie de faire traverser votre blog par des chauves souris?


sorcier_002

Alors le script est sensiblement le même que celui pour faire tomber de la neige mais avec un passage de gauche à droite. Fabrice de Over-blog m'a gentiment aidé pour vous proposer cette animation adaptée. Qu'il en soit remercié :-)

Je n'ai pas percé tous les secrets de ce script, je vous laisse faire si le cœur vous en dit. Je mets juste en rouge l'endroit où vous devez mettre vos images.

Donc le script est le suivant :

<script>//Snow - http://www.btinternet.com/~kurt.grigg/javascript

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

(function(){
var num = 2;   //Nombre de flocons
var timer = 100; //Vitesse de descente
var enableinNS6 = 1 //La vitesse varie selon les navigateurs. (1=yes, 0=no).
//Adresse des gifs ci-dessous
var url_gif = new Array();

url_gif[0]= "votreimage.gif"; // chauve-souris

url_gif[1]= "votreimage.gif";


nb_floc = 2; // Nombre de d'images diffÈrentes

//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] = 15; // Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:"><img src="'+url_gif[i%(nb_floc-1)]+'"><\/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*0.95;
//  sx = d.defaultView.scrollMaxX;
  rh = oh; //-sy;
  rw = ow; //-sx;
}
else{
  rh = r.innerHeight;
  rw = r.innerWidth*0.95;
}
h = rh - 2; 
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth*0.80;
}
}



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++){
dx = fall[i];
dy = 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>

Le script est à coller dans le body. J'ai choisi pour ma part tout en base de la page, ça évite de polluer le script dans lequel vous allez plus souvent.

Allez booooh!


Tags : ,
Posté par Lavande à 16:52 - Commentaires [2] - Permalien [#]



Commentaires

    Ben je peux te dire que mon ordi il aime pas les chauve souris !!! ça fait apparaitre puis disparaitre l'ascenseur du bas et puis ça RAMeuh §

    Posté par MIMOUNETTE, mardi 28 octobre à 19:20
  • ça me fait peur tous ces signes! Pourtant
    j'aimerais bien savoir faire!!

    Posté par passiflore2, mardi 28 octobre à 21:00

Poster un commentaire







Haut de Page