Mardi 28 octobre 2008 2 28 /10 /2008 16:56

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 un texte libre en haut ou en base de page (dans la colonne l'animation reste coincée dans la colonne).

Allez booooh!
Par Lavande - Publié dans : Over-Blog - Ecrire un commentaire - Voir les 4 commentaires
Retour à l'accueil



Je le fais pour vous !


Passer en mode avancé, installer un menu, migrer votre blog, créer un blog wordpress, besoin d'une bannière, relooker votre blog... Vous avez besoin d'aide ?
Je le fais pour vous ! Contactez moi, j'établierai un devis ! Pour un premier contact, clic ici.
@ tout de suite !

Coup de pouce pour

Comboost qui met à disposition des bloggeurs ses supers diaporamas !



 

Je sais aussi cuisiner...

Visitez mon autre blog !


Achetez mon livre !

Boutonlivre01

Installez le logo!

Parce que peut être vous avez trouvé votre bonheur sur blogtuto et que vous avez envie de le faire savoir, un petit lien ou une petite image sur votre blog, ça me fait drôlement plaisir quand je passe chez vous et que je reconnais mes codes... Alors pensez-y !

bouton_blogtuto

 




Bookmark and Share
http://www.wikio.fr
J'invite aussi les bloggeurs Haut et fort à ajouter le logo de Gee Mee, contributeur actif pour leur plateforme !

Personnalisez votre blog avec Gee Mee

Recherche

Comptons !

Compteur de visiteurs en lignes Nethique.info Il y a  7  personne(s) sur ce blog

Syndication

  • Flux RSS des articles
 
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés