Share
Deze zomer begon ik met het bouwen van een moderne hervertelling van "Alice in Wonderland", een interactieve web-app met verhalenboeken genaamd Alice in Videoland. Het eindigde in een zusterartikel in Adobe Inspire en veranderde in een encore-winnende presentatie die ik gaf tijdens CSS Dev Conf 2013. Het project moest educatief zijn, een proeftuin voor nieuwe CSS-animatietechnieken en desktop-to -tablet JavaScript. Ik bewaar de bron van Alice op GitHub waar iedereen mijn code kan bekijken, maar soms is het leuk om iemand de redenering met jou te laten bespreken.
In dit artikel zal ik enkele van de meest technische details bespreken die noch mijn bespreking, noch het Inspire-artikel diepgaand zou kunnen onderzoeken:
Als je meer wilt weten over storyboarding, retina-afbeeldingen, CSS-animaties en andere interacties, bekijk dan het aanvullende artikel over Adobe Inspire. Ook, voordat je verder leest, moet je absoluut met het verhalenboek zelf spelen!
Mijn doel was eenvoudig genoeg: maak een verhalenboek-app die even goed werkte in Chrome en iOS-Safari, met name op de iPad Retina. Let wel, ik was niet aan het ontwerpen voor een "mobiele context", ik wist precies waar mijn doelgroep was: op wifi-verbindingen, in het comfort van hun eigen huis, hetzij lezen met hun kinderen op hun schoot of de code ontleden bij het kantoor.
Daardoor kon ik me minder zorgen maken over browsercompatibiliteit, een luxe die weinigen in productieomgevingen kunnen betalen. Maar het is belangrijk dat we projecten zoals deze hebben die voor de boeg lopen, omdat ze ons helpen nadenken over wat mogelijk is morgen.
Ik heb altijd genoten van "Alice in Wonderland" en "Through the Looking Glass" opgroeien, en ik dook in het onderzoeken en ontwikkelen van de nieuwe wereld en personages die ik met ijver zou creëren. Er moesten duidelijke verschillen in kunststijlen worden vastgesteld, van het impressionistische en steriele park van de echte wereld tot de rommel uit het midden van de eeuw in het gat van het konijn.
Elk personage moest zijn eigen geschiedenis en persoonlijkheid hebben. Vanwege strakke deadlines kon ik maar een klein deel van het boek tot leven brengen. Ik begon met het herschrijven van de openingsscène (die je kunt lezen door de CSS uit te schakelen of de pagina van het verhalenboek af te drukken) en vervolgens een storyboard te maken om erbij te horen.
Meer informatie over het creatieve proces, de personages en de omgevingontwerpen die in 'Alice in Videoland' zijn opgenomen in het zusterartikel dat ik schreef voor Adobe Inspire.Van het knipperende oog tot Alice die achtervolgt, worden animaties subtiel door het hele verhaal gebruikt om de illusie van het leven te geven, niet zoals een pop-upboek. Hoewel CSS-animaties in alle moderne browsers worden ondersteund, ondersteunen Internet Explorer 8 en later deze niet.
Als u de verkeersrapporten van uw site hebt gecontroleerd en een aanzienlijk aantal van uw gebruikers vertrouwen op Internet Explorer 8 of eerder (u controleert uw analyses altijd voordat u ontwerpt, toch?), Kunt u die browsers nog steeds ondersteunen terwijl u de volledige interactie biedt met moderne browsers . De webontwikkelingsgemeenschap heeft eerder met dit probleem te maken gehad en heeft het nu ontwikkeld - gemeenschappelijke technologieën zoals weblettertypen en AJAX. De oplossing is eenvoudig: gebruikers in moderne browsers krijgen de volledige ervaring, terwijl gebruikers met minder geschikte browsers toch een begrijpelijke en nuttige ervaring krijgen. Walt Disney heeft dit "plussing" de gebruikerservaring genoemd. Webontwikkelaars noemen het "progressieve verbetering" of "sierlijke verslechtering", afhankelijk van of u eerst voor oudere of nieuwere browsers bouwt.
Als het op animatie aankomt, neem ik graag wat ik de Pop-Up Book Approach noem. Ter illustratie, de volgende video's zijn een voorbeeld van een interactieve geschenkkaartanimatie van Square.com ontworpen door Madelin Woods. (Bedankt, Madelin, voor het opnemen van deze!)
Mensen in Internet Explorer 8 en lager zullen nog steeds blij zijn met de illustratie en zullen niet merken dat het moet worden geanimeerd, terwijl mensen in nieuwere browsers zullen worden vermaakt op de plussed animatie.
In Alice in Videoland deed ik hetzelfde. In de scène waar het hipster witte konijn over het scherm loopt, maakte ik hem gecentreerd en stil als hij niet geanimeerd kon worden. Ik deed dit met modernizr.js.
Modernizr.js is een kleine JavaScript-hulp die u op een site kunt zetten om te controleren of een browser bepaalde functies zoals CSS3-animaties en overgangen ondersteunt. Als de functies worden ondersteund, voegt modernizr de klassen toe .cssanimations en .csstransitions naar de bovenliggende HTML-tag.
Ik heb de standaardstijlen van het konijn ingesteld om hem op de pagina te centreren. Als overgangen zijn ingeschakeld, gebruik ik de klasse .csstransitions om hem van de linkerkant van het scherm te verplaatsen:
.konijn links: -50%; // konijn is gecentreerd .csstransitions .rabbit left: -100%; // konijn is aan de linkerkant van het scherm verborgen
Het heeft geen zin om animaties af te spelen terwijl alle afbeeldingen nog steeds worden gedownload. We moeten een laadscherm plaatsen totdat alles klaar is om te gaan. jQuery heeft toevallig een methode genaamd .laden die alleen bij zo'n gelegenheid vuurt. Ik gaf de html tag een standaardklasse van .bezig met laden en gebruikte het volgende bit van jQuery om die klasse in te veranderen .loaded zodra de pagina volledig is geladen en weergegeven:
Accentsconagua
$ (window) .load (function () // Het is goed om een korte time-out in te stellen, zodat de pagina loading // tijd heeft om zijn animatie setTimeout te voltooien (function () // status wijzigen in geladen $ ("html") .addClass ("loaded"). removeClass ("loading");, 4000);); Zie de pen Alice in Videoland Load Screen van Rachel Nabors (@rachelnabors) op CodePen
Het is vrij eenvoudig om de CSS voor het laadscherm naar de.bezig met laden en .loaded klassen. Bekijk regel 9 van de CSS in het codepen-voorbeeld. De vulling op de container overgangen naar 0, waardoor het laadscherm "oprolt". De regels 108 tot 128 besturen de animaties waardoor de kop en schotel vallen na het toevoegen van de .laden klasse naar hun container. Sommige van deze animaties, zoals het rennen van een konijn, zouden alleen moeten gebeuren wanneer dat deel van het verhaal door de lezer wordt gelezen. Het is moeilijk om precies te weten waar de ogen van een gebruiker zich op een bepaald moment bevinden, maar we kunnen het afleiden met behulp van de mooie jQuery Waypoints-plug-in. We kunnen het gebruiken om een .in-view-klasse toe te wijzen aan elke pagina wanneer deze als volgt in het overzicht wordt gescrold:
$ (". scene-park .page"). waypoint (function () // wanneer deze .page in focus komt, geef het een klasse van "in-view" $ (this) .addClass ("in-view" );); Vervolgens brengen we de animatiestijlen onder in de klasse .in-view, zodat ze alleen worden geactiveerd nadat ze in het overzicht zijn geschoven.
Oorspronkelijk ging ik de achtergrond achter Alice animeren, maar naarmate het project vorderde, realiseerde ik me dat het effect dat ik echt wilde was dat ze naar de onderkant van het scherm zou vallen terwijl de lezers naar beneden scrolden. Lezers zouden zich moeten bezighouden met het verhaal om te zien wat er vervolgens gebeurt, en ze zouden niet alleen worden beloond met een progressie naar een doel (de onderkant van de pagina), maar ook met veranderingen in de gemoedstoestand van Alice van bang, tot nieuwsgierig, tot slaperig.
Eerst moest ik Alice kleverig maken. Dat wil zeggen, ik moest haar laten overschakelen naar een vaste positie nadat de lezer begon te scrollen, zodat ze niet van de bovenkant van de pagina zou scrollen. Ik deed dit met behulp van de handige sneltoets jQuery Waypoints voor plakkerige elementen in plaats van te proberen mijn eigen systeem te schrijven.
Voor het parallaxgedeelte heb ik genoegen genomen met Skrollr, dat werkt door twee attributen van numerieke gegevens op een element te zetten, gegevens-pixel-afstand en interpoleren tussen hen, pixel-afstand zijnde de afstand vanaf de bovenkant van de pagina waarop de wijzigingen moeten plaatsvinden. Omdat de tunnels erg ver naar beneden liggen, heb ik JavaScript gebruikt om hun afstand vanaf de bovenkant van de pagina te meten en heb ik hun hoogte gebruikt om die gegevenskenmerken te krijgen:
var tunnelTop = Math.round ($ tunnel.offset (). top); var tunnelTopData = "data-" + tunnelTop; var tunnelBottomData = "data-" + (tunnelTop + Math.round ($ tunnel.height ())); // Geef Falling Alice haar skrollr-metingen als gegevensattributen $ alice.attr (tunnelTopData, "top: 0%"). Attr (tunnelBottomData, "top: 80%");
Dat geeft me iets als:
Zie de Pen Falling Down the Rabbit Hole door Rachel Nabors (@rachelnabors) op CodePen
Als u in Safari op iOS een scroll start, raakt u het scherm aan, schuift u uw vinger omhoog of omlaag en haalt u uw vinger van het scherm. Om energie te besparen, doet Safari niets terwijl uw vinger het scherm aanraakt. Het stopt alle animaties en voert zelfs JavaScript niet uit tot je je vinger hebt verwijderd.
In plaats daarvan neemt het een momentopname van het scherm en beweegt het in de richting van uw vinger, waardoor u de illusie krijgt dat u aan het scrollen bent zoals op het bureaublad. Maar als de pagina animaties bevat, wordt de illusie verbroken met elke schuifbeweging van uw vinger. Dit betekent dat een persoon helemaal naar de bodem van het gat kan scrollen zonder te stoppen om op te merken dat de stemming van Alice aan het veranderen is of dat ze valt:
Skrollr wordt standaard geleverd met een mobielvriendelijke functie, die probeert dit probleem op te lossen door een CSS-transformatie toe te passen op de hele pagina en deze vervolgens met scrollen te animeren naar een nieuwe positie met CSS. Deze methode omzeilt echter de schuifevents die Waypoints vereist om de attitudes van Alice te veranderen:
Dit is waar ik stoom verloor. Ik overwoog om het op te zetten, dus de vallende reeks was een animatie op de iPad en een schuivende interactie op de desktop, maar ik verafschuwde het idee. Ten eerste zou ik twee afzonderlijke interacties moeten onderhouden en ten tweede, als ik zoveel van het verhaal animeerde, waarom heb ik er dan niet gewoon een video van gemaakt?
Het punt van de scroll-interactie is dat het lezers naar het verhaal trekt; ze hebben Alice onder controle. Ze zijn Alice. Het grijpt hen aan. Als alles wat ze moeten doen is op het konijnenhol klikken, wat is het nut daarvan?
Ik nam contact op met veel repo-eigenaren en raadpleegde Stack Overflow op zoek naar een oplossing. Het was John Polacek, een van de beheerders van een andere bibliotheek Super Scrollorama, die stelde dat ik een kijkje zou nemen naar Hammer.js, een kleine JavaScript-bibliotheek voor het verwerken van gebaren zoals knijpen en vegen op mobiele apparaten (die een versie heeft die rechtstreeks in jQuery plugt) !) Ik had al vroeg in de ontwikkeling naar de bibliotheek gekeken en heb ervoor gekozen om het niet na te streven, maar ik besloot opnieuw te kijken.
Ik heb veel tijd besteed aan het kijken hoe mensen zich door het verhaal bewogen met aanraking op de iPad. Ik merkte dat ze niet zozeer over de pagina scripten als over vegen. Ik dacht dat als ik het verhaal met één pagina naar een veegactie zou kunnen brengen, ik toch een vrij nauwe relatie zou kunnen onderhouden tussen zowel desktop- als aanraakervaring. Hammer.js stond me toe om te swipen naar veeggebeurtenissen op de iPad, en ik was in staat om het zo te maken dat de lezers op hun volgende pagina naar de volgende pagina gingen:
if (Modernizr.touch) // Veeg naar de vorige pagina $ (document) .hammer (prevent_default: true). on ("swipedown", functie (gebeurtenis) scrollPageIntoCenter ($ (". page"). get ( prevPage)); currentPage = prevPage; calcPrevNext (currentPage);); Dit is een enorme vereenvoudiging van de code. Voor deze op aanraking gebaseerde use case moest ik mijn toevlucht nemen tot het bijhouden van de huidige, vorige en volgende pagina's met behulp van teller-variabelen. Er zijn ook enkele interessante dingen die gebeuren met het herberekenen van hoogten en dergelijke op veranderende omgevingen. Ik raad je ten zeerste aan de broncode (nuttig geannoteerd!) Te bekijken als je echt je handen vuil wilt maken.
Een van de problemen bij het ontwikkelen voor iPads is dat klikken niet rechtstreeks worden toegewezen aan tikken. Wanneer u in iOS Safari op een koppeling tikt, is er een korte pauze terwijl het systeem controleert of u geen gebaar maakt. Het vraagt: "Weet je zeker dat je die link wilt volgen? Of knijpt u of dubbeltikt u? "Hierdoor voelen click-based interacties zich traag en onnatuurlijk.
In ons geval, wanneer op het konijnenhol wordt geklikt of getikt, willen we dat het het downTheHole () functie die de pagina naar de aarde schuift. De oplossing is om beide te gebruiken Klik en touchend evenement luisteraars! Rodney Rehm hielp me om een efficiëntere versie van mijn origineel te maken activeren() methode. Daarna is het eenvoudig om zo te bellen:
$ ( "# To-tunnels") te activeren (downTheHole).;
Alice in Videoland zal voor mij altijd een werk in uitvoering zijn. Als de tijd het toelaat, kan ik teruggaan naar het aantal apparaten en browsers dat ze naadloos uitvoert, uitbreiden. Of ik kan vooruitgaan en nieuwe hoofdstukken aan het verhaal toevoegen om dingen als canvas, SVG-animaties of de webanimatie-API te demonstreren..
Ik sta altijd open voor nieuwe manieren om code te schrijven en oude code sneller te laten werken. Ik hoop dat "Alice" zal dienen als een lange en legendarische demo van dingen die net om de hoek liggen voor interactieontwerp.
