Wie sie es gemacht haben: Alice im Videoland

() translation by (you can also view the original English article)

Diesen Sommer habe ich begonnen, eine moderne Nacherzählung von "Alice im Wunderland" zu erstellen, einer interaktiven Storybook-Web-App namens Alice im Videoland. Es wurde schließlich in einem Schwesterartikel in Adobe Inspire vorgestellt und in eine Zugabe-Gewinner-Präsentation umgewandelt, die ich auf der CSS Dev Conf 2013 hielt. Das Projekt sollte lehrreich sein, ein Testfeld für neue CSS-Animationstechniken und Desktop-to-Tablet-JavaScript. Ich halte Alices Quelle auf GitHub, wo jeder meinen Code untersuchen kann, aber manchmal ist es schön, wenn jemand die Argumentation mit Ihnen bespricht.

In diesem Artikel werde ich einige der technischsten Details behandeln, die weder in meinem Vortrag noch im Inspire-Artikel eingehend untersucht werden konnten:

Verwenden von Modernizr.js mit Animationen, um die ordnungsgemäße Verschlechterung zu verbessern
Erkennen, welche Seite mit jQuery-Wegpunkten gelesen wird
Hinzufügen einer Bildlaufparallaxe mit Skrollr.js
Probleme mit dem Scrollen überwinden und auf dem iPad wischen
Mapping tippen Sie auf, um zu klicken

Wenn Sie mehr über Storyboarding, Retina-Bilder, CSS-Animationen und andere Interaktionen erfahren möchten, lesen Sie den ergänzenden Artikel zu Adobe Inspire. Bevor Sie weiterlesen, sollten Sie unbedingt mit dem Bilderbuch selbst spielen!

Ein Storybook für iPad und Chrome

Mein Ziel war einfach genug: Erstellen Sie eine Storybook-App, die in Chrome und iOS Safari gleichermaßen gut funktioniert, insbesondere auf dem iPad Retina. Wohlgemerkt, ich habe nicht für einen "mobilen Kontext" entworfen, ich wusste genau, wo meine Zielgruppe sein würde: über WLAN-Verbindungen, bequem von zu Hause aus, entweder mit ihren Kindern auf dem Schoß lesen oder den Code unter sezieren das Büro.

Dadurch konnte ich mich weniger um die Browserkompatibilität kümmern, die sich nur wenige in Produktionsumgebungen leisten können. Aber es ist wichtig, dass wir Projekte wie dieses haben, die der Kurve voraus sind, weil sie uns helfen, darüber nachzudenken, was morgen möglich sein wird.

montage — Kunststile und Charakterentwicklung mussten vorhanden sein, bevor ich mit dem Codieren anfing.

Ich hatte es immer genossen, "Alice im Wunderland" und "Through the Looking Glass" aufzuwachsen, und ich beschäftigte mich mit der Erforschung und Entwicklung der neuen Welt und Charaktere, die ich mit Eifer erschaffen würde. Es mussten deutliche Unterschiede in den Kunststilen festgestellt werden, vom impressionistischen und sterilen Park der realen Welt bis zum Aufruhr in der Mitte des Jahrhunderts im Kaninchenbau.

Jeder Charakter musste seine eigene Geschichte und Persönlichkeit haben. Aufgrund der engen Fristen konnte ich nur einen kleinen Teil des Buches zum Leben erwecken. Ich begann damit, die Eröffnungsszene neu zu schreiben (die Sie lesen können, indem Sie das CSS ausschalten oder die Seite des Storybooks drucken) und dann ein dazu passendes Storyboard zu erstellen.

Erfahren Sie mehr über den kreativen Prozess, die Charaktere und die Umgebungsdesigns, die in "Alice im Videoland" in dem Schwesterartikel enthalten sind, den ich für Adobe Inspire geschrieben habe.

Anmutiger Abbau und fortschreitende Verbesserung

Vom blinzelnden Auge bis zur Verfolgung durch Alice werden Animationen subtil in der gesamten Geschichte verwendet, um die Illusion des Lebens zu vermitteln, ähnlich wie bei einem Popup-Buch. Während CSS-Animationen in allen modernen Browsern unterstützt werden, werden sie von Internet Explorer 8 und niedriger nicht unterstützt.

Wenn Sie die Verkehrsberichte Ihrer Website überprüft haben und eine erhebliche Anzahl Ihrer Benutzer auf Internet Explorer 8 oder früher angewiesen ist (Sie überprüfen Ihre Analysen immer vor dem Entwerfen, oder?), Können Sie diese Browser weiterhin unterstützen und modernen Browsern die vollständige Interaktion bieten . Die Webentwickler-Community war bereits zuvor mit diesem Problem konfrontiert und hat gängige Technologien wie Web-Schriftarten und AJAX entwickelt. Die Lösung ist einfach: Benutzer in modernen Browsern erhalten die volle Erfahrung, während Benutzer in weniger leistungsfähigen Browsern immer noch eine verständliche und nützliche Erfahrung erhalten. Walt Disney könnte dies als "Plussing" der Benutzererfahrung bezeichnet haben. Webentwickler nennen es "progressive Verbesserung" oder "würdevolle Verschlechterung", je nachdem, ob Sie zuerst für ältere oder neuere Browser erstellen.

Wenn es um Animation geht, nehme ich gerne den sogenannten Popup-Buchansatz. Zur Veranschaulichung sind die folgenden Videos ein Beispiel für eine interaktive Geschenkkartenanimation von Square.com, die von Madelin Woods entwickelt wurde. (Danke, Madelin, dass du diese aufgenommen hast!)

Personen in Internet Explorer 8 und niedriger werden von der Abbildung weiterhin begeistert sein und nicht bemerken, dass sie animiert werden sollte, während Personen in neueren Browsern von der ausführlichen Animation unterhalten werden.

In Alice im Videoland habe ich dasselbe getan. In der Szene, in der das weiße Hipster-Kaninchen über den Bildschirm läuft, habe ich ihn zentriert und stationär gemacht, wenn er nicht animiert werden konnte. Ich habe das mit modernizr.js gemacht.

Modernizr.js

Modernizr.js ist ein kleiner JavaScript-Helfer, den Sie auf einer Website platzieren können, um zu überprüfen, ob ein Browser bestimmte Funktionen wie CSS3-Animationen und -Übergänge unterstützt. Wenn die Funktionen unterstützt werden, fügt modernizr die Klassen .cssanimations und .csstransitions zum übergeordneten HTML-Tag hinzu.

Ich habe die Standardstile des Kaninchens so eingestellt, dass er auf der Seite zentriert wird. Wenn Übergänge aktiviert sind, verwende ich die Klasse .csstransitions, um ihn auf der linken Seite des Bildschirms neu zu positionieren:


.rabbit {
   left: -50%; // rabbit is centered
}

.csstransitions .rabbit {
   left: -100%; // rabbit is hidden off left side of screen
}

How the White Rabbit's scene should look on browsers like IE 8 and lower that don't support animations. — Wie die Szene des weißen Kaninchens in Browsern wie IE 8 und niedriger aussehen sollte, die keine Animationen unterstützen.

Weitere Informationen zum Erstellen von Animationen und Retina-Bildern finden Sie in einem Schwesterartikel, den ich für Adobe Inspire geschrieben habe.

Der Ladebildschirm

Es ist nicht gut, Animationen abzuspielen, während alle Bilder noch heruntergeladen werden. Wir müssen einen Ladebildschirm einrichten, bis alles bereit ist. jQuery hat zufällig eine Methode namens .load, die nur bei einer solchen Gelegenheit ausgelöst wird. Ich habe dem html-Tag eine Standardklasse für das .loading zugewiesen und das folgende Bit von jQuery verwendet, um diese Klasse in .loaded zu ändern, sobald die Seite vollständig geladen und gerendert ist:


$(window).load(function() {
   // It’s nice to set a short timeout so the loading
   // page has time to complete its animation

   setTimeout(function(){
      // change state to loaded
      $("html").addClass("loaded").removeClass("loading");
   }, 4000);
});

Sehen Sie den Pen Alice im Videoland-Ladebildschirm von Rachel Nabors(@rachelnabors) auf CodePen

Es ist ziemlich einfach, das CSS für den Ladebildschirm auf die Klassen .loading und .loaded zu beschränken. Schauen Sie sich Zeile 9 des CSS im Codepen-Beispiel an. Die padding des Containers geht auf 0 über, wodurch der Ladebildschirm „aufgerollt“ wird. Die Zeilen 108 bis 128 steuern die Animationen, die dazu führen, dass Tasse und Untertasse nach dem Hinzufügen der .load-Klasse zu ihrem Container fallen.

Wissen Sie, welche Seite gelesen wird

Einige dieser Animationen, wie das Laufen des Kaninchens, sollten nur stattfinden, wenn dieser Teil der Geschichte vom Leser gelesen wird. Es ist schwer genau zu wissen, wo sich die Augen eines Benutzers zu einem bestimmten Zeitpunkt befinden, aber wir können dies mithilfe des schönen jQuery Waypoints-Plugins ableiten. Wir können es verwenden, um jeder .page eine .in-view-Klasse zuzuweisen, wenn sie wie folgt in die Ansicht gescrollt wird:


$(".scene-park .page").waypoint(function() {
   // when this .page comes into focus, give it a class of “in-view”
   $(this).addClass("in-view");
});

Anschließend ordnen wir die Animationsstile der .in-view-Klasse zu, sodass sie erst nach dem Scrollen in die Ansicht ausgelöst werden.

Mit Parallaxe das Kaninchenloch hinunter

Ursprünglich wollte ich den Hintergrund hinter Alice animieren, aber als das Projekt fortschritt, wurde mir klar, dass der Effekt, den ich wirklich wollte, darin bestand, dass sie zum unteren Bildschirmrand fiel, während die Leser nach unten scrollen. Die Leser müssten sich mit der Geschichte beschäftigen, um zu sehen, was als nächstes passiert, und sie würden nicht nur mit einem Fortschritt in Richtung eines Ziels (am Ende der Seite) belohnt, sondern auch mit Veränderungen in Alices Stimmung von ängstlich über neugierig bis schläfrig .

Zuerst musste ich Alice klebrig machen. Das heißt, ich musste sie in eine feste Position bringen, nachdem der Leser mit dem Scrollen begonnen hatte, damit sie nicht vom oberen Rand der Seite rollte. Ich habe dies mit der praktischen jQuery Waypoints-Verknüpfung für klebrige Elemente getan, anstatt zu versuchen, mein eigenes System zu schreiben.

Für den Parallaxenteil habe ich mich für Skrollr entschieden, bei dem zwei numerische Datenattribute für ein Element verwendet werden, data-pixel-distance und Interpolation zwischen ihnen, wobei der pixel-distance der Abstand vom oberen Rand der Seite ist, bei dem die Änderungen erforderlich sind fang an zu geschehen. Da sich die Tunnel sehr weit unten auf der Seite befinden, habe ich JavaScript verwendet, um ihren Abstand vom oberen Rand der Seite zu messen, und ich habe ihre Höhe verwendet, um diese Datenattribute zu erhalten:


var tunnelTop = Math.round($tunnel.offset().top);
var tunnelTopData = "data-" + tunnelTop;
var tunnelBottomData =  "data-" + (tunnelTop + Math.round($tunnel.height()));

// Give Falling Alice her skrollr measurements as data attributes

$alice.attr(tunnelTopData, "top:0%").attr(tunnelBottomData, "top:80%");

Was mir so etwas gibt wie:

1	</pre>
2	<div data-5205="top:0%" data-9810="top:80%"></div>
3	<pre>

Sehen Sie den Pen Falling Down the Rabbit Hole von Rachel Nabors (@rachelnabors) auf CodePen

Scrollen und Wischen auf einem iPad

Wenn Sie in Safari unter iOS einen Bildlauf starten, berühren Sie den Bildschirm, schieben Ihren Finger nach oben oder unten und heben dann Ihren Finger vom Bildschirm. Um Strom zu sparen, unternimmt Safari nichts, während Ihr Finger den Bildschirm berührt. Es stoppt alle Animationen und führt nicht einmal JavaScript aus, bis Sie Ihren Finger entfernt haben.

Stattdessen macht es einen Schnappschuss des Bildschirms und bewegt ihn in Richtung Ihres Fingers, wodurch die Illusion entsteht, dass Sie wie auf dem Desktop scrollen. Wenn die Seite jedoch Animationen enthält, wird die Illusion mit jeder Schriftrolle Ihres Fingers gebrochen. Dies bedeutet, dass eine Person bis zum Grund des Lochs scrollen kann, ohne einmal anzuhalten, um zu bemerken, dass sich Alices Stimmung ändert oder dass sie fällt:

Skrollr verfügt standardmäßig über eine mobilfreundliche Funktion, mit der versucht wird, dieses Problem zu beheben, indem eine CSS-Transformation auf die gesamte Seite angewendet und anschließend mit CSS beim Scrollen an einer neuen Position animiert wird. Diese Methode umgeht jedoch die Bildlaufereignisse, die Wegpunkte benötigen, um Alices Einstellungen zu ändern:

Im Kaninchenbau stecken bleiben

Hier habe ich Dampf verloren. Ich überlegte, es so einzurichten, dass die fallende Sequenz eine Animation auf dem iPad und eine Bildlaufinteraktion auf dem Desktop war, aber ich verabscheute die Idee. Erstens müsste ich zwei separate Interaktionen pflegen und zweitens, wenn ich so viel von der Geschichte animiert hätte, warum habe ich nicht einfach ein Video davon gemacht?

Der Punkt der Scrolling-Interaktion ist, dass sie die Leser in die Geschichte hineinzieht. Sie kontrollieren Alice. Sie sind Alice. Es beschäftigt sie. Wenn sie nur auf das Kaninchenloch klicken müssen, worum geht es dann?

Ich habe viele Repo-Besitzer kontaktiert und Stack Overflow auf der Suche nach einer Lösung konsultiert. Es war John Polacek, einer der Betreuer einer anderen Bibliothek, Super Scrollorama, der mir vorschlug, mir Hammer.js anzuschauen, eine kleine JavaScript-Bibliothek für die Handhabung von Gesten wie Kneifen und Wischen auf Mobilgeräten (deren Version direkt in jQuery eingesteckt werden kann!) Ich hatte mir die Bibliothek schon früh in der Entwicklung angesehen und mich dagegen entschieden, sie weiter zu verfolgen, aber ich beschloss, sie mir noch einmal anzusehen.

Es ist Hammerzeit

Ich habe viel Zeit damit verbracht zu beobachten, wie sich die Leute mit Touch auf dem iPad durch die Geschichte bewegten. Ich bemerkte, dass sie nicht einmal die Seite nach unten scrollen, sondern wischen. Ich dachte, wenn ich die Weiterentwicklung der Geschichte um eine Seite einer Wischaktion zuordnen könnte, könnte ich immer noch eine ziemlich enge Beziehung zwischen Desktop- und Touch-Erlebnissen aufrechterhalten. Mit Hammer.js konnte ich mich in Swipe-Ereignisse auf dem iPad einbinden, und ich konnte es so gestalten, dass die Leser beim Swipe zur nächsten Seite weitergingen:


if(Modernizr.touch) {
   //Swipe to previous page
   $(document).hammer({prevent_default:true}).on("swipedown", function(event) {
      scrollPageIntoCenter($(".page").get(prevPage));
      currentPage = prevPage;
      calcPrevNext(currentPage);
   });
}

Dies ist eine massive Vereinfachung des Codes. Für diesen berührungsbasierten Anwendungsfall musste ich mithilfe von Zählervariablen die aktuellen, vorherigen und nächsten Seiten verfolgen. Es gibt auch einige interessante Dinge, die bei der Neuberechnung von Höhen und dergleichen in sich ändernden Umgebungen passieren. Ich empfehle Ihnen dringend, sich den (hilfreich kommentierten!) Quellcode anzusehen, wenn Sie sich wirklich die Hände schmutzig machen möchten.

Tippen vs. Klicken

Eines der Probleme bei der Entwicklung für iPads besteht darin, dass Klicks nicht direkt auf Taps abgebildet werden. Wenn Sie in iOS Safari auf einen Link tippen, wird eine kurze Pause eingelegt, während das System überprüft, ob Sie keine Geste ausführen. Es wird gefragt: "Sind Sie sicher, dass Sie diesem Link folgen möchten? Oder kneifst oder klopfst du doppelt? “ Dadurch fühlen sich klickbasierte Interaktionen träge und unnatürlich an.

In unserem Fall möchten wir, dass das Kaninchenloch beim Klicken oder Antippen die Funktion downTheHole() ausführt, mit der die Seite in die Erde gescrollt wird. Die Lösung besteht darin, sowohl click- als auch touchend-Ereignis-Listener zu verwenden! Rodney Rehm hat mir geholfen, eine effizientere Version meiner ursprünglichen activete() methode zu erstellen. Danach ist es einfach, so anzurufen:

1
2	$("#to-tunnels").activate(downTheHole);

In Arbeit

Alice im Videoland wird für mich immer in Arbeit sein. Wenn es die Zeit erlaubt, kann ich zurückgehen, um die Anzahl der Geräte und Browser zu erweitern, in denen sie nahtlos arbeitet. Oder ich kann vorwärts gehen und der Geschichte neue Kapitel hinzufügen, um Dinge wie Leinwand, SVG-Animationen oder die Webanimations-API zu demonstrieren.

Ich bin immer offen für neue Möglichkeiten, Code zu schreiben und alten Code schneller laufen zu lassen. Ich hoffe, dass "Alice" als lange und geschichtsträchtige Demo der Dinge gleich um die Ecke für das Interaktionsdesign dienen wird.