Share
Quest'estate ho iniziato a costruire una rivisitazione moderna di "Alice in Wonderland", un'app web di libri di fiabe interattiva con il nome di Alice in Videoland. Ha finito per essere pubblicato in un articolo di Adobe Inspire e diventare una presentazione vincente che ho presentato al CSS Dev Conf 2013. Il progetto doveva essere educativo, un banco di prova per nuove tecniche di animazione CSS e desktop-to -tablet JavaScript. Tengo la fonte di Alice su GitHub dove chiunque può esaminare il mio codice, ma a volte è bello avere qualcuno che superi il ragionamento con te.
In questo articolo tratterò alcuni dei dettagli più tecnici che né il mio articolo né l'articolo di Inspire hanno potuto approfondire:
Se desideri conoscere storyboard, immagini di retina, animazioni CSS e altre interazioni, consulta l'articolo supplementare su Adobe Inspire. Inoltre, prima di leggere ulteriormente, dovresti assolutamente giocare con lo stesso libro di fiabe!
Il mio obiettivo era abbastanza semplice: creare un'app di storybook che funzionasse egualmente bene in Chrome e su iOS Safari, in particolare su Retina iPad. Intendiamoci, non stavo progettando per un "contesto mobile", sapevo esattamente dov'era il mio target di riferimento: sulle connessioni wifi, nella comodità della propria casa, o leggendo con i loro bambini sui loro giri o analizzando il codice a l'ufficio.
Ciò mi ha permesso di preoccuparmi meno della compatibilità del browser, un lusso che pochi in ambienti di produzione possono permettersi. Ma è importante avere progetti come questo che superino la curva perché ci aiutano a pensare a cosa sarà possibile domani.
Mi è sempre piaciuto "Alice in Wonderland" e "Through the Looking Glass" crescere e mi sono immerso nella ricerca e nello sviluppo del nuovo mondo e dei personaggi che avrei creato con zelo. Dovevano essere stabilite chiare differenze negli stili artistici, dal parco impressionista e sterile del mondo reale alla sommossa della metà del secolo del buco del coniglio.
Ogni personaggio doveva avere la propria storia e personalità. A causa delle scadenze ravvicinate, potevo solo dare una piccola parte del libro alla vita. Ho iniziato riscrivendo la scena di apertura (che puoi leggere spegnendo il CSS o stampando la pagina del libro di fiabe) e poi creando uno storyboard per seguirlo.
Scopri di più sul processo creativo, i personaggi e i progetti di ambientazione che sono andati in "Alice in Videoland" nell'articolo della sorella che ho scritto per Adobe Inspire.Dall'occhio lampeggiante ad Alice che dà la caccia, le animazioni sono usate sottilmente in tutta la storia per dare l'illusione della vita, non diversamente da un libro a comparsa. Tuttavia, mentre le animazioni CSS sono supportate in tutti i browser moderni, Internet Explorer 8 e versioni successive non le supportano.
Se hai controllato i rapporti sul traffico del tuo sito e un numero significativo di utenti si affidano a Internet Explorer 8 o versioni precedenti (controlli sempre le tue analisi prima di progettare, giusto?), Puoi ancora supportare quei browser offrendo al tempo stesso la piena interazione con i browser moderni . La comunità di sviluppo web ha già affrontato questo problema e ha sviluppato tecnologie ora comuni come i caratteri Web e AJAX. La soluzione è semplice: gli utenti sui browser moderni ottengono un'esperienza completa, mentre quelli su browser meno capaci ottengono comunque un'esperienza comprensibile e utile. Walt Disney avrebbe potuto chiamare questo "plussing" per l'esperienza dell'utente. Gli sviluppatori web lo chiamano "miglioramento progressivo" o "degrado gradevole", a seconda che si costruisca per browser più vecchi o più recenti prima.
Quando si parla di animazione, mi piace prendere quello che chiamo l'approccio del libro pop-up. Per illustrare, i seguenti video sono un esempio di un'animazione di carte regalo interattiva di Square.com progettata da Madelin Woods. (Grazie, Madelin, per averli registrati!)
Le persone in Internet Explorer 8 e versioni precedenti saranno comunque deliziate dall'illustrazione e non si accorgeranno che dovrebbe essere animata, mentre le persone nei browser più recenti saranno intrattenute dall'animazione a piè di pagina.
In Alice in Videoland, ho fatto lo stesso. Nella scena in cui il coniglio bianco hipster attraversa lo schermo, l'ho reso centrato e fermo se non poteva essere animato. L'ho fatto con modernizr.js.
Modernizr.js è un piccolo helper JavaScript che puoi mettere su un sito per verificare se un browser supporta determinate funzionalità come animazioni e transizioni CSS3. Se le funzionalità sono supportate, modernizr aggiunge le classi .cssanimations e .csstransitions al tag HTML padre.
Ho impostato gli stili di default del coniglio per centrarlo sulla pagina. Se le transizioni sono abilitate, io uso la classe .csstransitions per riposizionarlo dal lato sinistro dello schermo:
.coniglio a sinistra: -50%; // coniglio è centrato .csstransitions .rabbit left: -100%; // coniglio è nascosto al lato sinistro dello schermo
Non serve iniziare a riprodurre animazioni mentre tutte le immagini sono ancora in fase di download. Dobbiamo aprire una schermata di caricamento fino a quando tutto sarà pronto. jQuery capita di avere un metodo chiamato .caricare che spara solo in questa occasione. Ho dato il html tag una classe predefinita di .Caricamento in corso e usato il seguente bit di jQuery per cambiare la classe in .caricato non appena la pagina è completamente caricata e resa:
Accentsconagua
$ (window) .load (function () // È bello impostare un timeout breve in modo che la pagina // di caricamento abbia il tempo di completare l'animazione setTimeout (function () // cambia stato in $ ("html") caricato .addClass ("loaded"). removeClass ("loading");, 4000);); Vedi la penna Alice nella schermata di caricamento di Videoland di Rachel Nabors (@rachelnabors) su CodePen
È abbastanza facile adattare il CSS per la schermata di caricamento al.Caricamento in corso e .caricato classi. Controlla la riga 9 del CSS nell'esempio di codepen. Il imbottitura sul contenitore transizioni a 0, causando il "roll up" della schermata di caricamento. Le righe da 108 a 128 controllano il animazioni che fa cadere la tazza e il piattino dopo aver aggiunto il .caricare classe al loro contenitore. Alcune di queste animazioni, come il coniglio che corre, dovrebbero accadere solo quando quella parte della storia viene letta dal lettore. È difficile sapere esattamente dove saranno gli occhi di un utente in un dato momento, ma possiamo dedurlo usando il delizioso plugin jQuery Waypoints. Possiamo usarlo per assegnare una classe .in-view a ciascuna .page quando viene scorsa nella vista in questo modo:
$ (". scene-park .page"). waypoint (function () // quando questa .page è messa a fuoco, dagli una classe di "in-view" $ (this) .addClass ("in-view" );); Quindi applichiamo gli stili di animazione alla classe .in-view in modo che si attivino solo dopo averli visualizzati nella vista.
Originariamente stavo per animare lo sfondo dietro ad Alice, ma mentre il progetto progrediva, mi resi conto che l'effetto che desideravo davvero era che lei scendesse verso il fondo dello schermo mentre i lettori scendevano. I lettori dovrebbero impegnarsi con la storia per vedere cosa accadrà dopo, e saranno premiati non solo con una progressione verso un obiettivo (il fondo della pagina), ma anche con i cambiamenti nell'umore di Alice da spaventati, a curiosi, a sonno.
Innanzitutto, ho dovuto rendere Alice appiccicosa. Cioè, avevo bisogno di farla passare a una posizione fissa dopo che il lettore ha iniziato a scorrere, in modo che non potesse scorrere fuori dalla parte superiore della pagina. L'ho fatto usando la comoda scorciatoia jQuery Waypoints per elementi appiccicosi invece di provare a scrivere il mio sistema.
Per la parte di parallasse, ho optato per Skrollr, che funziona prendendo due attributi di dati numerici su un elemento, dati-pixel-distanza e interpolando tra loro, pixel-distanza essendo la distanza dalla parte superiore della pagina in cui le modifiche devono iniziare a verificarsi. Poiché i tunnel sono molto indietro nella pagina, ho usato JavaScript per misurare la loro distanza dalla parte superiore della pagina, e ho usato la loro altezza per ottenere quegli attributi di dati:
var tunnelTop = Math.round ($ tunnel.offset (). top); var tunnelTopData = "data-" + tunnelTop; var tunnelBottomData = "data-" + (tunnelTop + Math.round ($ tunnel.height ())); // Date a Alice Falling le sue misure skrollr come attributi dati $ alice.attr (tunnelTopData, "top: 0%"). Attr (tunnelBottomData, "top: 80%");
Il che mi dà qualcosa come:
Guarda la penna che cade nel buco del coniglio di Rachel Nabors (@rachelnabors) su CodePen
In Safari su iOS, quando si avvia una pergamena, si sfiora lo schermo, si fa scorrere il dito verso l'alto o il basso, quindi si solleva il dito dallo schermo. Per risparmiare energia, Safari non fa nulla mentre il dito tocca lo schermo. Arresta tutte le animazioni e non esegue nemmeno JavaScript finché non hai rimosso il dito.
Invece, prende un'istantanea dello schermo e lo sposta nella direzione del dito, dando l'illusione che si sta scorrendo come si fa sul desktop. Ma se la pagina contiene animazioni, l'illusione si spezza ad ogni scorrimento del dito. Ciò significa che una persona potrebbe scorrere fino in fondo alla buca senza fermarsi a notare che l'umore di Alice sta cambiando o che sta cadendo:
Skrollr è dotato di una funzionalità mobile-friendly per impostazione predefinita, che tenta di risolvere questo problema applicando una trasformazione CSS all'intera pagina e quindi animandola in una nuova posizione con CSS in scroll. Tuttavia, questo metodo ignora gli eventi di scorrimento che i Waypoint richiedono per modificare le attitudini di Alice:
Questo è dove ho perso il vapore. Ho preso in considerazione l'idea di configurarlo in modo che la sequenza di caduta fosse un'animazione sull'iPad e un'interazione a scorrimento sul desktop, ma detestavo l'idea. In primo luogo, dovrei mantenere due interazioni separate e in secondo luogo, se stavo animando così tanto del racconto, perché non ho appena fatto un video di esso?
Il punto dell'interazione di scorrimento è che trascina i lettori nella storia; loro controllano Alice. Sono Alice. Li coinvolge. Se tutto quello che devono fare è cliccare sulla tana del coniglio, che senso ha??
Ho contattato molti proprietari di repository e ho consultato Stack Overflow in cerca di una soluzione. È stato John Polacek, uno dei manutentori di un'altra libreria Super Scrollorama, a suggerire di dare un'occhiata a Hammer.js, una piccola libreria JavaScript per la gestione di gesti come pizzicare e scorrere su dispositivi mobili (che ha una versione che si collega direttamente a jQuery !) Avevo già guardato la biblioteca in fase di sviluppo e ho deciso di non farlo, ma ho deciso di guardare di nuovo.
Ho passato molto tempo a guardare come le persone si muovevano attraverso la storia usando il touch su iPad. Ho notato che non scorrevano lungo la pagina tanto quanto strisciare. Ho pensato che se avessi potuto mappare avanzando la storia di una pagina in un'azione rapida, avrei potuto mantenere una relazione piuttosto stretta tra le esperienze sia sul desktop che sul touch. Hammer.js mi ha permesso di agganciare gli eventi di scorrimento sull'iPad, e sono riuscito a farlo in modo che durante lo scorrimento i lettori avessero avanzato la pagina successiva:
if (Modernizr.touch) // Scorri alla pagina precedente $ (documento) .hammer (prevent_default: true). on ("swipedown", function (event) scrollPageIntoCenter ($ (". page"). get ( prevPage)); currentPage = prevPage; calcPrevNext (currentPage);); Questa è una grande semplificazione del codice. Per questo caso d'uso basato sul tocco, ho dovuto ricorrere a tenere traccia delle pagine attuali, precedenti e successive usando le variabili contatore. Ci sono anche cose interessanti che accadono con il ricalcolare altezze e cose simili su ambienti in evoluzione. Consiglio vivamente di dare un'occhiata al codice sorgente (utile annotato!) Se vuoi davvero sporcarti le mani.
Uno dei problemi con lo sviluppo di iPad è che i clic non si collegano direttamente ai tocchi. Quando tocchi un collegamento in iOS Safari, c'è una leggera pausa mentre il sistema controlla che non stai facendo qualche tipo di gesto. Sta chiedendo: "Sei sicuro di voler seguire quel link? O stai pizzicando o toccando due volte? "Questo rende le interazioni basate sui clic sentirsi lente e innaturali.
Nel nostro caso, quando si fa clic o si tocca la buca del coniglio, vogliamo che esegua il downTheHole () funzione che fa scorrere la pagina verso il basso nella terra. La soluzione è usare entrambi clic e touchend ascoltatori di eventi! Rodney Rehm mi ha aiutato a creare una versione più efficiente del mio originale attivare() metodo. Dopo di che, è facile chiamare così:
$ ( "# Per-tunnel") attivare (downTheHole).;
Alice in Videoland sarà sempre un lavoro in corso per me. Quando il tempo lo consente, posso tornare ad espandere il numero di dispositivi e browser che interpreta perfettamente. O posso andare avanti e aggiungere nuovi capitoli alla storia per dimostrare cose come canvas, animazioni SVG o l'API di animazione web.
Sono sempre aperto a nuovi modi per scrivere codice e rendere il vecchio codice più veloce. Spero che "Alice" servirà come una lunga e leggendaria demo di cose proprio dietro l'angolo per il design dell'interazione.
