Share
Dans ce didacticiel, le deuxième d'une série en deux parties, nous allons reproduire la géniale illustration vectorielle de «Comment créer un fond d'écran long pour un site Web» de Yulia Sokolova et la coder dans un site en direct.
Nous allons mettre les choses en place afin que, lorsque vous faites défiler l'écran en haut de la page, vous voyiez un «Alien Lander» arriver à destination. Au début, nous verrons un OVNI planant dans l'espace.
En descendant, l'OVNI atteindra l'atmosphère et deviendra une "comète extraterrestre".
Et puis finalement, quand il passera à travers la limite des arbres, il deviendra un "petit homme vert" qui se posera à terre..
Regardez la démo en direct!
Dans ce projet, nous utiliserons des images SVG afin de pouvoir tirer parti de leur capacité de redimensionnement fluide et de la taille réduite de leur fichier..
Avant de commencer à coder, vous aurez besoin de l'image créée dans la première partie de cette série de didacticiels, séparée en quatre fichiers SVG:
Si vous le souhaitez, vous pouvez exporter vous-même ces images SVG à partir de votre application graphique préférée. Vous pouvez également trouver les quatre images prêtes à être utilisées dans les fichiers sources sur GitHub..
Créez un nouveau dossier pour votre projet et créez un sous-dossier nommé "css" et un autre "images"..
Copiez et collez vos quatre images SVG dans le nouveau dossier «images»..
Dans le dossier «css», créez un fichier nommé «style.css»..
Dans le dossier principal, créez un nouveau fichier nommé "index.html"..
Votre structure de dossier devrait maintenant ressembler à ceci:
Dans le fichier «index.html», ajoutez le code HTML de base suivant pour obtenir l'essentiel et charger la feuille de style:
Défilement d'Alien Lander
Cela peut sembler contre-intuitif, mais nous allons en fait ajouter notre image de fond en utilisant un img élément plutôt que comme une image de fond CSS. Nous faisons cela parce que:
Maintenant que vous comprenez pourquoi nous adoptons cette approche, commençons à coder!
Dans votre fichier «index.html», ajoutez ce code:
Si vous prévisualisez votre fichier dans un navigateur, vous devriez voir l'image remplir la fenêtre. Cependant, il y aura toujours un espace blanc sur les bords.
En effet, les navigateurs incluent une petite marge sur le corps élément par défaut. Pour remplacer ceci, dans le fichier “style.css” ajoutez ce CSS:
corps marge: 0;
Il y a aussi un autre navigateur par défaut que nous devrons remplacer, celui du afficher propriété sur les images étant définie sur en ligne. Si vous faites défiler l'écran jusqu'en bas de votre page, vous remarquerez qu'il existe actuellement un petit espace blanc sous l'image en raison de ce paramètre par défaut. Changez-le en ajoutant:
img display: block;
Vous devriez maintenant voir l'image «background.svg» remplir la fenêtre au ras des bords, et si vous redimensionnez la largeur de la fenêtre, l'image SVG sera redimensionnée pour s'adapter à la nouvelle taille. La hauteur de la présentation du site changera également pour conserver le rapport de format correct pour l'image «background.svg»..
Pour que l’image que nous venons de placer se comporte comme une image d’arrière-plan, nous devons trouver un moyen de placer le reste de notre contenu au premier plan. Nous pouvons y arriver en ajoutant un div élément qui agira en tant que conteneur, puis en modifiant sa position et z-index Propriétés.
Dans votre fichier “index.html”, après l'image que vous venez d'ajouter, insérez cette nouvelle div:
Et dans “style.css”, ajoutez ce CSS:
.au premier plan position: absolue; en haut: 0; gauche: 0; hauteur: 100%; largeur: 100%; z-index: 1;
Passons en revue ce que nous faisons avec le code ci-dessus.
Tout d'abord, en mettant position à absolu nous retirons l'élément du flux de documents normal (qui le placerait sinon sous l'image de fond), ce qui nous permet de le placer où bon nous semble.
Ensuite, nous définissons le Haut et la gauche propriétés à 0 qui déplace l'élément vers le haut de la fenêtre et l'aligne horizontalement avec notre image d'arrière-plan.
Après cela, nous donnons à l'élément un la taille et largeur de 100%. Cela permet de s’assurer que l’élément n’est pas réduit à néant, en masquant le contenu..
Enfin, nous définissons la z-index à 1 ce qui amène l’élément vers l’avant, de sorte qu’il se place devant notre image d’arrière-plan (qui est par défaut). z-index de auto). Cela évite que le contenu de l'élément ne soit masqué par l'image d'arrière-plan..
Notre conteneur de premier plan est maintenant prêt à recevoir du contenu..
La façon dont nous allons faire atterrir notre OVNI sur le sol au fond est de créer trois panneaux, un pour chaque étape. Nous ajouterons ensuite l'image SVG correspondante pour chaque panneau, telle que le fichier «ufo.svg» par exemple, en tant qu'image d'arrière-plan à position fixe. L'image restera alors en place pendant le défilement pendant que l'arrière-plan se déplace derrière elle, créant ainsi l'illusion d'une descente.
Dans votre "premier plan" div, ajouter cette nouvelle div:
Maintenant, ajoutez le code suivant à votre CSS:
.ufo_section height: 100%; fond: url (… /images/ufo.svg); répétition de fond: non répétée; position de fond: centre; taille du fond: 40% auto; attachement de fond: fixe;
Dans la première ligne de notre code ci-dessus, nous donnons à l'élément un la taille de 100% pour vous assurer que son contenu sera visible. Ensuite, nous ajoutons notre image «ufo.svg» comme arrière-plan. Nous mettons Répétition du fond à non répété comme nous voulons seulement qu'un OVNI apparaisse, et nous faisons alors position de fond place l'image au centre horizontalement et verticalement.
Avec notre taille de fond propriété, nous définissons la largeur sous forme de pourcentage et nous permettons à la hauteur d'être calculée automatiquement. Cette largeur est tirée de l'image vectorielle d'origine dans laquelle la largeur de l'OVNI est d'environ 40% de la largeur de l'illustration globale..
En définissant la largeur de notre image «ufo.svg» sous forme de pourcentage, lorsque la fenêtre est redimensionnée et que l'image «background.svg» change avec elle, l'image UFO ajustera également sa largeur pour conserver les proportions souhaitées..
Sur la dernière ligne nous avons mis pièce jointe à fixé, ce qui signifie que l'image restera fixe à mesure que nous faisons défiler, nous donnant notre illusion de descente.
Essayez d'actualiser votre page et de faire défiler maintenant, vous devriez voir l'OVNI bouger verticalement parmi les planètes..
Lorsque vous faites défiler votre site, une fois que vous descendez suffisamment, vous remarquerez que l'OVNI disparaît. Cela se produit parce que nous faisons défiler au-delà de la hauteur de la ufo_section panneau donc à ce stade, nous ne pouvons plus voir son fond.
Nous allons empiler trois panneaux comme celui-ci les uns sur les autres, de sorte que lorsque nous passons devant un et que son arrière-plan disparaisse, l'arrière-plan du panneau suivant apparaît, créant l'effet d'une image remplacée par la suivante.
Nous allons donc maintenant répéter le processus que nous avons utilisé ci-dessus pour insérer les images «alien_comet.svg» et «alien_landing.svg»..
À votre code HTML, ajoutez ce qui suit juste après votre ufo_section div et toujours dans votre div de premier plan:
Ajoutez ensuite à votre CSS ces nouvelles classes:
.comet_section height: 100%; fond: url (… /images/alien_comet.svg); répétition de fond: non répétée; position de fond: centre; taille du fond: 15% auto; attachement de fond: fixe; .landing_section height: 100%; fond: url (… /images/alien_landing.svg); répétition de fond: non répétée; position de fond: centre; taille du fond: 15% auto; attachement de fond: fixe; position: relative;
Nous utilisons tous le même code et les mêmes techniques ici, avec seulement les noms de fichier image modifiés et la largeur sur le taille de fond propriété définie sur 15% en fonction des images plus étroites que nous venons d'ajouter.
Votre fichier “style.css” est maintenant terminé et devrait contenir le code suivant:
corps marge: 0; img display: block; .foreground position: absolute; en haut: 0; gauche: 0; hauteur: 100%; largeur: 100%; z-index: 1; .ufo_section height: 100%; fond: url (… /images/ufo.svg); répétition de fond: non répétée; position de fond: centre; taille du fond: 40% auto; attachement de fond: fixe; .comet_section height: 100%; fond: url (… /images/alien_comet.svg); répétition de fond: non répétée; position de fond: centre; taille du fond: 15% auto; attachement de fond: fixe; .landing_section height: 100%; fond: url (… /images/alien_landing.svg); répétition de fond: non répétée; position de fond: centre; taille du fond: 15% auto; attachement de fond: fixe; position: relative;
Retournez sur votre site maintenant, faites défiler l'écran vers le bas et vous devriez voir l'OVNI se transformer en comète, puis un peu plus bas dans le «petit homme vert».
En ce moment, vous remarquerez que nous avons quelques problèmes à résoudre lors du défilement, qui sont:
Comme notre image «background.svg» n’a pas une taille fixe, nous ne saurons pas quelle est la hauteur exacte en pixels de chaque panneau avant le chargement. Cependant, ce que nous pouvons décider dès le départ est la hauteur que chaque panneau doit représenter en tant que pourcentage de la hauteur de «background.svg»..
En utilisant jQuery, nous pouvons implémenter ce processus:
Pendant que nous y sommes, nous ajouterons également quelques divs vides supplémentaires pour servir d’espaceurs entre chaque panneau et définir leur hauteur à l’aide de jQuery. L'ajout d'espace entre les panneaux permettra une transition plus douce, résolvant le problème de l'affichage de l'image «alien_comet.svg» avant que l'image «ufo.svg» ne disparaisse.
Mettez à jour votre code HTML afin qu'il y ait un div spacer entre chaque div existante, comme ceci:
Et dans la section head, chargez jQuery en ajoutant ce qui suit:
Avant la fermeture
Accentsconagua
Nous voulons que cette fonction soit activée lors du premier chargement de la page, et chaque fois qu'elle est redimensionnée. Pour ce faire, ajoutez également le code suivant après votre ouverture. scénario étiquette:
$ (document) .ready (function () set_section_heights ();); $ (fenêtre) .resize (function () set_section_heights (););
À l'intérieur de set_section_heights () Pour ce faire, la première chose à faire est de déterminer la hauteur actuelle de l’image d’arrière-plan et de l’enregistrer en tant que variable. Pour ce faire, ajoutez ce code:
var_doc_height = $ (". background"). height ();Avec la première partie du code, $ (". background"), jQuery trouve l'élément avec le nom de la classe Contexte. Le annexe .la taille() fonction obtient alors la hauteur en pixels de cet élément sous forme d'entier. Cela nous indique la hauteur de notre image «background.svg» et enregistre ce nombre dans la variable. doc_height.
Nous allons maintenant configurer un objet dans lequel nous pouvons définir:
Nous allons parcourir cet objet et utiliser les valeurs qu'il contient pour redimensionner les sections de notre premier plan.
Commençons par une seule entrée dans l'objet:
var section_heights = "ufo_section": 0.25
Ici, nous avons défini l’index (la valeur à gauche) sur ufo_section pour correspondre au nom de classe de notre première section.
Ensuite, nous avons défini la valeur sur 0,25 ce qui est une autre façon d’exprimer 25%. Dans un instant, nous allons multiplier cette valeur par le nombre stocké dans le doc_height variable, c’est-à-dire la hauteur de l’image d’arrière-plan. En faisant cela, nous dirons que nous voulons la ufo_section panel à 25% de la hauteur actuelle de «background.svg».
Par exemple, si la hauteur de «background.svg» était 1000px la hauteur de la section ufo_servait sortir comme 250px:
1000 * 0,25 = 250
Maintenant que nous avons examiné le fonctionnement de cet objet, ajoutons quelques entrées pour les autres éléments sur lesquels nous voulons définir des hauteurs. Mettez à jour votre objet comme suit:
var section_heights = "ufo_section": 0.25, "spacer_one": 0.03, "comet_section": 0.36, "spacer_two": 0.06, "landing_section": 0.298
Remarque: J'ai sélectionné ces valeurs sur la base d'essais et d'erreurs, alors n'hésitez pas à jouer avec les chiffres après avoir terminé ce tutoriel pour voir les effets.
section_heights ObjetAvec notre objet terminé, nous sommes prêts à commencer à itérer et à redimensionner nos panneaux..
D'abord nous aurons besoin d'un $ .each () fonction pour itérer le section_heights object et extrait l'index et la valeur (représentant respectivement le nom de la classe et la hauteur) de chaque entrée qu'il contient.
Ajoutez ce code après votre section_heights objet:
$ .each (section_heights, fonction (index, valeur) console.log ("Index:" + index, "| Valeur:" + valeur););Pour vous permettre de voir comment la fonction d’itération ci-dessus génère le indice et valeur les variables, nous utilisons console.log () écrire un petit message sur la console pour chaque entrée du section_heights objet.
Rechargez votre site, ouvrez Chrome Web Developer Tools (ou son équivalent dans votre navigateur préféré) et consultez la console. Vous devriez voir ceci:
À gauche de chaque message après Indice: tu peux voir le indice pour chaque entrée, c'est-à-dire les noms de classe des éléments à redimensionner.
A droite de chaque message après Valeur: tu peux voir le valeur pour chaque entrée, c’est-à-dire la fraction de la hauteur totale de chaque panneau doit être.
Maintenant, au lieu de simplement enregistrer ces données sur la console, utilisons-les pour définir la taille de nos sections de premier plan. Supprimer le console.log () ligne et le remplacer par ceci:
$ ("." + index) .height (Math.floor (value * doc_height));Décomposons ce que cette ligne fait.
D'abord nous avons $ ("." + index). Nous l'utilisons pour trouver l'élément que nous voulons redimensionner. Par exemple, avec la première entrée de notre objet, le indice est défini sur ufo_section. Dans ce cas, la première partie de notre code sera évaluée pour devenir $. (".ufo_section"). Avec ce code, jQuery est invité à rechercher l'élément avec la classe dans la page. ufo_section.
Ensuite nous ajoutons .la taille(… ). Avec ce code, jQuery définira la hauteur de l'élément trouvé, en le changeant pour la valeur transmise entre les crochets..
Entre les parenthèses, vous verrez valeur * doc_height. C'est ici que nous effectuons la multiplication mentionnée précédemment pour calculer la hauteur de panneau souhaitée. Par exemple, la première entrée de notre objet a la valeur 0,25. Ce nombre sera multiplié par le nombre enregistré dans le répertoire. doc_height variable.
Autour de la multiplication de ces deux variables, vous verrez Math.floor (). Ceci arrondit le résultat de notre multiplication au nombre entier le plus proche.
Donc, mettre tout cela ensemble, si la valeur de doc_height est 5197, la première entrée dans notre objet multiplierait par 0,25 nous donnant un résultat de 1299.25.
Math.floor () arrondira ce montant à 1299. Cela signifie que notre code serait maintenant évalué pour devenir: $. (".ufo_section") .height (1299);
Avec cette ligne, jQuery trouvera l'élément avec la classe ufo_section et mettre sa hauteur à 1299px.
Cela encapsule votre HTML et JavaScript. Votre fichier “index.html” complété doit maintenant contenir le code suivant:
Défilement d'Alien Lander 