Share
Nous nous attaquons à un grand problème aujourd'hui: la page marketing iPad "Elevating the expédition" d'Apple.
On peut dire que c'est un site impressionnant en lui-même, montrant quelques puissants JavaScript et CSS. Apple a également pris très au sérieux le concept de public cible dans ses décisions concernant ce site. Plongeons dedans!
Ce site s’ajoute à une longue liste de sites utilisant le défilement pour améliorer la présentation du contenu et déclencher des animations. Lorsque vous faites défiler le site, vous pouvez voir le contenu se remplir au fur et à mesure que vous défilez, y compris un nombre d'élévations sur le côté droit qui augmente à mesure que vous faites défiler; ceci est un indicateur qui suit avec le récit de l'histoire de l'ascension du grimpeur.
Nous voyons également des animations de parallaxe subtiles (les nuages, par exemple), quelques déclencheurs d’illustration qui se produisent lorsqu’ils apparaissent, ainsi que des animations infinies qui ne reposent sur aucune interaction..
De très grandes images sont utilisées sur tout le site (plus de détails à ce sujet dans la section suivante), à la fois comme images d'arrière-plan et comme images au contenu intégré..
Apple a pris des décisions intéressantes avec cette page de marketing. La décision la plus frappante est peut-être la taille des éléments de la page. Ci-dessous, vous pouvez voir une capture d'écran de l'inspecteur de Chrome. Sur une connexion Internet rapide, le site prend bien plus de deux secondes pour charger les ressources sur la page. La taille totale du téléchargement sur le site dépasse 12,5 Mo. Bien sûr, Apple a optimisé pas mal de choses (que nous verrons plus loin), mais la question demeure: comment peut-on justifier un PNG de 4Mb pour ce qui est techniquement une animation "extra" en nuage??
La réponse, très probablement, est que la cible d’Apple pour cette page n’éprouvera jamais de problèmes de décalage lors du téléchargement des fichiers ginormous, et s’ils le font, ils risquent de ne pas s'en soucier. Le public cible est le plus susceptible d'être sur un Mac ou un autre écran de périphérique moderne, et ils sont probablement sur un réseau rapide. Par conséquent, Apple a pris la décision de soutenir une expérience particulièrement convaincante et de permettre une expérience moindre pour ceux qui ne sont probablement pas dans leur marché cible..
Il convient également de noter que cette page est une campagne de marketing existante en dehors du flux de vente d’Apple, ce qui signifie que personne n’est empêché d’acheter un iPad à Dell via un moniteur CR CR, s’ils le souhaitent..
Une autre décision intéressante prise par Apple (ici et dans de nombreux autres projets Web) est l'utilisation d'images pour les titres de texte..
C'est un pngLa plupart des gens savent qu'Apple est fier, depuis de nombreuses années, d'une typographie claire et cohérente. Le regretté Steve Jobs a même suivi un cours de calligraphie au collège Reed, qui, selon lui, l'a inspiré à conférer un contrôle articulé des polices au système d'exploitation Mac. Conscient de cette priorité, Apple choisit régulièrement de restituer des images de texte au lieu de polices pour la plupart de leurs titres, sans doute pour qu'ils contrôlent ce que tout le monde voit. Bien que cette décision entraîne des dépenses, Apple les commercialise pour obtenir une qualité constante et un contrôle total sur le produit final..
Fait intéressant, ils sont même allés jusqu'à faire cela avec l'indicateur de nombre sur la carte d'oxygène.
Voyez par vous-même, voici le sprite SVG Apple a utilisé quelques techniques simples d'amélioration progressive sur ce site; à savoir, la conception reste intacte dans tous les navigateurs, tandis que les interactions peuvent varier en fonction des capacités du navigateur. Apple utilise le css transformer; et la plupart des améliorations progressives tournent autour de cet aspect. D'autres éléments, tels que le curseur introduit dans la deuxième section, ne sont affichés que dans les navigateurs pris en charge. Apple utilise des hacks similaires à ceux-ci, qui servent à masquer des éléments dans IE 7-9, mais apparaissent dans tous les autres navigateurs. Ceci est utile pour rendre des éléments statiques pour IE, tels que le graphe d'altitude du sommet..
.graphique .oxygen-slider position: absolute; en haut: 246px; à gauche: 45px; affichage: aucun \ 9; .ie-graph display: none; affichage: bloc \ 9; position: relative; en haut: 0;
La ligne affichage: aucun \ 9; et affichage: bloc \ 9; les lignes ne sont valables que dans IE 7-9; cette petite astuce évite d'utiliser des feuilles de style spécifiques à IE.
Le curseur et l'animation de ce graphique n'apparaissent pas dans IE.Apple utilise également JavaScript pour effectuer des opérations simples, telles que le remplacement d'images par leur version haute résolution, si nécessaire. Bien que Chromium ait officiellement implémenté les images responsive, il reste encore beaucoup à faire pour que son adoption soit effective. C'est pourquoi JavaScript est actuellement l'une des seules options disponibles..
Comment charger des fichiers volumineux et s'en sortir? Prenons quelques leçons de ce site.
Il est extrêmement important d'optimiser, lorsque cela est possible. Dans ce cas, Apple a beaucoup optimisé certaines images. Par exemple, l'image d'en-tête 1024 × 1766 fait 341 Ko et le sprite des éléments de pack, 49,9 Ko. Bien qu'aucun octet ne soit considéré comme indispensable, ces tailles sont relativement rapidement téléchargées aux vitesses de connexion les plus modernes, y compris à de nombreuses vitesses de télécommunication.
Les images et les scripts peuvent considérablement ralentir la vitesse de rendu d'une page. Lorsque cela est possible, utilisez quelque chose comme chargement paresseux (chargement avec JavaScript une fois la page chargée) pour charger des images volumineuses, ou incluez-les dans votre CSS en tant qu'images d'arrière-plan si elles ne font pas partie du flux de contenu sémantique. Apple utilise une technique JavaScript de post-chargement avec toutes les images haute résolution, comme indiqué précédemment, et utilise également CSS pour définir les images d'arrière-plan au format PNG dans le grand nuage..
Vous voulez que votre page se sente rapide? concentrez-vous sur les 2000px du haut le plus rapidement possible. Indépendamment de ce qui se situe en dessous de ces 2000 pixels, si vous chargez du contenu dans deux hauteurs de fenêtre, il est beaucoup plus probable que le contenu au-delà de 2000 pixels soit chargé au moment où l'utilisateur le fait défiler. Apple a fait de cet objectif une priorité en abaissant les gros fichiers au format PNG à environ 4400 pixels du haut de la page et en plaçant les images à chargement rapide en haut..
L'élément de curseur offre à l'utilisateur sa première interaction sur la page (autre que le défilement). Apple a utilisé un intervalle entrée, et un peu de magie CSS, pour retirer cela. Comme mentionné précédemment, le nombre à la droite du graphique est fait avec des images, mais nous utiliserons une typographie normale pour nous en tenir à la question. (Si vous souhaitez apprendre cette technique, commencez par vous familiariser avec les sprites CSS.)
Vous pouvez voir ce curseur en action sur CodePen Il y a quelques choses à noter dans cet exemple. Premièrement, il existe un peu de CSS dédié à l’apparence correcte de l’entrée du curseur. La majeure partie du reste de la CSS est orientée vers le positionnement et les astuces après / avant.
Un autre aspect intéressant de cette démo est l'élément indicateur. Regardons le JavaScript pour un moment.
Accentsconagua
var slider = $ (". bgslider"); var max = slider.attr ("max"); var min = slider.attr ("min"); var colBg = $ (". fg"); var indic = $ (". indicateur"); slider.on ("change", function () var val = slider.val () / max * 100; colBg.css ("hauteur", val + "%"); indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val);); Nous voyons immédiatement que le curseur est l'endroit où toutes les interactions sont centrées. Mais en regardant l'indicateur, nous voyons cette ligne:
indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val); Que fait cette ligne? Premièrement, il faut que la valeur supérieure de l'indicateur soit la valeur en pourcentage du curseur, multipliée par 0,7 - cela nous donne un indicateur qui ne va pas au bas de l'élément. Dans l'exemple donné par Apple, l'indicateur suit l'image; dans cet exemple, notre indicateur se déplace à une vitesse différente de celle de notre image. Cela nous donne plus de contrôle sur l'animation elle-même.
Ensuite, nous voyons l'animation JavaScript.
$ ("input"). animate ("value": 20000, étape: function () slider.val (this.value); slider.trigger ("change");, complète: function () slider.val (max) .trigger ("change");, durée: 3000); Comme la fonction animate de jQuery prend en charge l’animation des propriétés CSS par défaut, nous écrivons nos propres fonctions step et complete. Cela nous permet d’utiliser les fonctions de file d’attente et d’accélération intégrées de jQuery et d’éviter l’écriture de messages personnalisés. setInterval ou récursif setTimeout appels.
Nous n’avons intentionnellement pas fait cela exactement comme Apple l’a obtenu pour pouvoir vous montrer comment vous pourriez aborder le même problème avec une solution différente..
Ensuite, regardons l'animation du pack.
Nous pouvons voir que les différents éléments d'équipement sont, en un sens, présentés dans votre navigateur lorsque vous faites défiler. Cet effet est obtenu à l'aide de l'événement de défilement JavaScript, des transformations CSS et des sprites CSS. Apple a placé cinquante articles différents en utilisant : nième enfant et sprites, qui ressemble à ceci:
.article de pack: nième enfant (49) top: 52.5px; à gauche: 199px; largeur: 82px; hauteur: 69.5px; position d'arrière-plan: -199px -52.5px;
La partie la plus intéressante de cette technique, cependant, est l’animation JavaScript avec défilement. Le code JavaScript d'origine a été réduit au minimum, mais la configuration de base parcourt tous les éléments du pack, recueille leur position par rapport au centre des éléments du pack et les déplace plus loin dans cette direction. Nous ne couvrirons pas tous les calculs dans cet article; au lieu de cela, nous allons nous concentrer sur un moyen d'explorer le sujet.
http://codepen.io/jcutrell/full/krIAp
Ce CodePen montre une approximation grossière de la technique utilisée par Apple. Ajuster différentes parties de ce JavaScript vous donnera des résultats différents et vous aidera à explorer la technique de manière plus approfondie.
Voici un défi pour vous: effacer les blocs d'éléments, comme dans la technique d'Apple.
Les animations en nuage utilisent une technique simple de défilement de parallaxe, ainsi qu'une animation CSS infinie. Nous ne couvrirons pas la technique de parallaxe (vous pouvez voir beaucoup de techniques de parallaxe couvertes ici sur Tuts +), mais regardons l'animation infinie que ces nuages utilisent.
Directement à partir du CSS d'Apple:
.nuages position: absolue; gauche: 0; fond: 0 0 répétition x; taille du fond: 100% 100%; .basecamp-clouds, .ascent-clouds index-z: 2; à gauche: -788px; .basecamp-clouds top: -500px; largeur: 2600px; hauteur: 2413px; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png); / * max visible screen * 2 = 5200, à ne pas confondre avec @ 2x actif. * / .centcent-clouds-1 .tile top: 50px; largeur: 5200px; hauteur: 2000px; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); .ascent-clouds-2 top: 600px; largeur: 2600px; hauteur: 1846px; en bas: 0; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); @keyframes cloudAnim from transform: translateX () translateZ () à transform: translateX (-50%) translateZ () .ascent-clouds-1.visible .tile -webkit-animation: cloudAnim 80s linear infini; -moz-animation: cloudAnim 80s linéaire infini; animation: cloudAnim 80s linear infinite;
Nous pouvons immédiatement voir que l’animation en nuage est simple - en utilisant transformer: translateX. Ce qui rend cette technique si puissante, cependant, est la longueur et la clarté du fichier PNG utilisé. Le grand nuage PNG effectue une boucle infinie pendant quatre-vingts secondes, ce qui est suffisamment long pour que le motif de répétition du PNG soit oublié. Bien que ce ne soit pas trop difficile à réaliser, c’est certainement une utilisation efficace des animations CSS.
Apple est peut-être sur le terrain controversé avec les prédicateurs de "meilleure pratique" de base du développement Web, mais tous les professionnels de la conception Web doivent prendre des décisions. Vous devriez toujours considérer les valeurs d'un compromis; que vous mettiez ou non en place une fonctionnalité donnée ne devrait pas être dicté uniquement par les meilleures pratiques, ni par les seules contraintes technologiques, mais plutôt par les besoins et les désirs de ceux qui visionneront ce que vous créez. Ne permettez pas aux règles de faire quelque chose d’extraordinaire, mais tenez compte des compromis..
