• Tutorial falling (Objetos que caen)

     

    Texto

  •  

    Fuego artificial


     

     

     

     


    votre commentaire
  •  


     

     

     

     


    votre commentaire
  •  

     Nieve 

     


    votre commentaire
  •   

     

     


    votre commentaire
  •  
    <script type="text/javascript">
    
    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
    ******************************************/
      function openwindow(){
    window.open("autumn_effect.htm","","width=350,height=500")
    }
    
      //Configure below to change URL path to the snow image
      var snowsrc="http://www.gif-anime.org/im/gif/webmaster/mini_puces/mini_puces8.gif"
      // Configure below to change number of snow to render
      var no = 10;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";
    
    ///////////Stop Config//////////////////////////////////
    
      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    
    	function iecompattest(){
    	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    	}
    
      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600; 
      
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }
    
      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
      for (i = 0; i < no; ++ i) {  
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
    		if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }
    
      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
    		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    	if (snowdistance=="windowheight"){
    		doc_height = window.innerHeight || iecompattest().clientHeight
    	}
    	else{
    		doc_height = iecompattest().scrollHeight
    	}
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }
    
    	function hidesnow(){
    		if (window.snowtimer) clearTimeout(snowtimer)
    		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    	}
    		
    
    if (ie4up||ns6up){
        snowIE_NS6();
    		if (hidesnowtime>0)
    		setTimeout("hidesnow()", hidesnowtime*1000)
    		}
    
    </script>

    votre commentaire
  •  
    <style>
    .drop { position: absolute; width: 3;  filter: flipV(), flipH(); font-size: 40; color: blue }
    </style>
    <script language="javascript">
    
    //Rain/Snow effect- By Craig Blanchette Craiga.topcities.com
    //Script featured on Dynamic Drive
    //Visit http://www.dynamicdrive.com for this script and more
    
    snow = false;    // false-rain;   true-snow
    snowsym = " * "  //These are the symbols for each
    rainsym = " ' "  //You can put images here.
    howmany = 10     //How many drops/snowflakes?
    
    /**************Do not need to change anything below***********/
    if(snow){sym = snowsym; speed=1; angle=10; drops=howmany}
    else{sym = rainsym; speed=50; drops=howmany; angle=6}
    movex = -speed/angle; movey = speed; count = 0;
    
    function moverain(){
    for(move = 0; move < drops; move++){
    xx[move]+=movex;  yy[move]+=mv[move];
    hmm = Math.round(Math.random()*1);
    if(xx[move] < 0){xx[move] = maxx+10;}
    if(yy[move] > maxy){yy[move] = 10;}
    drop[move].left = xx[move]
    drop[move].top = yy[move]+document.body.scrollTop;
    }setTimeout('moverain()','1')}
    
    </script>
    
    <script language="javascript">
    
    drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()
    ly = "document.all[\'"; st = "\'].style"
    for(make = 0; make < drops; make++){
    document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>');
    drop[make] = eval(ly+'drop'+make+st);
    maxx = document.body.clientWidth-40
    maxy = document.body.clientHeight-40
    xx[make] = Math.random()*maxx;
    yy[make] = -100-Math.random()*maxy;
    drop[make].left = xx[make]
    drop[make].top = yy[make]
    mv[make] = (Math.random()*5)+speed/4;
    drop[make].fontSize = (Math.random()*10)+20;
    if(snow){col = 'white'}else{col = 'blue'}
    drop[make].color = col;
    }
    window.onload=moverain
    
    </script>

    votre commentaire
  •  

    Cambiar colores

    <script language="JavaScript1.2">
    
    /*
    Document firework script (By Kurt Gregg, kurt.grigg@virgin.net)
    Modified/ perm. granted to Dynamic Drive to feature script in archive
    For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
    */
    
    var ns=document.layers?1:0
    var ie4=document.all?1:0
    var ns6=document.getElementById&&!document.all?1:0
    
    amount=14;
    if (ns){
    for (i=0; i < amount; i++)
    document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
    }
    else if (ie4||ns6){
    document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
    document.write("<div style='position:relative'>");
    for (i=0; i < amount; i++)
    document.write("<div id='iestars"+i+"' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;font-size:1;z-index:10'></div>");
    document.write("</div></div>");
    }
    Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
    sClrs=new Array('ffa500','00ff00','FFAAFF','fff000','fffffF')
    Xpos=300;
    Ypos=150;
    initialStarColor='00ff00';
    step=5;
    currStep=0;
    explosionSize=120;
    function Fireworks(){
    var WinHeight=(ns||ns6)?window.innerHeight-100:window.document.body.clientHeight-100;
    var WinWidth=(ns||ns6)?window.innerWidth-100:window.document.body.clientWidth-100;
    var Yscroll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
    for (i=0; i < amount; i++){
    if (ie4||ns6)
    var layer=ns6?document.getElementById("iestars"+i).style : eval("iestars"+i).style;
    else if (ns)
    var layer=document.layers["nsstars"+i]
    var randCol=Math.round(Math.random()*8);
    var randSz=Math.round(Math.random()*2);
    layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100)
    layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100)
    if (currStep < 110){
     if (ns){layer.bgColor=initialStarColor;layer.clip.width=1;layer.clip.height=1}
     else{layer.background=initialStarColor;layer.width=1;layer.height=1;layer.fontSize=1}
     }
    else{
     if (ns){layer.bgColor=Clrs[randCol];layer.clip.width=randSz;layer.clip.height=randSz}
     else{layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz}
     }
    }
    if (currStep > 220) 
    {
     currStep=0;
     Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
     Xpos = 50+Math.round(Math.random()*WinWidth);
     for (i=0; i < sClrs.length; i++)
      {
      var newIcol=Math.round(Math.random()*i);
      }
    initialStarColor=sClrs[newIcol];
    explosionSize=Math.round(80*Math.random()+100);
    }
    currStep+=step;
    setTimeout("Fireworks()",20);
    }
    Fireworks();
    // -->
    </script>

    votre commentaire
  •  
    <SCRIPT LANGUAGE="JavaScript1.2">
    <!--
    
    /*
    Document firework script (By Matt Gabbert, mgabbert@usrtoday.com, http://www.nolag.com)
    Permission granted to Dynamic Drive to feature script in archive
    For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
    */
    
    //set Interval between each firework display, 
    var intervals=2000
    var sparksOn     = true;
    var speed        = 40;
    var power        = 3;
    
    //Dont change these values-------
    var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
    var ns=(document.layers);
    var ie=(document.all);
    var ns6=(document.getElementById&&!document.all);
    var sparksAflyin = false;
    var allDivs      = new Array(10);
    var totalSparks  = 0;
    //-------------------------------
    
    function initAll(){
    	if(!ns && !ie &&!ns6){
    	sparksOn = false;
    	return;
    	}
    setInterval("firework()",intervals)
    
    if (ns)
    	document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
    	for(dNum=0; dNum<7; ++dNum){
    		if(ie)
    			allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
                    else if (ns6)
                            allDivs[dNum]=document.getElementById('sDiv'+dNum).style;
    		else
    			allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
    	}
    }
    
    function firework(){
    //below code detects the browser dimenions
    if (ie){
    documentWidth=document.body.clientWidth
    documentHeight=document.body.clientHeight
    leftcorner=document.body.scrollLeft
    topcorner=document.body.scrollTop
    }
    else if (ns||ns6){
    documentWidth=window.innerWidth
    documentHeight=window.innerHeight
    leftcorner=pageXOffset
    topcorner=pageYOffset
    
    }
    //below code randomly generates a set of coordinates that fall within the dimension
    randomx=leftcorner+Math.floor(Math.random()*documentWidth)
    randomy=topcorner+Math.floor(Math.random()*documentHeight)
    
    
    	if(sparksOn){
    		if(!sparksAflyin){
    			sparksAflyin=true;
    			totalSparks=0;
    			for(var spark=0;spark<=6;spark++){
    				dx=Math.round(Math.random()*50);
    				dy=Math.round(Math.random()*50);
    				moveTo(spark,randomx,randomy,dx,dy);
    			}
    		}
    	}
    }
    
    function moveTo(i,tempx,tempy,dx,dy){
    	if(ie){
    		if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
    			tempy=document.body.offsetHeight+document.body.scrollTop-80;
    		if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
    			tempx=document.body.offsetWidth+document.body.scrollLeft-80;
    	}
    	else if(ns6){
    		if(tempy+80>(window.innerHeight+pageYOffset))
    			tempy=window.innerHeight+pageYOffset-80;
    		if(tempx+80>(window.innerWidth+pageXOffset))
    			tempx=window.innerWidth+pageXOffset-80;
    	}
    	if(tempx>-50&&tempy>-50){
    		tempx+=dx;tempy+=dy;	
    		allDivs[i].left=tempx;
    		allDivs[i].top=tempy;
    		dx-=power;dy-=power;
    		setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
    	}
    	else
    		++totalSparks
    	if(totalSparks==7){
    		sparksAflyin=false;
    		totalSparks=0;
    	}
    }
    window.onload=initAll
    //End-->
    </script>
    
    <style>
    #sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}
    #sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}
    #sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}
    #sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}
    #sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}
    #sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}
    #sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}
    </style>
    <div id="sDiv0">*</div>
    <div id="sDiv1">*</div>
    <div id="sDiv2">*</div>
    <div id="sDiv3">*</div>
    <div id="sDiv4">*</div>
    <div id="sDiv5">*</div>
    <div id="sDiv6">*</div>

    votre commentaire
  •  

    Fuente: http://www.dynamicdrive.com/dynamicindex3/

     <script language="JavaScript1.2">
    
    //Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
    //Modified by Dynamic Drive for NS6 functionality
    //visit http://www.dynamicdrive.com for this scripthttp://www.dynamicdrive.com/dynamicindex3/dl.gif
    
    //Pre-load your image below!
    grphcs=new Array(6)
    Image0=new Image();
    Image0.src=grphcs[0]="http://www.dynamicdrive.com/dynamicindex3/el.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="http://www.dynamicdrive.com/dynamicindex3/fl.gif"
    Image2=new Image();
    Image2.src=grphcs[2]="http://www.dynamicdrive.com/dynamicindex3/el.gif"
    Image3=new Image();
    Image3.src=grphcs[3]="http://www.dynamicdrive.com/dynamicindex3/fl.gif"
    Image4=new Image();
    Image4.src=grphcs[4]="http://www.dynamicdrive.com/dynamicindex3/el.gif"
    Image5=new Image();
    Image5.src=grphcs[5]="http://www.dynamicdrive.com/dynamicindex3/fl.gif" 
    
    Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!
    Ypos=new Array();
    Xpos=new Array();
    Speed=new Array();
    Step=new Array();
    Cstep=new Array();
    ns=(document.layers)?1:0;
    ns6=(document.getElementById&&!document.all)?1:0;
    
    if (ns){
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
    }
    }
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
    }
    document.write('</div></div>');
    }
    WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
    WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
    for (i=0; i < Amount; i++){                                                                
     Ypos[i] = Math.round(Math.random()*WinHeight);
     Xpos[i] = Math.round(Math.random()*WinWidth);
     Speed[i]= Math.random()*5+3;
     Cstep[i]=0;
     Step[i]=Math.random()*0.1+0.05;
    }
    function fall(){
    var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
    var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
    var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
    var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
    for (i=0; i < Amount; i++){
    sy = Speed[i]*Math.sin(90*Math.PI/180);
    sx = Speed[i]*Math.cos(Cstep[i]);
    Ypos[i]+=sy;
    Xpos[i]+=sx; 
    if (Ypos[i] > WinHeight){
    Ypos[i]=-60;
    Xpos[i]=Math.round(Math.random()*WinWidth);
    Speed[i]=Math.random()*5+3;
    }
    if (ns){
    document.layers['sn'+i].left=Xpos[i];
    document.layers['sn'+i].top=Ypos[i]+hscrll;
    }
    else if (ns6){
    document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
    document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
    }
    else{
    eval("document.all.si"+i).style.left=Xpos[i];
    eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
    } 
    Cstep[i]+=Step[i];
    }
    setTimeout('fall()',20);
    }
    
    window.onload=fall
    //-->
    </script>

    votre commentaire
  •  

    Mariposas volando

     

     


    votre commentaire
  •  


     

     

     

     


    votre commentaire
  •  


     

     

     

     


    votre commentaire
  •  


     

     

     

     


    votre commentaire
  •  

     

     


    votre commentaire
  •  


     

    Cambiar cantidad: var no = 3;

     

     


    votre commentaire
  •  


    Cambio:
     1. doc_width =800, doc_height = 600;
    2. Cantidad de gif: var no = 30;
    3. Gif: http://msnsmileys.net/L/Love-Words/red-love.gif

     

     


    votre commentaire
  •  


    Se puede añadir más imágenes: floatimages[4]="http://lh4.ggpht.com/-BEdGTzH8w5A/U6sIFm8eoeI/AAAAAAAA39Q/ESz0Oe9_MLw/minigifs276_thumb.gif?imgmax=800";

    floatimages[5]="http://lh4.ggpht.com/-BEdGTzH8w5A/U6sIFm8eoeI/AAAAAAAA39Q/ESz0Oe9_MLw/minigifs276_thumb.gif?imgmax=800";

     floatimages[6]="http://lh4.ggpht.com/-BEdGTzH8w5A/U6sIFm8eoeI/AAAAAAAA39Q/ESz0Oe9_MLw/minigifs276_thumb.gif?imgmax=800";

     

     

     

     


    votre commentaire
  •  


     

     


    votre commentaire
  •  

    Este es de los copos de nieve. Podéis utilizar cualquier imágen.

     

     


    votre commentaire
  •  

    Tiene caída muy suave, no molesta ni trabajar ni ver la página. Se puede cambiar gif.

     

     


    votre commentaire