Fw

Wordpress Creative Developer

[Script e Plugin] Elementi Fluttuanti con jQuery

  • Plugin 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

Elementi Fluttuanti con jQuery - Prima Tecnica

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

Elementi fluttuanti con jQuery - Seconda tecnica

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

Elementi fluttuanti con jQuery - Terza tecnica

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.

1 commento

  1. Ciao
    Il primo metodo, non mi funziona:
    – L’immagine da far fluttuare l’ho messa come sfondo a un div nel css.
    – Ho inserito la classe ‘bubble’ al questo nell’html.
    – ho inserito lo script nell’head.

    Io nello script ho già uno effetto jquery funzionante.
    Le api jquery di questo effetto funzionante le richiamo con questa stringa di codice:

    Per l’effetto fluttuante può andare bene la stessa stringa o devo chiamare altre api?

    Grazie in anticipo
    Carlo

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *