Share
În această vară am început să construiesc o retelată modernă a "Alice in Țara Minunilor", o aplicație web interactivă cu povestiri numită Alice în Videoland. Acesta a ajuns să fie prezentat într-un articol surori din Adobe Inspire, transformându-se într-o prezentare care a câștigat encore pe care l-am dat la CSS Dev Conf 2013. Proiectul a fost menit a fi educativ, un teren de testare pentru noi tehnici de animație CSS și desktop-to -tablu JavaScript. Imi pastrez sursa lui Alice pe GitHub unde oricine poate sa-mi examineze codul, dar uneori este frumos ca cineva sa treaca peste rationamentul cu tine.
În acest articol voi acoperi câteva dintre cele mai tehnice detalii pe care nici vorba mea, nici articolul Inspire nu le-ar putea examina în profunzime:
Dacă doriți să aflați despre storyboarding, imagini retină, animații CSS și alte interacțiuni, ar trebui să consultați articolul suplimentar despre Adobe Inspire. De asemenea, înainte de a citi mai departe, ar trebui să jucați cu povestea însăși!
Scopul meu a fost destul de simplu: faceți o aplicație de povesti care a funcționat la fel de bine în Chrome și pe iOS Safari, în special pe Retina iPad. Mintea ta, nu proiectam pentru un "context mobil", stiam exact unde ar fi publicul meu tinta: pe conexiuni wifi, in confortul casei lor, fie citesc cu copiii lor pe ture sau disecand codul Biroul.
Acest lucru mi-a permis să mă îngrijorez mai puțin de compatibilitatea browser-ului, un lux pe care îl pot permite câteva dintre mediile de producție. Dar este important să avem astfel de proiecte care să sară înainte de curbă, deoarece ne ajută să ne gândim la ceea ce va fi posibil mâine.
Mereu m-am bucurat de "Alice in Wonderland" si "Through The Looking Glass" si m-am indragostit in cercetarea si dezvoltarea noii lumi si personaje pe care as fi creat-o cu zel. Au trebuit să se stabilească diferențe clare în stilurile de artă, de la parcul impresionist și steril al lumii reale până la revolta din mijlocul secolului gaurii iepurelui.
Fiecare personaj trebuia să aibă propria lor istorie și personalitate. Din cauza termenelor limită, aș putea să aduc la viață doar o mică parte a cărții. Am început prin rescrierea scenei de deschidere (pe care o puteți citi prin oprirea CSS sau imprimarea paginii cu povestirea) și apoi creând un storyboard pentru a merge cu ea.
Aflați mai multe despre procesul de creație, caractere și design de mediu care au intrat în "Alice in Videoland" în articolul surorii pe care l-am scris pentru Adobe Inspire.De la ochiul care clipește spre Alice, care face chase, animațiile sunt folosite subtil în întreaga poveste pentru a da iluzia vieții, nu spre deosebire de o carte pop-up. Cu toate acestea, în timp ce animațiile CSS sunt acceptate în toate browserele moderne, Internet Explorer 8 și cele de mai jos nu le acceptă.
Dacă ați verificat rapoartele de trafic ale site-ului dvs. și un număr semnificativ de utilizatori se bazează pe Internet Explorer 8 sau mai devreme (întotdeauna verificați analizele înainte de proiectare, nu?), Puteți să le acceptați în timp ce oferă browsere moderne . Comunitatea de dezvoltare web sa confruntat cu această problemă înainte și a dezvoltat acum tehnologii comune, cum ar fi fonturile web și AJAX. Soluția este simplă: utilizatorii din browserele moderne beneficiază de toată experiența, în timp ce cei din browserele mai puțin capabile obțin o experiență inteligibilă și utilă. Walt Disney ar fi numit acest "plussing" experiența utilizatorului. Dezvoltatorii web numesc aceasta "îmbunătățire progresivă" sau "degradare grațioasă", în funcție de dacă construiți mai întâi pentru browsere mai vechi sau mai noi.
Când vine vorba de animație, îmi place să iau ceea ce numesc abordarea cărților pop-up. Pentru a ilustra, următoarele videoclipuri sunt un exemplu de animație interactivă de la Square.com, realizată de Madelin Woods. (Mulțumesc, Madelin, pentru înregistrarea acestora!)
Oamenii din Internet Explorer 8 și inferior vor fi totuși încântați de ilustrație și nu vor observa că ar trebui animați, în timp ce oamenii din browserele mai noi vor fi distrați la animația plussed.
În Alice în Videoland, am făcut la fel. În scena în care iepurele alb de hipster rulează pe ecran, l-am făcut centru și staționară dacă nu putea fi animat. Am făcut acest lucru cu modernizr.js.
Modernizr.js este un mic ajutor helper pe care îl puteți pune pe un site pentru a verifica dacă un browser acceptă anumite caracteristici precum animațiile și tranzițiile CSS3. Dacă funcțiile sunt acceptate, modernizatorul adaugă clasele .cssanimations și .csstransitions la eticheta HTML părinte.
Am setat stilurile implicite ale iepurelui pentru al centra pe pagină. Dacă sunt activate tranzițiile, folosesc clasa .csstransitions pentru a repoziționa din partea stângă a ecranului:
.iepure stânga: -50%; // iepure este centrat .csstransitions .rabbit stânga: -100%; // iepure este ascuns în partea stângă a ecranului
Nu este bine să începeți să jucați animații în timp ce toate imaginile sunt încă descărcate. Trebuie să punem un ecran de încărcare până când totul e gata să plece. jQuery se întâmplă să aibă o metodă numită .sarcină care arde numai la o astfel de ocazie. Am dat-o html eticheta o clasă implicită de .se incarca și a folosit următorul fragment de jQuery pentru a schimba clasa respectivă .încărcat imediat ce pagina este complet încărcată și redată:
Accentsconagua
$ (fereastra) .load (function () // Este frumos sa setati un time-out scurt astfel incat pagina de incarcare sa aiba timp pentru a-si termina animatia setTimeout (function () // modifica starea incarcata $ ("html" .addClass ("încărcat"). removeClass ("încărcare");, 4000);); Vedeți Pen Alice în Videoland Load Screen de Rachel Nabors (@rachelnabors) pe CodePen
Este destul de ușor să extindeți CSS pentru ecranul de încărcare la.se incarca și .încărcat clase. Consultați linia 9 a CSS în exemplul codificat. umplutură pe container tranziții la 0, determinând ecranul de încărcare să "se rostogolească". Liniile 108 până la 128 controlează animații care determină scăderea cupei și farfuriei după adăugarea .sarcină clasă în containerul lor. Unele dintre aceste animații, cum ar fi ieșirea din iepure, ar trebui să se întâmple numai când acea parte a povestirii este citită de către cititor. Este greu să știi exact unde vor fi ochii unui utilizator la un moment dat, dar putem deduce acest lucru folosind pluginul jQuery Waypoints minunat. Putem să-l folosim pentru a atribui o clasă .in-view fiecărei pagini atunci când este derulată în vizualizare ca atare:
() () // atunci când această pagină intră în focalizare, dă-i o clasă de "in-view" $ (this) .addClass ("in-view" );); Apoi, vom extinde stilurile de animație la clasa .in-view, astfel încât acestea să se aprindă numai după ce au fost derulate în vizualizare.
Inițial urma să animez fundalul din spatele lui Alice, dar, pe măsură ce proiectul a progresat, mi-am dat seama că efectul pe care l-am vrut cu adevărat era ca ea să coboare spre partea de jos a ecranului, pe măsură ce cititorii i-au dat jos. Cititorii ar trebui să se angajeze cu povestea pentru a vedea ce se întâmplă în continuare și ei ar fi recompensați nu numai cu progresul către un scop (partea de jos a paginii), ci și cu schimbările în starea de spirit a lui Alice de la speriat, la curios, la somnoros.
În primul rând, a trebuit să-l fac pe Alice lipicios. Asta înseamnă că trebuia să o fac să treacă la o poziție fixă după ce cititorul a început să deruleze, așa că nu ar fi derulat în partea de sus a paginii. Am făcut acest lucru folosind comanda rapidă jQuery Waypoints pentru elementele lipicioase, în loc să încerc să scriu propriul sistem.
Pentru porțiunea de parallax, m-am stabilit pe Skrollr, care funcționează luând două atribute de date numerice pe un element, date-pixeli distanță și interpolând între ele, pixeli distanță fiind distanța de la partea de sus a paginii, la care schimbările trebuie să înceapă. Deoarece tunelurile sunt foarte departe de pagină, am folosit JavaScript pentru a măsura distanța de la partea de sus a paginii și am folosit înălțimea lor pentru a obține acele atribute de date:
var tunnelTop = Math.round ($ tunnel.offset ().); var tunnelTopData = "date" + tunelTop; var tunnelBottomData = "date-" + (tunelTop + Math.round ($ tunnel.height ()); // Oferă Falling Alice măsurătorile sale de scrollr ca atribute de date $ alice.attr (tunnelTopData, "top: 0%") attr (tunnelBottomData, "top: 80%");
Ceea ce îmi dă ceva de genul:
Vedeți stiloul care coboară din gaura iepurilor de Rachel Nabors (@rachelnabors) pe CodePen
În Safari pe iOS, când inițiați o parcurgere, atingeți ecranul, glisați degetul în sus sau în jos, apoi ridicați degetul de pe ecran. Pentru a economisi energie, Safari nu face nimic în timp ce degetul atinge ecranul. Se oprește toate animațiile și nu rulează JavaScript până când nu ți-ai îndepărtat degetul.
În schimb, este nevoie de un instantaneu al ecranului și îl deplasează în direcția degetului dvs., dând iluzia că derulează pe măsură ce faceți pe desktop. Dar dacă pagina conține animații, iluzia este întreruptă cu fiecare derulare a degetului. Aceasta înseamnă că o persoană ar putea să se deplaseze până la capătul gaurii fără să se oprească pentru a observa că starea de spirit a lui Alice se schimbă sau că se încadrează:
Skrollr vine în mod implicit cu o caracteristică prietenie mobilă, care încearcă să remedieze această problemă prin aplicarea unei transformări CSS pe întreaga pagină și apoi animarea acesteia într-o nouă poziție cu CSS pe parcurgere. Cu toate acestea, această metodă ocolește evenimentele de derulare pe care Waypoints le impune pentru a schimba atitudinile lui Alice:
Aici am pierdut aburul. Am gândit să-l instalez, astfel încât secvența care se încadrează a fost o animație pe iPad și o interacțiune de derulare pe desktop, dar eu am rătăcit ideea. În primul rând, trebuie să mențin două interacțiuni separate, iar în al doilea rând, dacă animasem atât de mult din poveste, de ce nu am făcut doar o înregistrare video?
Punctul interacțiunii derulării este acela că atrage cititorii în poveste; ei controlează pe Alice. Sunt Alice. Îi angajează. Dacă tot ce trebuie să faceți este să faceți clic pe gaura de iepure, care este motivul pentru asta?
Am contactat mai mulți proprietari de repo și am consultat stack Overflow în căutarea unei soluții. John Polacek, unul dintre cei care susțin o altă bibliotecă Super Scrollorama, mi-a sugerat să arunc o privire la Hammer.js, o mică bibliotecă JavaScript pentru manipularea gesturilor cum ar fi ciupirea și mișcarea pe dispozitive mobile (care are o versiune care se conectează direct în jQuery !) M-am uitat la bibliotecă de la începutul dezvoltării și am optat să nu o urmăresc, dar am decis să mă uit din nou.
Am petrecut mult timp urmărind modul în care oamenii au trecut prin poveste folosind touch-ul pe iPad. Am observat că nu derulează pagina atât de mult ca și cum ar trece. M-am gândit că dacă aș putea să avansez povestea într-o singură pagină într-o acțiune rapidă, aș putea menține o relație destul de strânsă între experiențele desktop și touch. Hammer.js mi-a permis să cârlig în ghinion evenimente pe iPad, și am fost în măsură să facă astfel încât, pe glisați, cititorii avansat la următoarea pagină:
dacă (Modernizr.touch) // Treceți pe pagina anterioară $ (document) .hammer (prevent_default: true) pe ("swipedown", function (event) scrollPageIntoCenter prevPage)); currentPage = prevPage; calcPrevNext (currentPage);); Aceasta este o simplificare masivă a codului. Pentru acest caz de utilizare bazat pe atingere, a trebuit să recurg la urmărirea paginilor curente, anterioare și următoare utilizând variabilele de cont. Există, de asemenea, unele lucruri interesante care se întâmplă cu înălțimi recalculate și astfel la schimbarea mediilor. Vă recomandăm să aruncați o privire la codul sursă (adnotat!), Dacă vreți cu adevărat să vă murdăriți mâinile.
Una dintre problemele cu dezvoltarea pentru iPad este faptul că clicurile nu sunt direcționate direct către robinete. Când atingeți o legătură în Safari iOS, există o mică pauză în timp ce sistemul verifică dublu că nu veți face vreun fel de gest. Se întreabă: "Sunteți sigur că doriți să urmați acel link? Sau faceți ciupit sau atingând dublu? "Aceasta face ca interacțiunile bazate pe clic să se simtă leneși și nenaturale.
În cazul nostru, când gaura de iepure este apăsată sau apăsată, vrem să o execute downTheHole () care derulează pagina în jos în pământ. Soluția este de a utiliza ambele clic și touchend ascultători de evenimente! Rodney Rehm ma ajutat să fac o versiune mai eficientă a originalului meu Activati() metodă. După aceea, este ușor să sunați așa:
$ ( "# Pentru a-tuneluri") activa (downTheHole).;
Alice în Videoland va fi întotdeauna o lucrare în desfășurare pentru mine. După cum permite timpul, mă pot întoarce pentru a extinde numărul de dispozitive și browsere pe care le efectuează fără probleme. Sau pot să avansez și să adaug noi capitole la poveste pentru a demonstra lucruri precum panza, animațiile SVG sau API-ul de animație web.
Sunt întotdeauna deschis la noi modalități de a scrie cod și a face codul vechi să ruleze mai repede. Sper că "Alice" va servi ca o demonstrație lungă și pietonală a lucrurilor chiar la colț pentru designul de interacțiune.
