WordPress e animazioni css3 usando wow.js e animate.css

In questo articolo ti spiegherò brevemente come usare wow.js su WordPress per usare le animazioni css3 di animate.css durante lo scorrimento della pagina.

– Per prima cosa inserisci nella cartella css del tuo tema il file css animate.min.css che puoi scaricare da qui https://raw.githubusercontent.com/daneden/animate.css/master/animate.min.css

Successivamente inserisci dentro la cartella js del tuo tema il file wow.min.js che puoi scaricare da qui https://raw.githubusercontent.com/matthieua/WOW/master/dist/wow.min.js

Fatto ciò passiamo al file functions.php dove dovrai mettere il seguente codice:

/* Enqueue dei file animate.min.css e wow.min.js */
add_action( 'wp_enqueue_scripts',  'my_enqueue_scripts' );

function my_enqueue_scripts() {

    wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/animate.min.css' );
    wp_enqueue_script( 'wow', get_template_directory_uri() . '/js/wow.min.js', array(), '', true );

}

/* Enqueue per attivare wow js */
add_action('wp_enqueue_scripts', 'my_wow_init_script');

function my_wow_init_script() {

    add_action( 'print_footer_scripts',  'my_wow_init' );

}

/* aggiungo javascript nel footer */
function my_wow_init() {

    echo "<script type=\"text/javascript\">
        var wow = new WOW(
            {
                animateClass: 'animated',
                offset:       50
            }
        );
        wow.init();
        </script>";

}

In questo modo abbiamo aggiunto wow.js e animate.css nel nostro tema, pronti per essere usati su qualsiasi elemento.

Per usarli basta aggiungere all’elemento da animare la classe wow e una specifica classe di animate.css.

Esempio: <div class=”wow fadeIn“>Contenuto … </div>.

Possiamo usare le animazioni inserendo manualmente nel codice le classi negli elementi che vogliamo animare, oppure come nell’esempio successivo in modo dinamico sfruttando gli hooks di wordpress.

 

Aggiungiamo le animazioni ai post del blog

Supponendo di voler inserire un’animazione uguale per tutti i post del blog, possiamo farlo  aggiungendo il seguente codice sempre nel file functions.php


/* Aggiunge una classe personalizzata al post */
function my_post_animation_classes( $classes ) {

    if ( is_home() || is_archive() ) {
        $classes[] = 'wow fadeInUp';
    }
    return $classes;

}
add_filter('post_class', 'my_post_animation_classes');</pre>

Come sempre spero di esserti stato utile e alla prossima ! :)

Condividi sui tuoi social preferiti !

0
8
0
0
0

L'autore: Alfredo Piccione

Webdesigner, Wordpress Designer & Developer, svolgo il mio lavoro con passione e dedizione cercando di tenermi aggiornato e sperimentando sempre cose nuove. Amo questo lavoro perché mi permette di esprimere il mio lato creativo, mi piace curare i miei lavori e dare sempre il meglio di me stesso.

3 COMMENTI

  1. 26 luglio, 2014 / Rispondi »

    Ciao, ottimo articolo, però secondo me c’è da aggiungere una cosa molto importante. Bisogna tenere conto anche delle perfomance di un sito. Caricare l’intera libreria animate.min.css (57kb), per quanto minificata, è uno spreco inutile di banda (soprattutto su mobile) se si utilizza un solo effetto.

    Conviene infatti, dalla repository github della libreria, scaricare solo i moduli .css necessari, o meglio ancora compilare i file seguendo la procedura indicata sempre sulla repository.

    • 27 luglio, 2014 / Rispondi »

      Ciao Mattia.
      Certo se serve un solo effetto è inutile caricare l’intera libreria.
      Il discorso mobile poi può essere gestito in vari modi, io mi sono limitato a indicate come far funzionare il tutto… per il resto dipende dalle singole necessità.

      Ad esempio se io devo sviluppate un tema per la vendita con relative opzioni per la gestione degli effetti animate, mi serve l’intera libreria in modo da consentire la scelta dell’effetto che più piace.

      Ti saluto 😉

  2. 17 maggio, 2016 / Rispondi »

    Articolo molto utile!

    Un piccolo suggerimento per aumentare la flessibilità…

    /* Aggiungo javascript nel footer */
    function my_wow_init() {
    echo “#script type=”text/javascript” src=\””. get_stylesheet_directory_uri() .”/js/custom.js”##/script#”;
    }

    Invece di aggiungere js direttamente nel file functions.php è più flessibile includere un file esterno per inizializzare wow ed eventualmente effettuare altre operazioni con js.

    Complimenti per il blog!

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>