Panic - Case Study

Angolo in angolo a sinistra

E' interessante notare come l'angolo in alto a sinistra dove è stata inserita l'icona del menù sembri avere una funzionalità sticky javascript. Invece è stato realizzato con il CSS che spieghiamo in seguito. In questo caso bisogna prestare particolare attenzione al punto di applicazione della trasformazione che permette di posizionare al meglio l'elemento (vedere lezione trasformazione)

Lezione Trasformazione

Doppia trasformazione

L'effetto a fascia inclinata è stato ottenuto applicando al container (nel caso di bootstrap), un inclinazione di -10 gradi

CSS: transform:skewY(-10deg);

La griglia di bootstrap si distorce, ma mantenendo la sua responsivness. Il testo, di conseguenza, assume questo aspetto quasi "italic". Nel sito però le immagini sono "tagliate" dalla fascia, ma non distorte. Per ottenere questo effetto è stata applicata un'inclinazione contraria all'immagine:

CSS: transform:skewY(10deg);

Da notare che lo stesso effetto si può applicare anche all'elemento video. Ne è un esempio lo show reel in alto. Le immagini poi sono state inserite in un contenitore che ne determina l'altezza in modo da poter riempire lo spazio senza utilizzare proprietà di background CSS (come background:cover). In questo modo la griglia funziona anche su cellulare quando le colonne collassano (e tramite il contenitore posso anche applicare un animazione sull'hover)

TITOLO 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate delectus dignissimos incidunt minima nisi optio quidem quisquam sint sunt voluptas! Exercitationem, quia, recusandae? Beatae eius iste minus molestiae qui saepe.

TITOLO 2

TITOLO 3

Sprite Animation

Per generare le sprite il modo migliore è con After Effect e il plugin SHEETAH

SHEETAH

Esiste anche la versione per Photoshop. Calcola da solo la grandezza e la altezza ottimali per l'immagine. Ricorda di fare il pre-render dell'animazione se vuoi il motion blur.

Esistono diversi modi di animare gli sprite:

Con il CSS:

CSS Sprite

Il fattore negativo è che deve stare su una stessa linea. In pratica basta creare un animazione con animate, spostare il background del contenitore quanto è la sua width (in negativo), e indicare negli steps il numero di frame dell'animazione

background-position: -(width)px;

animation: play 0.8s steps(numero di frame) infinite; Infinite se si vuole un loop

Con il javascript:

Esistono diverse librerie per animare le sprite con il CSS

Una molto semplice è Motio. Anche in questo caso la sprite deve essere sulla stessa riga.

Link Motio | Motio - Github

Quella più adatta al nostro scopo sembra essere quella di Stupid Studio (esempio sotto). Anche se poco supportata ha diversi lati positivi: sfrutta le sprite su righe e colonne, permette anche la divisone di un'animazione più lunga su diverse sprite ed ha diverse funzionalità. Ricorda di chiamare l'immagine con nome + 0.png. E di inizializzare anche con il javascript la sprite (nonostante i settings da data-attribute)

Link Stupid Studio | Stupid Studio - Github