[Script e Plugin] Elementi Fluttuanti con jQuery

Oggi voglio spiegarti con questa mini guida, come creare un effetto originale con jQuery, dove faremo fluttuare degli elementi.

In particolare vedremo tre tecniche diverse, la prima dove vedremo uno script, le altre due riguardano due plugin jQuery.

Partiamo!

Prima tecnica – Effetto Bounce

Di recente mi sono imbattuto in questo sito, dove ci sono diversi elementi che fluttuano.

Vuoi sapere cosa c’è dietro tutto quel movimento?

Queste poche righe di codice:

/*---Start Bounce---*/
// Bouncer animation (by Leo Xavier)
// BASE SPEED OF BOUNCING. WILL ADD RAINDOM 0-100 TO UNSYNC BOUNCING
var bouncespeed = 450;

// ACTUAL BOUNCER. CALLBACK OF ANIMATION IS THE BOUNCER ITSELF, TO LOOP ALL NIGHT LONG

function bounce(currentA) {
    newx = Math.floor(10 * Math.random());
    newy = Math.floor(3 * Math.random());
    newspeed = bouncespeed + Math.floor(10 * Math.random());
    $(currentA).animate({
        backgroundPosition: newx + 'px ' + newy + 'px'
    }, newspeed, 'linear', function() {
        bounce(currentA);
    });
}
// SELECT ALL A'S EXCEPT... RESET BG-POSITION TO AVOID INITIAL POSITION BUG AND CALL BOUNCER
$('.bubble').each(

function() {
    $(this).css({
        backgroundPosition: '5px 5px'
    });
    bounce(this);
});


/*---End Bounce---*/​

Le cose importanti da notare sono:

- velocità del movimento: bouncespeed, dove più alto è il valore, più lento sarà l’effetto;

- variabili newx e newy, che permettono di impostare di quanto deve muoversi l’elemento movimento in orizzontale e verticale;

- variabile newspeed, con la quale viene aggiunto un valore casuale alla velocità impostata con la variabile bouncespeed;

- poi con il metodo .animate(), viene applicato l’effetto di “bounce” alla proprietà background-position, applicando i parametri impostati in precedenza;

- infine si applica il movimento a tutti gli elementi con classe bubble.

Complesso? Nooo dai. Prova a fare un po’ di esperimenti, e vedrai che non è così difficile

Passiamo ora alla seconda tecnica.

Seconda tecnica – Plugin jQuery Spritely

Spritely è un plugin jQuery di cui ho parlato tempo fa, che permette di creare animazioni in stile flash.

Puoi vedere un esempio di utilizzo nel sito Wilsen Davil, dove le nuvole si muovono grazie proprio a spritely.

Terza tecnica – Plugin jQuery jqFloat

jqFloat è un plugin jQuery che permette di creare degli elementi fluttuanti con poche righe di codice.

Nella demo puoi capire cosa si può ottenere grazie al plugin.