[JavaScript] jQuery e scroller animato senza bisogno di plugin

Giusto ieri mi serviva un buon scroller in JavaScript. Unica precondizione, che fosse sviluppato con jQuery. Di solito mi scrivo io le librerie che mi servono. Il proprio codice non dipende da nient’altro ed una volta raggiunto il risultato si è completamente padroni della cosa. In questo caso però la necessità era imposta dall’alto, quindi mi son messo a cercare nella directory plugin qualcosa che potesse fare al caso mio.

Ho trovato più di un plugin utilizzabile, ma tutti avevano almeno un difetto. Uno con troppe opzioni risultava eccessivamente pesante e ripulirlo mi avrebbe preso troppo tempo. Un altro invece era troppo poco performante gestendo solo casistiche standard (nessuna delle quali risultava andar bene a me).

Allora mi son letto direttamente la documentazione di jQuery, convinto che qualche metodo proprio dovesse averlo per far spostare live dei livelli di html. Ed ovviamente c’è: animate permette di gestire eventi in divenire. Nel caso dello scroller, visto che il bello è la visualizzazione dello spostamento, animate permette di far eseguire una semplice direttiva come un evento che parte dallo status attuale fino ad arrivare al risultato stabilito.

Per fare un esempio pratico. Se voglio scrollare spostando un layer verso destra di 100px, potrei semplicemente imporre al click di un tasto una funzione che imposti un margin-left a -100px rispetto all’attuale situazione. Facile, ma non *vivo*. Perchè in questo caso vedrei il risultato subito, mentre a me interessa che l’utente abbia la sensazione che le cose si spostano, quindi voglio che nell’andare indietro di 100px lo faccia gradualmente in un determinato arco di tempo.

E’ esattamente quello che fa animate in jQuery. Scrivendo la funzione:

  function scrollRight(){
     $(‘#IDTarget’).animate({‘marginLeft’: -100px’,},500);
  }

Farò scrollare il contenuto del target verso sinistra (dando l’idea di muovermi a destra) di 100px in mezzo secondo.

Usando le proprietà di jQuery, un po’ di fantasia e appena 88 righe di codice, si può ottenere una galleria di immagini come questa. Senza bisogno di aggiungere niente all’ottimo, ma ben pesante jQuery.