Come aggiungere animazioni allo scorrimento

‍Sitely si concentra molto su quello che potrebbe essere considerato il primo livello del web design: il design visivo statico. L'esperienza del visitatore dipende dagli elementi di design più classici come colore, contrasto, font e spazio geometrico. Qui esamineremo la funzione di animazione di Sitely.

‍L'uso della parola esperienza è molto specifico, perché tentare di integrare animazioni può essere sia piacevole che frustrante (speriamo un po' più del primo e meno del secondo). Il motivo è che le animazioni possono disturbare l'equilibrio del design molto più degli elementi statici. Data l'illusione di vita e movimento, si può finire con troppe, o troppo poche, parti sconnesse che non si adattano e che addirittura danneggiano ciò che le circonda.

‍Ma quando fatte bene, queste entità a vita limitata rendono il design più simile a un'interazione organica. La narrazione fluisce e i contenuti della pagina diventano caldi inviti a un'ulteriore esplorazione.

‍Quindi, giochiamo.

‍Questo è un design semplice su Halloween con l'intento di catturare un po' del divertimento e della follia.

‍Le animazioni allo scorrimento possono essere applicate a immagini, pulsanti, caselle di testo ed elementi video. Si abilitano le animazioni tramite una casella di controllo nella scheda Stile. Questo mostrerà due menu a discesa, uno per selezionare l'animazione e l'altro per scegliere la direzione e il tipo di movimento. L'ultima scelta nel primo menu, Altro, mostra un elenco di animazioni non convenzionali, che potrebbero funzionare con Halloween. Sotto la scelta dello stile di animazione ci sono i controlli di temporizzazione, ripetizione e distanza.

‍Nonostante questo sia meno restrittivo di, diciamo, un design aziendale, dobbiamo comunque fare attenzione alle animazioni che scegliamo. I nostri elementi in movimento: una lapide, un cane fantasma, una decorazione per bicicletta, tre piccoli fantasmi e una zucca che sembra tenuta in mano da Mercoledì Addams.

‍Dopo qualche esperimento siamo arrivati a queste scelte:

• Un rimbalzo per la lapide applica l'idea di peso e intimidazione (nel contesto di Halloween).
• Un'oscillazione per il cane, poiché il classico cliché dell'insegna oscillante della locanda decrepita presente nelle storie di Halloween si sposa bene con la forma verticale dell'immagine, e il cane è il posto migliore dove metterla essendo completamente neutro.
• Niente per la decorazione della bicicletta. C'è molto movimento e alla fine avere un elemento stabile fornisce un punto di riposo per gli occhi e rende il movimento circostante molto più confortevole. Cercare di percepire cosa sta succedendo con più parti in movimento e nessun punto di stabilità ha creato confusione e diminuito il divertimento dell'effetto.
• Elastico per i fantasmi. Assomigliano a delle macchie, quindi l'animazione dell'elastico è perfetta per loro, aggiungendo anche alla natura comica delle loro espressioni.
• Infine, 'tada' per la zucca tenuta in mano. Genera un momento 'guarda!', simile allo stile delle immagini che è affine alla ragazza che si prepara a offrire la zucca allo spettatore.

‍Il risultato finale:

‍Per un esempio più convenzionale delle animazioni, in questo design la funzione di ritardo è utilizzata per creare un tema di scoperta ed esplorazione lineare, comunicando allo stesso tempo i servizi dell'azienda pubblicizzata:

‍

‍