Effetti scorrimento

[larapratesi]

Ciao volevo sapere se era possibile ottemere un'effetto scorrimento come mostrato nella slide grafica allegata.
Grazie

[paxal78]

cioè?
non capisco..

da un immagine statica come si fa a capire un effetto in movimento? :master:

[artorius]

@paxal78
lo scroller orizzontale dell'immagine che ci starebbe a fare?

@larapratesi
Ti conviene usare una libreria grafica se vuoi qualcosa di già implementato. Le più usate sono:
scriptaculous: http://script.aculo.us/
Effect.Morph: http://github.com/madrobby/scriptacu...s/effect-morph

mootools : http://mootools.net/
Fx.Tween: http://mootools.net/docs/Fx/Fx.Tween

jQuery : http://jquery.com/
Effects/animate: http://docs.jquery.com/Effects/animate#paramsoptions

Quello che devi cambiare è l'altezza dell'elemento B facendola diventare 0px, all'evento onMouseOver dell'elemento C.

Se hai problemi chiedi pure.

[paxal78]

@paxal78
lo scroller orizzontale dell'immagine che ci starebbe a fare?

ops... svista...

[larapratesi]

Ho visto le gallerie in questione, ma il mio problema è anche quello che l'elemento C è un footer che mi deve stare sempre attaccato al lato inferiore del browser e ridimensionarsi a seconda della risoluzione. Ci sono esempi anche di questo tipo?
Grazie

[artorius]

per fare una cosa del genere devi ridimensionare l'altezza del footer mentre modifichi quella del B.

Se usassi Mootools sarebbe:

HTML:

<div id="A">

</div>
<div id="B">

</div>
<div id="C">

</div> 

JS:

var changingSize = 400;
var oldB, oldC, newB, newC;
var fxB, fxC;

window.addEvent('load', function(){
   fxB = new Fx.Tween($('B'));
   fxC = new Fx.Tween($('C'));
   oldB = $('B').getSize().y;
   oldC = $('C').getSize().y;
   newB = oldB - changingSize;
   newC = oldC + changingSize;

   $('C').addEvents({
      'mouseenter' : function(){
         fxB.cancel();
         fxB.start('height', newB);
         fxC.cancel();
         fxC.start('height', newC);
      },
      'mouseleave' : function(){
         fxB.cancel();
         fxB.start('height', oldB);
         fxC.cancel();
         fxC.start('height', oldC);
      }
   });
}); 

Dovrebbe funzionare

[larapratesi]

ho provato lo script ma volevo sapere se c'era verso che questo div mi si ridimensionasse a seconda della risoluzione del pc.
Grazie

[artorius]

ah, beh, quella è un altra questione:
per il width, ti basta fare 100% e si ridimensiona in modo automatico, ma per l'height devi usare:

window.getSize().y

per ottenere l'altezza della pagina rispetto alla dimensione del browser.

A quel punto togli l'altezza di top e footer e la imposti come altezza del B.

[larapratesi]

Perfetto funziona!!!!Grazie mille
l'ultima domanda...poi ti lascio in pace...è possibile fare la stessa cosa con la libreria jquery?

[artorius]

ah, boh! jQuery proprio non lo uso mai... vai a vedere nella documentazione