Share
Cet été, j’ai commencé à construire un récit moderne d’Alice au pays des merveilles, une application Web de livre de contes interactive du nom d’Alice in Videoland. Il a finalement été présenté dans un article du même groupe dans Adobe Inspire et s'est transformé en une présentation encore gagnante que j'avais donnée lors de CSS Dev Conf 2013. Le projet se voulait pédagogique, un terrain d'essai pour les nouvelles techniques d'animation CSS et un environnement de bureau. -tablet JavaScript. Je garde la source d'Alice sur GitHub où tout le monde peut examiner mon code, mais il est parfois agréable de demander à quelqu'un de passer en revue le raisonnement avec vous..
Dans cet article, je couvrirai certains des détails les plus techniques que ni mon exposé ni l'article d'Inspire ne pourraient examiner en profondeur:
Si vous souhaitez en savoir plus sur le scénarimage, les images de la rétine, les animations CSS et d'autres interactions, vous devriez consulter l'article supplémentaire sur Adobe Inspire. De plus, avant de continuer à lire, vous devez absolument jouer avec le livre de contes!
Mon objectif était assez simple: créer une application de livre de contes qui fonctionnait aussi bien sous Chrome que sur iOS Safari, plus précisément sur l'iPad Retina. Remarquez, je ne concevais pas pour un "contexte mobile", je savais exactement où mon public cible serait: sur les connexions wifi, dans le confort de leur propre maison, en lisant avec leurs enfants sur leurs genoux ou en disséquant le code le bureau.
Cela m'a permis de moins me soucier de la compatibilité des navigateurs, un luxe que peu d'environnements de production peuvent se permettre. Mais il est important que nous ayons des projets comme celui-ci qui accélèrent, car ils nous aident à réfléchir à ce qui sera possible demain..
J'ai toujours aimé grandir dans "Alice au pays des merveilles" et "À travers le miroir", et j'ai plongé dans la recherche et le développement du nouveau monde et des personnages que je créerais avec zèle. De nettes différences de styles artistiques ont dû être établies, du parc impressionniste et stérile du monde réel à l'émeute au milieu du siècle du trou du lapin.
Chaque personnage devait avoir sa propre histoire et sa personnalité. À cause des délais serrés, je ne pouvais donner vie qu’à une petite partie du livre. J'ai commencé par réécrire la scène d'ouverture (que vous pouvez lire en désactivant le CSS ou en imprimant la page du livre de contes), puis en créant un story-board pour l'accompagner..
Apprenez-en davantage sur le processus de création, les personnages et les conceptions d'environnement qui ont été intégrées à "Alice in Videoland" dans l'article de ma soeur que j'ai écrit pour Adobe Inspire.De l'œil clignotant à la poursuite d'Alice, les animations sont utilisées subtilement tout au long de l'histoire pour donner l'illusion de la vie, ce qui n'est pas sans rappeler un livre contextuel. Cependant, bien que les animations CSS soient prises en charge par tous les navigateurs modernes, Internet Explorer 8 et les versions antérieures ne les prennent pas en charge..
Si vous avez vérifié les rapports de trafic de votre site et qu'un nombre important de vos utilisateurs utilisent Internet Explorer 8 ou une version antérieure (vous vérifiez toujours vos analyses avant de concevoir, n'est-ce pas?), Vous pouvez toujours prendre en charge ces navigateurs tout en offrant une interaction complète aux navigateurs modernes. . La communauté des développeurs Web a déjà fait face à ce problème et a développé des technologies communes telles que les polices Web et AJAX. La solution est simple: les utilisateurs de navigateurs modernes acquièrent une expérience complète, tandis que ceux utilisant des navigateurs moins performants bénéficient toujours d’une expérience intelligible et utile. Walt Disney a peut-être appelé cela «plussing» l'expérience utilisateur. Les développeurs Web l'appellent «amélioration progressive» ou «dégradation progressive», selon que vous construisez d'abord pour des navigateurs plus anciens ou plus récents..
En ce qui concerne l'animation, j'aime prendre ce que j'appelle l'approche du livre pop-up. À titre d'illustration, les vidéos suivantes sont un exemple d'animation de carte-cadeau interactive de Square.com conçue par Madelin Woods. (Merci, Madelin, de les avoir enregistrées!)
Les personnes utilisant Internet Explorer 8 ou une version inférieure seront toujours ravies par l’illustration et ne remarqueront pas qu’elle devrait être animée, tandis que les utilisateurs des nouveaux navigateurs seront amusés lors de l’animation enrichie..
Dans Alice in Videoland, j'ai fait la même chose. Dans la scène où le lapin blanc hipster traverse l'écran, je l'ai rendu centré et immobile s'il ne pouvait pas être animé. Je l'ai fait avec modernizr.js.
Modernizr.js est un petit assistant JavaScript que vous pouvez placer sur un site pour vérifier si un navigateur prend en charge certaines fonctionnalités telles que les animations et transitions CSS3. Si les fonctionnalités sont supportées, modernizr ajoute les classes .cssanimations et .csstransitions à la balise HTML parent.
Je règle les styles par défaut du lapin pour le centrer sur la page. Si les transitions sont activées, j'utilise la classe .csstransitions pour le repositionner du côté gauche de l'écran:
.lapin gauche: -50%; // le lapin est centré .csstransitions .rabbit left: -100%; // le lapin est caché du côté gauche de l'écran
Cela ne sert à rien de commencer à jouer des animations alors que toutes les images sont en cours de téléchargement. Nous devons afficher un écran de chargement jusqu'à ce que tout soit prêt. jQuery a une méthode appelée .charge qui ne tire que pour une telle occasion. J'ai donné le html marquer une classe par défaut de .chargement et utilisé le bit suivant de jQuery pour changer cette classe à .chargé dès que la page est entièrement chargée et rendue:
Accentsconagua
$ (window) .load (function () // Il est agréable de définir un court délai pour que la page de chargement // ait le temps de terminer son animation setTimeout (function () // change l'état en chargé $ ("html") .addClass ("chargé"). removeClass ("chargement");, 4000);); Voir le stylo Alice dans Videoland Load Screen de Rachel Nabors (@rachelnabors) sur CodePen
Il est assez facile d’étendre le CSS pour l’écran de chargement à la.chargement et .chargé Des classes. Consultez la ligne 9 du CSS dans l'exemple de codepen. le rembourrage sur le conteneur transitions à 0, l’enroulement de l’écran de chargement. Les lignes 108 à 128 contrôlent la des animations qui font tomber la tasse et la soucoupe après avoir ajouté le .charge classe à leur conteneur. Certaines de ces animations, comme celle du lapin qui court, ne devraient avoir lieu que lorsque cette partie de l'histoire est lue par le lecteur. Il est difficile de savoir exactement où les yeux des utilisateurs seront à un moment donné, mais nous pouvons en déduire en utilisant le charmant plugin jQuery Waypoints. Nous pouvons l'utiliser pour assigner une classe .in-view à chaque page quand elle défile comme suit:
$ (". scene-park .page"). waypoint (function () // quand cette .page devient nette, donnez-lui une classe de "in-view" $ (this) .addClass ("in-view" );); Ensuite, nous modifions les styles d’animation dans la classe .in-view afin qu’ils ne se déclenchent qu’après défilement dans la vue..
À l'origine, j'allais animer l'arrière-plan derrière Alice, mais au fur et à mesure de l'avancement du projet, je me suis rendu compte que l'effet que je souhaitais vraiment était qu'elle tombe au bas de l'écran lorsque les lecteurs défilaient. Les lecteurs devraient s’engager dans l’histoire pour voir ce qui se passera ensuite, et ils seraient récompensés non seulement par une progression vers un but (bas de la page), mais également par des changements dans l’humeur d’Alice, allant de la peur au curieux en passant au sommeil..
Tout d'abord, je devais rendre Alice collante. C’est-à-dire que je devais la forcer à changer de position après que le lecteur ait commencé à faire défiler la page, afin qu’elle ne défile pas en haut de la page. Je l'ai fait en utilisant le raccourci pratique jQuery Waypoints pour les éléments collants plutôt que d'essayer d'écrire mon propre système.
Pour la partie parallaxe, je me suis installé sur Skrollr, qui fonctionne en prenant deux attributs de données numériques sur un élément, Les données-distance de pixel et interpoler entre eux, distance de pixel étant la distance du haut de la page à laquelle les changements doivent commencer à se produire. Comme les tunnels sont très loin en bas de la page, j'ai utilisé JavaScript pour mesurer leur distance par rapport au haut de la page, et leur hauteur pour obtenir ces attributs de données:
var tunnelTop = Math.round ($ tunnel.offset (). top); var tunnelTopData = "data-" + tunnelTop; var tunnelBottomData = "data-" + (tunnelTop + Math.round ($ tunnel.height ())); // Donne à Falling Alice ses mesures skrollr sous forme d'attributs de données $ alice.attr (tunnelTopData, "top: 0%"). Attr (tunnelBottomData, "top: 80%");
Ce qui me donne quelque chose comme:
Voir le stylo tomber dans le trou du lapin de Rachel Nabors (@rachelnabors) sur CodePen
Dans Safari sur iOS, lorsque vous lancez un défilement, vous touchez l'écran, faites glisser votre doigt vers le haut ou le bas, puis vous le soulevez de l'écran. Pour économiser de l'énergie, Safari ne fait rien tant que votre doigt touche l'écran. Il arrête toutes les animations et n'exécute même pas JavaScript tant que vous n'avez pas retiré votre doigt..
Au lieu de cela, il prend un instantané de l’écran et le déplace dans la direction de votre doigt, donnant l’illusion que vous faites défiler comme sur le bureau. Mais si la page contient des animations, l'illusion est brisée à chaque défilement de votre doigt. Cela signifie qu'une personne peut faire défiler jusqu'au fond du trou sans s'arrêter une seule fois pour constater que l'humeur d'Alice change ou qu'elle tombe:
Skrollr est fourni par défaut avec une fonctionnalité compatible avec les appareils mobiles, qui tente de résoudre ce problème en appliquant une transformation CSS à la page entière, puis en l'animant à un nouvel emplacement avec CSS en défilement. Cependant, cette méthode contourne les événements de défilement nécessaires aux points de cheminement pour changer les attitudes d’Alice:
C'est là que j'ai perdu la vapeur. J'ai envisagé de l'installer de sorte que la séquence qui tombe était une animation sur l'iPad et une interaction de défilement sur le bureau, mais je détestais l'idée. Premièrement, je devrais maintenir deux interactions distinctes et deuxièmement, si j'animais une si grande partie du récit, pourquoi ne pas en faire une vidéo??
Le but de l'interaction de défilement est qu'il attire les lecteurs dans l'histoire; ils contrôlent Alice. Ils sont Alice. Cela les engage. Si tout ce qu'ils ont à faire est de cliquer sur le terrier du lapin, à quoi sert-il??
J'ai contacté de nombreux propriétaires de dépôts et consulté Stack Overflow à la recherche d'une solution. C'est John Polacek, l'un des responsables d'une autre bibliothèque, Super Scrollorama, qui m'a suggéré de jeter un coup d'œil à Hammer.js, une petite bibliothèque JavaScript permettant de manipuler des gestes tels que pincer et glisser sur des appareils mobiles (dont la version se branche directement sur jQuery !) J'avais jeté un coup d'œil à la bibliothèque au début du développement et avais choisi de ne pas la poursuivre, mais j'ai décidé de regarder à nouveau.
J'ai passé beaucoup de temps à regarder comment les gens évoluaient dans l'histoire à l'aide de Touch sur iPad. J'ai remarqué qu'ils ne faisaient pas défiler la page au lieu de glisser. Je pensais que si je pouvais cartographier l'avancement de l'histoire d'une page en une action balayée, je pourrais toujours maintenir une relation assez proche entre les expériences de bureau et tactiles. Hammer.js m'a permis de participer aux événements de balayage sur l'iPad et j'ai pu le faire de sorte que, lors de ce balayage, les lecteurs passent à la page suivante:
if (Modernizr.touch) // Swipe à la page précédente $ (document) .hammer (prevent_default: true). on ("balayage", fonction (événement) scrollPageIntoCenter ($ (". page"). get ( prevPage)); currentPage = prevPage; calcPrevNext (currentPage);); C'est une simplification massive du code. Pour ce cas d'utilisation tactile, je devais avoir recours au suivi des pages actuelles, précédentes et suivantes à l'aide de variables de compteur. Il y a aussi des choses intéressantes qui se produisent avec le recalcul des hauteurs et telles sur des environnements changeants. Je vous recommande vivement de jeter un coup d'œil au code source (bien utile commenté!) Si vous voulez vraiment vous salir les mains.
Un des problèmes liés au développement pour iPad est que les clics ne sont pas directement mappés aux robinets. Lorsque vous appuyez sur un lien dans iOS Safari, il y a une légère pause pendant que le système vérifie que vous n'allez pas faire quelque geste que ce soit. Il demande: «Êtes-vous sûr de vouloir suivre ce lien? Ou êtes-vous en train de pincer ou de double taper? »Cela rend les interactions basées sur les clics lentes et non naturelles..
Dans notre cas, lorsque le trou du lapin est cliqué ou tapé, nous voulons qu’il exécute le downTheHole () fonction qui fait défiler la page dans la terre. La solution consiste à utiliser les deux Cliquez sur et toucher auditeurs d'événements! Rodney Rehm m'a aidé à créer une version plus efficace de mon original Activer() méthode. Après quoi, il est facile d'appeler comme ceci:
$ ("# à-tunnels"). activate (downTheHole); Alice à Videoland sera toujours un travail en cours pour moi. Si le temps le permet, je peux revenir en arrière pour augmenter le nombre de périphériques et de navigateurs dans lesquels elle opère de manière transparente. Ou bien, je peux avancer et ajouter de nouveaux chapitres à l'histoire pour illustrer des éléments tels que canvas, les animations SVG ou l'API d'animation Web..
Je suis toujours ouvert aux nouvelles façons d'écrire du code et de faire en sorte que l'ancien code soit plus rapide. J'espère que "Alice" servira de longue et riche démonstration sur le développement interactif.
