Corsi on-line

Animazioni CSS con choreographer-js

Choreographer-js è una libreria JavaScript che permette di gestire facilmente la realizzazione di animazioni complesse basate su CSS; rilasciata sotto licenza Open Source può essere installata tramite npm (node package manager) e mette a disposizione una ricca documentazione con numerosi esempio già pronti per l’uso e per l’adattamento ai propri progetti Web based.

chorPer installare la libreria sarà sufficiente lanciare l’istruzione:

$ npm install --save choreographer-js

Fatto questo si potrà richiamare il file JavaScript di Choreographer-js direttamente attraverso il codice della propria pagina Internet:

const Choreographer = require('choreographer-js')

Uno degli esempio più interessanti tra quelli proposti riguarda la creazione di un effetto di animazione associato allo scrolling, partiamo quindi con le regole di stile che verranno applicate all’elemento da animare, queste riguarderanno un tag HTML (p) e un selettore (#box):

p {
        position: fixed;
        top: 100px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-family: 'Arial', sans-serif;
        color: white;
        text-align: center;
        width: 100%;
        z-index: 1;
      }
      #box {
        margin: 0 0;
        width: 100%;
        height: 500vh;
        background: black;
        opacity: 0.2;
      }

L’animazione coinvolgerà quindi un testo delimitato da un paragrafazione che subirà delle modifiche durante l’azione della rotella del mouse o lo scorrimento del polpastrello sul touchscreen. Tale comportamento sarà possibile grazie al seguente codice Javascript:

var choreographer = new Choreographer({
        animations: [
          {
            range: [-1, window.innerHeight * 4],
            selector: '#box',
            type: 'scale',
            style: 'opacity',
            from: 0.2,
            to: 1
          }
        ]
      })
      window.addEventListener('scroll', function() {
        choreographer.runAnimationsAt(window.pageYOffset)
      })

Tale codice potrà essere posizionato alla fine del markup di pagina, prima della chiusura del tag body; nel codice HTML il selettore #box stilizzato nel CSS, e richiamato dal metodo Choreographer(), seguirà il paragrafo nel quale verrà inserita la stringa di testo da animare. Saranno sufficienti due righe:

<p>Blah! Blah! Blash!</p>
<div id="box"></div>

Per comodità del lettore riporto il link al codice dell’esempio completo da utilizzare per gli eventuali test.

Via choreographer-js

Post correlati
I più letti del mese
Tematiche