Splitting: sezionare elementi per produrre animazioni

Splitting è, come una “microlibreria” JavaScript formata da una collezione di plug-in il cui scopo è “sezionare” un elemento HTML in più parti.

Splitting è, come definiscono gli autori del progetto, una “microlibreria” JavaScript formata da una collezione di “sotto plug-in” il cui scopo è quello di “sezionare” un elemento HTML in più parti, in differenti modalità: parole, caratteri, elementi figli, aree e cosi via.

Splitting non produce di per sé animazioni, ma fornisce gli elementi e gli strumenti necessari alla produzione delle animazioni stesse (e transizioni) attraverso librerie Javascript o semplicemente tramite CSS3. La logica che risiede alla base di questa soluzione è alquanto semplice:

  1. la classe viene richiamata su un “target”.
  2. Vengono prodotti degli elementi span che vanno a produrre le singole sezioni all’interno del nostro target.
  3. Vengono prodotte le variabili CSS  (ad esempio <span class="word" style="--word-index: 0">).
  4. Viene generato e restituito un array di sezioni.
  5. Viene infine aggiunta un’eventuale animazione JavaScript o CSS alle varie sezioni appena prodotte.

Ad esempio, la classe Splitting può essere richiamata nel suo utilizzo più semplice, senza alcun parametro, per sezionare i caratteri all’interno di un elemento target, che in questo caso risulta essere un div. Il DOM iniziale è semplicemente il seguente:


<div data-splitting>ABC</div>
<script> Splitting(); </script>

mentre il risultato finale dopo il parsing prodotto dalla libreria produrrà il seguente DOM:


<div data-splitting class="words chars splitting" style="--word-total:1; --char-total:3;"><span class="word" data-word="ABC" style="--word-index:0;"><span class="char" data-char="A" style="--char-index:0;">A</span><span class="char" data-char="B" style="--char-index:1;">B</span><span class="char" data-char="C" style="--char-index:2;">C</span></span></div>

Nella pagina ufficiale del progetto troviamo una ricchissima documentazione (che in questo caso prende il nome di guida) in cui si spiega in maniera davvero dettagliata come implementare ogni plug-in offerto da Splitting.

Le demo sono tantissime, sia nella documentazione, sia nelle varie pagine di presentazione del software, sia nella altrettanto ricca pagina demo dedicata. Queste, ospitate sulla piattaforma CodePen, mostrano le non indifferenti potenzialità offerte da Splitting, come ad esempio l’animazione di una scritta di caricamento.

Via Splitting