Le projet d’aujourd’hui est ridicule et amusant, mais il a un but réel et un but éducatif. Dans un article récent, j'ai exploré cinq manières d'utiliser plusieurs images de fond CSS pour créer de superbes effets de survol. J'avais une idée dans cet article à laquelle je n'avais pas pensé simplement parce que sa complexité méritait une explication autonome.
Cet article est alors une extension de cette discussion précédente. Nous allons utiliser plusieurs arrière-plans pour créer un effet cinématique intéressant dans lequel une personne parcourt une carte pendant que le point d'observation effectue un zoom arrière. La meilleure façon de le montrer est d’utiliser le récit bien connu de Frodon traversant la Terre du Milieu pour arriver au mont Doom, dans le Mordor. Commençons.
Le concept
L'idée de base de cet effet de survol est simple. Il y a un conteneur avec deux origines différentes. Celui du bas de la pile remplit tout le conteneur, celui du haut est beaucoup plus petit. En survol, l'image à fond perdu (qui s'étend en réalité bien au-delà du conteneur) se déplace vers la gauche, tandis que la petite image se déplace vers la droite. Il s’agit d’une technique d’animation super fondamentale qui donne l’impression que le sujet se déplace dans la scène.
Pour rendre les choses encore plus intéressantes, je veux que la scène commence avec une vue agrandie du sujet, puis effectue un panoramique pour afficher le paysage dans son ensemble.
Pourquoi la Terre du Milieu?
L’utilisation la plus pratique que j’ai pu imaginer pour cette idée était de montrer une personne se déplaçant sur une carte. C'est un cas d'utilisation assez typique. Que votre entreprise change de lieu ou que votre famille parte en vacances, il vous sera très facile de trouver une excuse décente pour mettre en œuvre une animation cartographique amusante.
"N'hésitez pas à vous moquer de moi dans les commentaires, après avoir vu la démo, ma femme m'assure que je le mérite."Maintenant, étant donné que je suis un nerd énorme qui est complètement excité par le prochain film, "The Hobbit". mon esprit a immédiatement sauté sur une scène de la Terre du milieu. En conséquence, le projet d’aujourd’hui a évolué pour donner un coup de chapeau au dernier voyage cinématographique en hobbit. N'hésitez pas à vous moquer de moi dans les commentaires, après avoir vu la démo, ma femme m'assure que je le mérite.
Pourquoi plusieurs images de fond?
Pourrions-nous faire la même chose avec des images insérées dans notre code HTML? Oui. Cela nous donnerait-il encore plus de liberté pour manipuler les images? Tu paries.
Alors pourquoi n'utilisons-nous pas HTML? Parce que l'objectif de l'exercice est d'apprendre à manipuler plusieurs images d'arrière-plan en CSS, c'est pourquoi! Un jour, vous serez obligé de coder quelque chose avec plusieurs images d’arrière-plan et, heureusement, vous saurez tout sur elles.
Voyez-le en action
Avant de commencer à construire, voyons ce que nous essayons de créer. Cliquez ci-dessous pour consulter le produit fini.
Démo: Cliquez ici pour lancer la version en direct.
Mise en route: le HTML
Cette expérience utilise tous les CSS avec un minimum de balisage. Tout ce dont vous avez besoin pour l'ensemble du projet est une seule div vide. C'est tout!
De toute évidence, vous pouvez ajouter du texte et d'autres objets pour rendre l'élément plus complexe, mais pour les besoins actuels, c'est tout le code HTML dont nous avons besoin.
Dimensionnez la div
Avant de passer à autre chose, nous devons choisir une taille pour notre div. Cela va influencer tout le reste de nos décisions. J'ai choisi un rectangle de bonne taille: 500 pixels de large par 375 pixels de haut. Je l'ai ensuite centré sur la page et je l'ai descendu du haut de la page par 20 pixels.
Préparez vos images
Pour suivre, vous aurez besoin de deux images: une carte et un sujet. Vous pouvez utiliser ce que vous voulez, mais j'ai choisi les deux images ci-dessous pour des raisons déjà expliquées:
Ma carte de la Terre du Milieu est assez grande: 1000 pixels par 750 pixels et mon image de Frodo est assez petite: 100 pixels par 100 pixels.
Planifier l'animation
Maintenant que nous avons nos images, nous devons réfléchir à ce que nous essayons de faire. De toute évidence, Frodon commence son périple dans The Shire. Nous devrons donc zoomer sur le quadrant nord-ouest de la carte et positionner la petite image quelque part dans cette zone.
Il se rend ensuite au Mordor, qui se trouve dans le quadrant sud-est. Nous voulons donc que Frodon s'abaisse et se dirige vers la droite en diagonale. Au début de l'animation, nous voulons zoomer sur The Shire, mais à la fin de l'animation, nous voulons voir l'ensemble de la Terre du Milieu. Voici les deux états pour notre taille de carte:
- Taille de la carte de départ: 1 000 x 750 pixels (taille réelle)
- Taille de la carte de fin: 500 x 375 pixels (taille div)
Frodon devra également changer de taille car nous effectuons un zoom arrière. Étant donné que les chiffres ci-dessus ont permis de réduire de moitié la taille de l'image, nous allons suivre:
- Taille Frodo de départ: 100 x 100 pixels (taille réelle)
- Fin Frodo Taille: 50 par 50 pixels (demi-taille)
Nous aurons également besoin de positionner les images, mais c'est plus facile à faire au fur et à mesure que nous les insérons, passons à cette étape.
Insérer les images
Il est maintenant temps de jeter les images dans notre div. L'avantage d'utiliser plusieurs arrière-plans est que vous n'avez pas besoin de préfixes de fournisseurs loufoques, vous n'avez même pas vraiment besoin d'apprendre la nouvelle syntaxe, il suffit d'insérer une image comme toujours, d'insérer une virgule, puis de lancer une autre image.
Ici, j'ai ajouté quelques lignes pour plus de clarté. Ils ajoutent de l'espace supplémentaire, mais aident à garder le code lisible. Gardez à l'esprit que l'ordre d'empilement dans le code représentera l'ordre d'empilement dans la version en direct. Ici, la carte est en bas et le sujet est en haut, ce qui est exactement ce dont nous avons besoin (tout cela est dans le sélecteur #middleEarth).
Voici ce que cela nous donne:
La bonne nouvelle est que la carte est, par défaut, positionnée en haut à gauche, ce qui est exactement ce que nous voulons. La mauvaise nouvelle est que Frodon est positionné de la même façon, nous devrons donc le transférer dans The Shire pour commencer.
Pour positionner l'image Frodo, ajoutez simplement une position horizontale et verticale après le "no-repeat". bit. La meilleure façon de procéder consiste simplement à expérimenter et à voir ce qui fonctionne. Je suis venu avec 150px 150px, ce qui le met juste à côté de l'étiquette pour The Shire.
Notre configuration initiale est maintenant exactement celle que nous souhaitons.
Application de tailles d'image distinctes
Pour que l'animation fonctionne correctement, nous devons nous assurer que quelques éléments clés sont corrects. Une étape importante consiste à déclarer nos tailles d’image d’arrière-plan.
Celles-ci ne sont pas nécessaires au début, car nous utilisons simplement la taille par défaut, mais nous ne pouvons pas animer le changement sans indiquer explicitement les paramètres de démarrage et d'arrêt. Nous utilisons simplement le taille de fond propriété avec et jette une virgule pour séparer les valeurs. Tout comme pour l'insertion d'images, nous pouvons manipuler de manière unique les propriétés correspondantes de chaque image à l'aide d'une virgule.
Styles de survol
En stationnaire, Frodon doit partir vers Mordor lorsque la carte commence à effectuer un zoom arrière. Nous avons déjà compris la plupart de ce dont nous avons besoin pour faire cela. Cette fois-ci, la taille de l'arrière-plan doit être 50 x 50 x 500 et 37 x 36 (rétrécit Frodo et effectue un zoom arrière pour afficher la carte complète). De plus, nous devons déplacer Frodo jusqu’à la Terre du Milieu pour que nous puissions passer à un décalage horizontal et vertical de 400 et 240 pixels respectivement.
Cela met le bon vieux Frodon au cœur du Mordor.
Dernière étape: l'animation
Maintenant nous avons notre point de départ et notre point d’arrêt, tout est configuré, il ne reste que l’animation. Bien sûr, nous utiliserons les transitions CSS pour cela. Les animations d'images clés CSS seraient beaucoup plus amusantes et nous permettraient d'en faire beaucoup plus (comme des arrêts appropriés en cours de route), mais elles ne sont pas aussi largement supportées et nous devrons donc nous en tenir aux transitions.
En vol stationnaire, je veux que le voyage soit long et agréable, environ cinq secondes. Lorsque vous arrêtez de survoler, l'animation doit revenir à son point de départ. Cependant, je veux que ce soit beaucoup plus rapide ici, environ une seconde.
Pour ce faire, nous devons configurer deux transitions distinctes. Le premier va dans le #terre du Milieu sélecteur et est réglé à une seconde. Curieusement, cela contrôlera l’animation de la souris. La deuxième transition va à l’intérieur du #middleEarth: survol sélecteur, cela contrôle l’animation de la souris.
Voici notre CSS terminé, qui montre tout ce dont vous avez besoin pour que tout fonctionne:
Conclusion
Avec ça, nous avons tous fini! Vous devez maintenant connaître beaucoup de choses intéressantes sur l'utilisation de plusieurs arrière-plans: comment les appliquer dans le bon ordre de positionnement, les positionner indépendamment et animer la taille et la position de chaque image.
Assurez-vous de regarder de nouveau la démo pour voir le projet en action et faites-nous savoir ce que vous pensez dans la section commentaire ci-dessous.