animazione javascript

[destynova]

Ciao a tutti,

ho trovato su internet un'animazione simpatica di "quadrati" che all'avvio della pagina
si allineano vedi "http://scripty2.com/" (i quadrati verdi).
sono riuscito a replicarli e modicarli.
Tuttavia non sono riuscito a creare un quadrato formato da 3 "quadrati" di cui sopra per riga.

parte html

<div id="menu4">
		<ul id="navigation" class="style1" style="left: -93px; top: 3px; width: 600px">
	    <li class="huh" style="left: 20px; top: -502px">
    	
    	<li class="huh" style="left: 20px; top: -502px">
    	
    	<li class="huh" style="left: 20px; top: -502px">
    	
    	   	[/list]
 			<script src="js/application.js" type="text/javascript"></script>
 			
	  
	</div>

Element.addMethods({
  redraw: function(element){
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
  }
});

Ahhh = {  
  rays: function(style, radius, colorFrom, colorTo, opacityFrom, opacityTo, rotate){
    var element = new Element('div',{ className: 'ahhh', style:'z-index:-2;position:absolute' }).setStyle('display:none');
    $(document.body).insert(element);
    
    var s = radius, p = Raphael(element, s, s);
    element.setStyle(style);

    function addSector(path, cx, cy, r, startAngle, endAngle) {
      var x1 = cx + r * Math.cos(-startAngle * Math.PI / 180),
        x2 = cx + r * Math.cos(-endAngle * Math.PI / 180),
        y1 = cy + r * Math.sin(-startAngle * Math.PI / 180),
        y2 = cy + r * Math.sin(-endAngle * Math.PI / 180);
      path.lineTo(cx, cy).lineTo(x1, y1).lineTo(x2,y2);
    };

    var g = p.set();
    var steps = 18;

    var path = p.path({stroke:'none',strokeWidth:'none'}).attr({
        gradient: { 
          type: "radial",
          dots: [
            {color: colorFrom, opacity:opacityFrom },
            {color: colorTo, opacity:opacityTo }
          ]
        }
    }).moveTo(s/2,s/2);

    $R(0,steps-1).each(function(a){
      var ang = a*360/steps + 360/(steps*4), v = [
        0, 0,
        Math.sin((ang+90) * Math.PI / 180),
        Math.cos((ang+90) * Math.PI / 180)
      ];
      if(v[2]<0){ v[0] = -v[2]; v[2] = 0 }
      if(v[3]<0){ v[1] = -v[3]; v[3] = 0 }

      addSector(path, s/2, s/2, s/2, a*360/steps, a*360/steps + 360/(steps*2));
    });  
    
    path.andClose();

    var d = (new Date).getTime(), l;
    Ahhh.interval = setInterval(function(){
      l = (new Date).getTime(); d = l-d;
      path.rotate(rotate * d/1000); d = l;
      if(Prototype.Browser.WebKit) element.redraw();
    }, 50);
    
    if(Prototype.Browser.IE)
      element.show();
    else
      element.setStyle('opacity:0').show().morph('opacity:1',{duration:2});
    Ahhh.element = element;
  }
};

Number.prototype.fuzzy = function(value){
  return this+(Math.random()*value)-value/2;
};

Array.prototype.random = function(){
  return this.sortBy(Math.random).first();
};

(function(){
  var t = $w('spring swingTo swingFromTo bounce bouncePast easeOutBounce'),
    nav = $('navigation');
    
    
    var a = 0
    
    
    
   function shuffle()
  
  
  {
    nav.select('li').each(function(box, i)
     
  
  
  
  
  
  
  
    {
      box.morph('top:'+(i*a)+'px;left:'+(i*200)+'px', {			//setto l'altezza dove si fermano con + = basso con - = alto left = distanza tra i cubi
        duration: 2+(Math.random()*2), delay: i/4,
        propertyTransitions: { top: t.random(), left: t.random() }});
    });
  }










  
  nav.select('li').each(function(box,i){
   //var c = Math.cos((0).fuzzy(10)/(180/Math.PI)).toFixed(3), s = Math.sin((0).fuzzy(10)/(180/Math.PI)).toFixed(3),
     //filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+c+",M12="+(-s)+",M21="+s+",M22="+c+")";
    
  //  box.setStyle('left:'+(i*200).fuzzy(150)+'px;'+
    //  '-moz-transform:rotate('+(0).fuzzy(10)+'deg);'+
    // '-webkit-transform:rotate('+(0).fuzzy(10)+'deg);'+
   //  '-webkit-transform:rotate('+(0).fuzzy(10)+'deg);'+
    // 'filter:'+filter);
    
    //(function(){ box.setStyle('z-index:1'); }).defer();  
  });
  shuffle();
  
  var zIndex = 0;  
  nav.select('li').each(function(n){
    n.observe('mouseenter', function(){
      n.setStyle('z-index:'+(zIndex++)).morph('font-size:13.75px;width:180px;height:180px;margin-top:-10px;margin-left:-10px');
    });
    n.observe('mouseleave', function(){
      n.morph('font-size:13px;width:160px;height:160px;margin-top:0px;margin-left:0px');
    });
  });
  
  $('alpha').setStyle('opacity:0').morph('opacity:1',{ transition: function(pos){ return S2.FX.Transitions.blink(pos, 7) }, duration: 3 });
  
  (function(){
    Ahhh.rays('left:50%;margin-left:-300px;top:40%;margin-top:-220px;width:700px;height:700px;overflow:hidden', 700, "#9ed356", "#97be63", 1, 0, 2.5);
  }).delay(4);
})();

var Shelf = {
  initialize: function() {
    $('footer').morph('bottom:0', { delay: 2, duration: 1, transition: 'easeInQuint' });
    $('breadcrumb').select('li').each(function(li, i) {
      li.observe('mouseenter', this.enter.bind(this)).observe('mouseleave', this.leave.bind(this))
        .morph('margin-top:-60px', { duration: .3+Math.random()*.2, delay: 3, transition: 'easeOutQuint' })
        .morph('margin-top:0', { transition: 'bounce', duration: .5 });
    }, this);
  },
  enter: function(event) {
    event.findElement('li').down('.bubble').appear();
  },
  leave: function(event) {
    var bubble = event.findElement('li').down('.bubble');
    bubble.morph('opacity:0', Element.hide.curry(bubble));
  }
}

Shelf.initialize();

sono presenti anche altre 2 librerie (se servono le posto)


il problema è tuttavia qui

function shuffle()
    
  {
    nav.select('li').each(function(box, i)
       
    {
      box.morph('top:'+(i*a)+'px;left:'+(i*200)+'px', { //setto l'altezza dove si fermano con + = basso con - = alto left = distanza tra i cubi        
 duration: 2+(Math.random()*2), delay: i/4,
        propertyTransitions: { top: t.random(), left: t.random() }});
    });
  }

non riesco a inserire alcunchè per far si che dopo 3 "quadrati" il quarto venga disegnato sotto.


Ciao

[destynova]

Ciao a tutti! Bhè sembra che la mia richiesta non abbia riscosso molto successo.
comunque ho risolto ecco come:

vecchio codice

function shuffle()
    
  {
    nav.select('li').each(function(box, i)
       
    {
      box.morph('top:'+(i*a)+'px;left:'+(i*200)+'px', { //setto l'altezza dove si fermano con + = basso con - = alto left = distanza tra i cubi        
 duration: 2+(Math.random()*2), delay: i/4,
        propertyTransitions: { top: t.random(), left: t.random() }});
    });
  }

con questa "parte" di codice ottengo

http://soluzioni.it-link.it/test/itlink (homepage)

   var a = 0
   var b = 1
   var c = 0
   var d = 0
    
   function shuffle()
 
  
  {
    nav.select('li').each(function(box, i)
    
  
      {
      
      box.morph('top:'+(a)+'px;left:'+((i*200)-d)+'px', {			//setto l'altezza dove si fermano con + = basso con - = alto left = distanza tra i cubi
        duration: 2+(Math.random()*2), delay: i/4,
        propertyTransitions: { top: t.random(), left: t.random() }});
        
      
        
        
        if (i>1)
        {
        
        d=600
        }
                  
         if (i>1)
         {
    	 a=200
    		
    	 }
    	 if (i>4)
    	 {
        
        d=1200
        }
        if (i>4)
        {
        a= 400
        }

    		
    });
   
    
    
  }

in questo caso otteniamo l'effetto di cui il link sotto

http://soluzioni.it-link.it/test/itl.../prodotti.html





Ciaoo