Coding, Purple, TechFour, la nuova campagna Fay per l’iconico 4 Ganci

Per la nuova campagna di Fay dedicata al 4 Ganci, che ha come protagonista la star di Game of Thrones Liam Cunningham, DUDE ha scelto Purple Network come digital partner.

Video embed, player custom e fullscreen per le 4 storie di Fay

DUDE ha reinterpretato l’immagine del 4 Ganci, ne ha scomposto l’anima ricavando quattro corti che raccontassero le sfaccettature dell’uomo Fay, che viene interpretato da Liam Cunningham (Ser Davos Seaworth) star di Game of Thrones, la pluripremiata serie HBO.

4 corti, 4 storie, 4 fashion film con setup narrativi differenti dai quali emergono sentimenti contrastanti tra loro come tenerezza e passione, rabbia e complicità.

Per far vivere in digitale il progetto 4 Ganci abbiamo sviluppato una landing page fullscreen responsive, integrata nel sito corporate del brand.

L’integrazione in una struttura pre esistente non è un limite

Lavorando su una struttura pre esistente abbiamo sviluppato tutta la parte di nuove animazioni in frontend, creando una landing page che integrasse cinque video incorporati da You Tube, fullscreen, con player custom che permette agli utenti di scegliere quando far partire il video, metterlo in pausa e gestire l’audio.

Da desktop le animazioni sono controllate e seguono la quantità di scroll effettuati: nella prima schermata le animazioni entrano nel visore legandosi alla quantità di scroll.

Nei blocchi successivi sono invece i testi che entrano nel layout integrando le immagini grazie a un effetto parallasse.

Sui devices mobile viene invece mantenuto lo scroll nativo.

All’atterraggio sulla pagina, quando al primo scroll appaiono tutti i quattro capitoli della storia in successione, cliccando su ognuno la navigazione ti porta sulla sezione corrispondente, dove guardare il video e leggere i testi accompagnati dalle immagini che scorrendo ti portano al capitolo successivo.

L’elemento fisso del layout sono i pointer laterali (sulla destra) che, oltre a segnalare all’utente che sezione stia navigando, cambiano colore in relazione all’immagine presente in background.

Tecnologie & Linguaggi

Per lo sviluppo di Icons Four abbiamo usato HTML 5, CSS 3, jQuery, JavaScript e TweenMax.

NAVIGA IN FOUR