Le animazioni SVG nel web: il sito di Severino Becagli [Case History]

Con il progetto di Severino Becagli ci siamo dovuti mettere alla prova per realizzare un nuovo immaginario, un nuovo modo di vedere l’Alga Spirulina. Severino Becagli è infatti il primo produttore di Alga Spirulina in Toscana. Il primo a voler trattare e promuovere questo tipo di prodotto, associandolo alla cultura e alla tradizione della nostra cara regione. Siamo così riusciti a creare una brand identity in grado di far associare la Spirulina, non solo al salutare e al biologico, ma anche alle cose buone, ai sapori e alla tradizione del buon cibo che la nostra cultura rappresenta.

Il sito web non poteva essere da meno: come poter far distinguere Severino Becagli da tutti i suoi competitor? Come far trasparire la passione delle persone dietro a questo progetto?

Le animazioni SVG sono state un’ottima soluzione. Grazie alla loro malleabilità a qualsiasi risoluzione e alla loro leggerezza, sono perfette per ottenere una resa fluida e dinamica. I principali vantaggi degli SVG nel web sono:

• Pesano poco.

• Possono essere modificati per colore, forma e traccia.

• Sono perfettamente scalabili, senza perdita di qualità o sgranamenti.

• Si vedono perfettamente sui retina display.

La costruzione del logo per la schermata del loading

Il sito web di Severino Becagli è ricco di immagini e video, per questo ci è venuto naturale inserire un loading che assista l’utente durante il caricamento dei vari contenuti e che faccia visualizzare il tutto nel momento in cui sia perfettamente caricato e renderizzato. Il logo di Severino Becagli si presta parecchio ad essere animato, vista la sua forma a spirale.

Per poter realizzare l’effetto del drawing, ovvero della traccia che appare disegnandosi, è stato necessario sviluppare una maschera che copra il tracciato (anche questa in SVG, per permettere una perfetta scalabilità su qualsiasi risoluzione), in questo modo, quando la traccia si disegnerà, andrà a riempire perfettamente la silhouette del pittogramma.

Preparata la struttura, non ci resta che animare tutto con la il motore di animazioni JavaScript AnimeJS, facendo in modo che il logo vada in loop fino a che la pagina non si sia completamente caricata. Nel momento in cui il browser sarà pronto a mostrarci il contenuto della pagina, l’animazione finirà il suo corso (soltanto pochi decimi di secondo, non vogliamo spazientire i nostri utenti) per poi svanire con uno zoom ad effetto.

Le altre animazioni SVG all’interno del sito web

Le animazioni SVG ci permettono di realizzare parecchi altri interessanti effetti: ad esempio la home page si apre con un altro effetto maschera. Stavolta la traccia SVG ha il compito di mostrarci una foto dell’alga Spirulina che si muove allo spostamento del mouse, inoltre le scritte dei titoli appaiono con un effetto rivelatore, anche questo ottenuto con delle semplici sagome realizzate in SVG, programmate per sparire al caricamento della pagina.

Oltre a varie animazioni realizzare con l’effetto del parallax scrolling, un’altro effetto sviluppato con gli SVG può essere visionato nella pagina “Spirulina“: quando vengono illustrate la composizione dell’alga e le principali vitamine contenute al suo interno, un pentagono in SVG appare allo scroll, mostrando le 5 principali vitamine presenti.

Non solo tecnica e animazioni…

Non sono solo animazioni e aspetti tecnici a rendere il sito web di Severino Becagli uno degli ultimi vanti della nostra agenzia di Comunicazione: ogni aspetto è curato nei minimi dettagli, seguendo un brand book precedentemente realizzato dal nostro reparto di art direction, contenente tutte le informazioni per poter declinare ogni elemento o prodotto marcato Severino Becagli.