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

Commentaires

bonjour, bientôt les vacances et je vais "décorer" mon blog (index en images par ex) et là, je voudrais "faire tomber de la neige" mais j'ai RIEN COMPRIS DU TOUT : où dois-je trouver les images (écrit en rouge dans le script) ? Et le script est à coller dans "nouveau message" ? Merci
Commentaire n°1 posté par missisa le 14/12/2008 à 21h07
les images c'est à toi de les trouver sur le net. Le script est à mettre en mode avancé dans le script des pages (sauf la feuille de style)
Réponse de Lavande le 16/12/2008 à 17h47
hELLO!
Merci de tous ces conseils et précieux renseignements..mais si je veux autre chose qu'une chauve-souris, où dois-je aller pour en trouver?
mERci
Commentaire n°2 posté par Morali BREE le 18/03/2009 à 21h09
le mieux est de fouiller sur le net ;-)
Réponse de Lavande le 23/03/2009 à 07h25
Superbe cette petite animation, mais n'est pas possible pour les mode Confiance.
Quel dommage !!!
Commentaire n°3 posté par Isabelle le 21/06/2009 à 19h01
oui Ob est assez nul pour ça !
Réponse de Lavande le 21/06/2009 à 19h24
Bonjour

Je n'y connais rien du tout mais,
J'ai réussi du premier coup, excellente explication et superbe animation.

J'ai ajouter le code et surtout votre logo sur mon blog en article.
Merci encore.

Pour ma part j'ai pris un gif anim de Michael Jackson.
merci
Bonne journe.
Byebye
Commentaire n°4 posté par cleorinne le 17/07/2010 à 13h02



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  9  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