Pluie d'images sur le blog

Publié le par lali



Ce script vous permet de faire tomber des images sur votre blog
Voir exemple sur cette page
Mettre le script dans le HTML d'un module texte libre en pied de page
Néanmoins,il vous faudra être en privilége pour utiliser ce code

Ce script ne comporte pas d'images, à vous de les y inserer




<script>//Snow - http://www.btinternet.com/~kurt.grigg/javascript
 
if  ((document.getElementById) &&  
window.addEventListener || window.attachEvent){ 
 
(function(){ 
 
//Configure here. 
 
var num = 30;   //Nombre d'images 
var timer = 400; //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]= "URL de l'image";  
url_gif[1]= "URL de l'image"; 
  
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>'); 
 
 
// '+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px;border:1px solid #dddddd; 
 
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.80; 
  sx = d.defaultView.scrollMaxX; 
  rh = oh-sy; 
  rw = ow-sx; 
 } 
 else{ 
  rh = r.innerHeight; 
  rw = r.innerWidth*0.80; 
 } 
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++){ 
 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> 




Ce que vous pouvez modifier

var num = 30;   //Nombre d'images : changez le chiffre pour le nombre d'image
var timer = 400; //
Vitesse de descente : changez le chiffre pour la vitesse


Pour rajouter plusieurs images c'est simple, suivre cette indication :

url_gif[0]= "URL de l'image";
url_gif[[color=#0099ff]1[/color]]= "URL de l'image";
url_gif[[color=#0099ff]2[/color]]= "URL de l'image";
url_gif[[color=#0099ff]3[/color]]= "URL de l'image";


... et ainsi de suite. ne pas oublier non plus de modifier
la ligne suivante pour y notifier le nombre d'image que vous avez mis :
 
nb_floc = #; // Nombre d'images différentes :
Remplacez le # par votre nombre d'images


Source du script non retrouvé

Autres articles dans cette catégorie



Pensez a remplir aussi le formulaire
Pour toutes demandes de
créations graphiques


Publié dans Aide pour blogs

Commenter cet article

Gaelle 09/06/2010 10:21



Merci lali !!! bisous



Gaelle 09/06/2010 10:13



sa c'est super !!! dit moi meme pour les curseurs il faut etre au niveau  "privilege" ?? parce que comme je suis au niveau confiance je sais pas se qui
va marché , ^^ et comment on fais pour etre en privilege ???



lali 09/06/2010 10:20



Bonjour Gaelle et bienvenue chez les fées


Les curseur fonctionnent en confiance aussi


Pour atteindre le niveau privilege regarde cet article


http://lapassiondelali.over-blog.com/article-35468610.html


Belle journée à toi


 



Secyl 03/12/2009 23:35


Super ! Merci beaucoup. J'aime bien mettre mes propres fonds, et tout ... mes j'ai toujours du mal à savoir comment les insérer.
Et là, j'avais créer mon propre flocon de neige, mais je ne savais pas comment le faire tomber sur mon blog.
Ca rend super bien (en tout cas, je trouve).
merci encore ! 


lali 03/12/2009 23:38


Trés heureuse que mes tutos te conviennent
Bienvenue chez les fées


anna 02/09/2009 19:15

lol lali ne te moque pas de moi j ai l impression de lire du chinois j avoue q apres 10 h de boulot je n ai pas les idees tres nettes mais je me promene chez toi et j admire

lali 02/09/2009 19:24


Tu regardera tout ces codes quand tu seras reposé


tempetenoire 25/08/2009 20:19

bonjour j'arrive  dans  votre joli petit espace pour vous  demander un peu d'aide  je voudrais  me faire un site sur over-blogmais je ne  sais pas du tout comment il fonctionne  pour mettre une bannière un fond etcsi vous pouviez m'aider se srais très gentil a vousje vous souhaite une très belel soirée très amicalement  tempetenoire

lali 25/08/2009 20:28


Bonsoir tempete noir
Je vous conseille de lire mes aides blogs
http://lapassiondelali.over-blog.com/pages/Outils_et_aide_pour_blogs-1599926.html
ou en cliquant sur la mini banniere qui clignote en haut de mon blog
Il y a aussi le forum d'aide
http://forum.over-blog.com/
Si vous avez des questions n'hésitez pas
Bonne soirée