Share
Ce que vous allez créerAujourd'hui, nous allons découvrir une technique vraiment géniale que vous pouvez utiliser pour créer un effet qui ressemble un peu au défilement de la parallaxe, mais qui n'a pas besoin de JavaScript. cela peut être réalisé très simplement par CSS pur.
Commencez par consulter la démo en direct pour voir ce que vous allez apprendre (vous devez visualiser sur un ordinateur de bureau / un ordinateur portable pour voir l'effet)..
Cette technique pourrait être utilisée pour créer de superbes pages de description de produits, ou même quelque chose qui ressemble à une présentation Powerpoint / Keynote, et constituerait un excellent potentiel pour illustrer une histoire en ligne..
Voici comment vous le faites.
La clé de cette technique le CSS attachement de fond: fixe;, disponible pour nous depuis CSS 2.1. Toute image d'arrière-plan à laquelle ce style est appliqué restera dans une position fixe par rapport à la fenêtre (et non à l'élément auquel elle est appliquée). Nous allons l'utiliser pour garder nos illustrations en place pendant que notre contenu défile indépendamment à côté.
Il y a quelques points à prendre en compte avec cette propriété CSS: comme les images d'arrière-plan sont fixes par rapport à la fenêtre, leur position ne sera pas affectée par des éléments tels que les marges, comme le ferait une image d'arrière-plan classique..
Vous devez également savoir que bien que la propriété fonctionne à merveille sur tous les navigateurs de bureau, elle ne fonctionne pas actuellement sur Chrome mobile et peut être un peu saccadée sur les autres navigateurs de mobile. Ainsi, même si vos visiteurs verront toujours bien vos images, l'effet de défilement lui-même est mieux visualisé sur les plates-formes de bureau..
Les étapes de base pour réaliser ce que vous voyez dans la démo sont les suivantes:
Accentsconagua
div dans notre cas) avoir un rembourrage d’un côté d’environ 50% de la largeur, ce qui permet de déplacer le contenu de l’autre côté.attachement de fond: fixe; et regarder la magie de défilement!Voyons comment tout cela se passe étape par étape. Vous voudrez récupérer les fichiers sources pour ce tutoriel afin de disposer des images requises.
Commencez par créer un dossier de projet et ajouter un index.html y déposer, ainsi qu’un css dossier avec un fichier nommé style.css ajouté à cela. Copiez et collez les quatre images du zip du fichier source que vous avez téléchargé dans un dossier nommé images.
Ajouter ce code HTML à index.html:
Une démonstration visuelle de l'attachement à l'arrière-plan: corrigée; Faites défiler et regardez ce qui se passe
Alice commençait à en avoir très marre de s'asseoir près de sa sœur à la banque et de ne rien avoir à faire: une ou deux fois, elle avait jeté un coup d'œil dans le livre que sa sœur lisait, mais il n'y avait pas d'images ni de conversations dedans, 'et quoi est l'utilisation d'un livre, pensa Alice, sans images ni conversation?
Alors elle réfléchissait (de son mieux, car la chaude journée la rendait somnolente et stupide), si le plaisir de faire une guirlande valait la peine de se lever et de cueillir les pâquerettes, quand soudain un lapin blanc aux yeux roses a couru près d'elle.
Il n'y avait rien de très remarquable à cela. Alice ne pensait pas trop que le lapin se dise: 'Oh mon Dieu! Oh cher! Je serai en retard! (quand elle réfléchit après, elle se dit qu'elle aurait dû se poser des questions, mais à ce moment-là, cela semblait tout à fait naturel); mais quand le lapin prit une montre dans la poche de son gilet et le regarda, puis se dépêcha de partir, Alice se mit sur ses pieds, car il lui sembla qu'elle n'avait jamais vu de lapin avec un gilet. poche, ou une montre à sortir, et brûlante de curiosité, elle courut après le champ et heureusement était juste à temps de la voir sauter dans un grand lapin sous la haie.
Dans un moment qui suivit, Alice suivit, ne voyant jamais comment elle pouvait sortir de nouveau..
Le terrier de lapin continua comme un tunnel, puis plongea soudainement, si soudain qu'Alice n'eut pas le temps de réfléchir avant de s'arrêter avant de se retrouver en train de sombrer dans un puits très profond..
Soit le puits était très profond, soit elle tombait très lentement, car elle avait tout le temps nécessaire pour regarder autour d'elle et se demander ce qui allait se passer ensuite. D'abord, elle essaya de baisser les yeux et de préciser ce à quoi elle voulait en venir, mais il faisait trop sombre pour voir quoi que ce soit; puis elle regarda les parois du puits et remarqua qu'elles étaient remplies d'armoires et d'étagères à livres; Elle voyait ici et là des cartes et des images accrochées à des piquets. Elle passa un pot dans l'une des étagères en passant. elle était étiquetée 'ORANGE MARMALADE', mais à sa grande déception elle était vide: elle n'aimait pas laisser tomber le bocal de peur de tuer quelqu'un, alors elle réussit à le mettre dans l'un des placards lorsqu'elle tomba devant lui..
'Bien!' pensa Alice pour elle-même, 'après une telle chute, je ne penserai plus à descendre des escaliers! Comme ils ont tous le courage de me croire à la maison! Pourquoi, je n'en dirais rien, même si je tombais du haut de la maison! (Ce qui était très probablement vrai.)
Ce que nous faisons ici est de configurer notre shell HTML de base, de charger dans notre feuille de style et certaines polices de Google, puis de créer notre premier conteneur de contenu div auquel nous appliquerons cette technique..
Le conteneur div a trois classes:
.contenu - utilisé pour définir certaines propriétés qui seront communes à tous les conteneurs de contenu..droite - indique que ce conteneur doit avoir un contenu aligné à droite (nous travaillerons également avec un conteneur aligné à gauche ultérieurement).illustration_01 - utilisé pour définir l'image de fond et la couleur spécifiques de ce conteneurNous sommes maintenant prêts pour un peu de CSS. Commencez par ajouter des codes de base de normalisation et de formatage à votre style.css fichier:
* box-sizing: border-box; html font-size: 1em; famille de polices: 'Alike'; couleur de fond: # 262626; couleur: # d9d9d9; body margin: 0; img max-width: 100%; hauteur: auto; h1, h2, h3, h4, h5, h6 font-family: 'Roboto'; hauteur de ligne: 1.313em; h1 font-size: 3em; marge: 0,563 m 0; h2 font-size: 2.25em; marge: 0,625 em 0; h3 font-size: 1.5em; marge: 1.313em 0; h4 font-size: 1.313em; marge: 1.313em 0; h5 font-size: 1.125em; marge: 1.313em 0; h6 font-size: 1em; marge: 0,75 m 0;
Maintenant pour le .contenu classe. Ajoutez ceci au bas de votre feuille de style:
.content taille de la police: 1.875rem; couleur: # 262626; taille du fond: 49% auto; attachement de fond: fixe; répétition de fond: non répétée;
Cette classe est l'endroit où la majeure partie de la magie se produit. Pour le texte, nous définissons notre taille et notre couleur de police. Pour le fond, vous verrez que nous commençons par définir taille de fond à 49% auto.
Cela signifie que l'image d'arrière-plan sera toujours étirée ou réduite pour remplir 49% de la largeur de la page et que la hauteur sera ajustée proportionnellement. Nous utilisons une valeur de 49% au lieu de 50% car sinon, Firefox affiche un artefact de ligne étrange au milieu de l'écran..
Nous avons ensuite mis fond fixe qui, comme vous le savez déjà dans la description ci-dessus, fait que l'image d'arrière-plan reste inchangée lorsque nous faisons défiler l'écran, et que son positionnement est relatif à la fenêtre plutôt qu'au conteneur auquel elle est appliquée.
Enfin nous avons mis répétition de fond: non répétée; pour que notre image apparaisse une seule fois sur la page.
Ajouter ensuite le .droite classe à votre feuille de style:
.droit padding: 1.618em 6.472em 3.236em 50%; position de fond: 0 50%;
Cette dernière classe place le contenu du texte sur une moitié de l'écran et l'image d'arrière-plan sur l'autre.
le position de fond paramètre indique à l'image d'arrière-plan de se positionner à zéro pixel depuis le côté gauche de la fenêtre et de s'aligner à mi-hauteur depuis le haut de la fenêtre.
Enfin, ajoutez le .illustration_01 classe:
.illustration_01 background-color: # 00c17b; background-image: url ("… /images/minipadwhite.png"); Ceci définit l'image de fond et la couleur que nous voulons pour ce conteneur de contenu..
Consultez votre site et vous devriez maintenant voir ceci:
Lorsque vous faites défiler l'écran vers le bas, vous devriez voir le contenu glisser pendant que l'image reste exactement à l'endroit où elle se trouve..
Ajoutons un autre conteneur de contenu, celui-ci avec un contenu aligné à gauche.
Ajoutez ce contenu HTML conteneur sous votre dernière div:
Effet de défilement d'arrière-plan fixe
Bas, bas, bas. La chute ne finirait-elle jamais! 'Je me demande combien de kilomètres je suis tombé à ce moment-là?' elle a dit à haute voix. 'Je dois être quelque part près du centre de la terre. Laissez-moi voir: cela ferait quatre mille milles, je pense… '(car, voyez-vous, Alice avait appris plusieurs choses de ce genre lors de ses cours dans la salle de classe, et bien que ce ne soit pas une très bonne occasion de se montrer sa connaissance, comme il n'y avait personne pour l'écouter, c'était quand même une bonne pratique de le répéter) '- Oui, c'est à peu près la bonne distance - mais je me demande alors quelle latitude ou longitude je dois avoir?' (Alice n'avait aucune idée de ce qu'était la latitude, ni de la longitude non plus, mais pensait que c'était un beau mot à dire.)
À présent, elle a recommencé. «Je me demande si je vais tomber à travers la terre! Comme c'est drôle, ça va paraître sortir parmi les gens qui marchent la tête baissée! Les antipathies, je pense-- '(elle était plutôt heureuse qu'il n'y ait personne qui écoute, cette fois-ci, car cela ne sonne pas du tout avec le mot juste)' - mais il faudra que je leur demande quel est le nom du pays est, vous savez. S'il te plaît, Ma'am, est-ce la Nouvelle-Zélande ou l'Australie? (et elle a essayé de faire la révérence en parlant - de la rêverie en tombant dans les airs! Pensez-vous pouvoir y arriver?) 'Et quelle petite fille ignorante elle me pensera de demander! Non, il ne faut jamais demander: je le verrai peut-être écrit quelque part.
Bas, bas, bas. Il n'y avait rien d'autre à faire, alors Alice se remit bientôt à parler. 'Dinah me manquera beaucoup ce soir, il faut que je réfléchisse!' (Dinah était le chat.) 'J'espère qu'ils se souviendront de sa soucoupe de lait à l'heure du thé. Dinah ma chérie! J'aimerais que tu sois ici avec moi! J'ai bien peur qu'il n'y ait pas de souris dans les airs, mais vous pourriez attraper une chauve-souris, et cela ressemble beaucoup à une souris, vous savez. Mais est-ce que les chats mangent des chauves-souris, je me le demande? Et voici qu'Alice commençait à s'endormir un peu, et continuait à se dire, rêveuse: «Est-ce que les chats mangent des chauves-souris? Les chats mangent-ils des chauves-souris? et parfois, 'Les chauves-souris mangent-elles des chats?' car, voyez-vous, comme elle ne pouvait pas répondre à l'une ou l'autre question, peu importait la façon dont elle l'exprimait. Elle sentait qu'elle s'assoupissait et qu'elle commençait à peine à rêver qu'elle marchait main dans la main avec Dinah et lui disait très sérieusement: «Maintenant, Dinah, dis-moi la vérité: as-tu déjà mangé une chauve-souris? quand soudain, coup! cogner! elle tomba sur un tas de bâtons et de feuilles sèches, et la chute était finie.
Alice n'était pas un peu blessée et elle se releva d'un instant à l'autre: elle leva les yeux, mais tout était noir au-dessus de sa tête; devant elle il y avait un autre long passage, et le lapin blanc était toujours en vue, le dépêchant. Il n'y avait pas un moment à perdre: Alice partait comme le vent et était juste à temps pour l'entendre dire, alors qu'il tournait au coin, "Oh, mes oreilles et mes moustaches, il est tard!" Elle était proche derrière elle quand elle tourna le coin, mais on ne vit plus le Lapin: elle se trouva dans un long couloir bas éclairé par une rangée de lampes suspendues au toit..
Il y avait des portes tout autour du hall, mais elles étaient toutes verrouillées; et quand Alice fut tout le long d'un côté et remontant de l'autre, essayant toutes les portes, elle marcha tristement au milieu, se demandant comment elle allait pouvoir sortir à nouveau.
Remarquez cette fois nous utilisons la classe .la gauche au lieu de .droite et nous avons augmenté le nombre d'illustrations de sorte que la classe .illustration_01 est remplacé par .illustration_02
Ajoutez les deux nouvelles classes suivantes à votre feuille de style:
.left padding: 1.618em 50% 3.236em 6.472em; position de fond: 100% 50%; .illustration_02 background-color: # e8697b; background-image: url ("… /images/minipadblack.png"); Cette fois, les 50% de remplissage sont appliqués sur le côté droit du conteneur afin que le contenu soit déplacé vers la gauche et que l’arrière-plan soit positionné horizontalement à 100%, c’est-à-dire tout le chemin à droite. Nous ajoutons également une couleur et une image différentes à l'arrière-plan de ce conteneur..
Vérifiez votre site à nouveau et commencez à faire défiler. Lorsque vous atteignez la fin du premier conteneur, vous devriez voir le second commencer à apparaître, frottant sur le dessus de votre première image et révélant progressivement votre second.
Cela améliore l’effet de cette technique s’il existe un séparateur entre les deux conteneurs, alors ajoutons que maintenant.
Entre vos deux divs de conteneur, ajoutez ce code HTML:
Une autre section commence ici
Et ajoutez la classe .separator à votre feuille de style:
.separator taille de la police: 1.875rem; rembourrage: 1.618em 0; text-align: center;
Lorsque vous actualisez votre site, vous devriez maintenant avoir un séparateur agréable entre vos conteneurs:
Vous pouvez maintenant entrer le code de vos séparateurs et conteneurs de contenu restants.
Ajoutez ce code HTML sous vos divs existants:
Une autre section commence ici
Idéal pour les présentations de produits
Soudain, elle tomba sur une petite table à trois pieds, toutes en verre solide. Il n'y avait rien dessus, à part une minuscule clé en or, et la première pensée d'Alice fut que cela pourrait appartenir à l'une des portes du hall; mais hélas! soit les serrures étaient trop grandes, soit la clé était trop petite, mais en aucun cas elle ne les ouvrirait. Cependant, la deuxième fois, elle tomba sur un rideau bas qu’elle n’avait pas remarqué auparavant, et derrière elle se trouvait une petite porte d’environ quinze pouces de hauteur: elle essayait la petite clé dorée de la serrure et, à son grand plaisir, elle lui allait!
Alice ouvrit la porte et découvrit que celle-ci menait à un petit passage, pas plus grand qu'un trou de rat: elle s'agenouilla et regarda le passage dans le plus beau jardin jamais vu. Elle avait tellement envie de sortir de cette sombre salle et de flâner parmi ces lits de fleurs aux couleurs vives et ces fontaines fraîches, mais elle ne pouvait même pas se prendre la tête par la porte; «Et même si ma tête traversait, pensa la pauvre Alice, ce ne serait d'aucune utilité sans mes épaules. Oh, comme j'aimerais pouvoir me taire comme un télescope! Je pense que je pourrais le faire, si seulement je savais comment commencer. Vous voyez, tellement de choses insolites se sont produites dernièrement, qu'Alice avait commencé à penser que très peu de choses étaient vraiment impossibles.
Attendre devant la petite porte semblait inutile, alors elle retourna à la table, espérant trouver une autre clé dessus, ou du moins un recueil de règles pour enfermer les gens comme des télescopes: cette fois, elle trouva une petite bouteille dessus ("qui n'était certainement pas là avant," dit Alice) et autour du goulot de la bouteille se trouvait une étiquette en papier, avec les mots "DRINK ME" magnifiquement imprimés en grosses lettres.
C'était très bien de dire «Bois-moi», mais la sage petite Alice n'allait pas le faire rapidement. «Non, je vais d'abord regarder, dit-elle, pour voir si c'est marqué« poison »ou non»; car elle avait lu plusieurs belles histoires sur des enfants brûlés et dévorés par des bêtes sauvages et d’autres choses désagréables, tout cela parce qu’ils ne se souviendraient pas des règles simples que leurs amis leur avaient enseignées: comme, par exemple, un poker très chaud vous brûlera si vous le tenez trop longtemps; et que si vous coupez votre doigt très profondément avec un couteau, il saigne généralement; et elle n'avait jamais oublié que, si vous buvez beaucoup d'une bouteille marquée «poison», il est presque certain que vous ne serez pas d'accord avec vous, tôt ou tard.
Cependant, cette bouteille n'était PAS marquée «poison», alors Alice se hasarda à la goûter et la trouva très jolie (elle avait en fait une sorte de saveur mélangée de cerise acidulée, de crème anglaise, de pomme de pin, de dinde rôtie, etc.). toffee et toast beurré chaud), elle a très vite fini.
Une autre section commence ici
Technique simple utilisant Pure CSS
«Quel sentiment curieux! dit Alice. 'Je dois me fermer comme un télescope.'
Et il en fut ainsi: elle n’avait plus que dix pouces de hauteur et son visage s’illumina à la pensée qu’elle avait maintenant la taille idéale pour franchir la petite porte donnant sur ce charmant jardin. Cependant, d’abord, elle attendit quelques minutes pour voir si elle allait se rétrécir davantage: elle se sentit un peu inquiète à ce sujet; 'Car ça pourrait finir, tu sais, se dit Alice,' en sortant comme une chandelle. Je me demande comment je devrais être alors? Et elle a essayé d'imaginer à quoi ressemble la flamme d'une bougie après son extinction, car elle ne se souvenait plus d'avoir jamais vu une telle chose.
Après un moment, constatant qu'il ne se passait plus rien, elle décida d'aller dans le jardin immédiatement. mais hélas pour la pauvre Alice! quand elle arriva à la porte, elle s'aperçut qu'il avait oublié la petite clé en or, et lorsqu'elle retourna à la table pour la récupérer, elle s'aperçut qu'elle ne pouvait pas l'atteindre: elle pouvait le voir très clairement à travers la vitre et elle essaya. elle préférait grimper sur l’un des pieds de la table, mais elle était trop glissante; et quand elle se fatigua d'essayer, la pauvre petite s'assit et pleura.
«Viens, il ne sert à rien de pleurer comme ça! se dit Alice, plutôt brusquement; 'Je vous conseille de laisser cette minute!' Elle se donnait généralement de très bons conseils (même si elle ne les suivait que très rarement), et parfois elle se grondait de manière si sévère qu'elle lui causait des larmes; et une fois qu’elle s’est souvenue d’avoir tenté de se tordre les oreilles pour s’être trompée dans un jeu de croquet qu’elle jouait contre elle-même, car cet enfant curieux aimait beaucoup se faire passer pour deux. «Mais ça ne sert à rien, pensa la pauvre Alice, de prétendre être deux personnes! Pourquoi, il ne reste presque plus assez de moi pour devenir UNE personne respectable!Bientôt, son œil tomba sur une petite boîte en verre qui se trouvait sous la table: elle l'ouvrit et y trouva un très petit gâteau sur lequel les mots «EAT ME» étaient magnifiquement marqués avec des raisins de Corinthe. «Eh bien, je vais le manger, dit Alice, et si ça me fait grossir, je peux atteindre la clé; et si cela me fait devenir plus petit, je peux me glisser sous la porte; alors de toute façon je vais aller dans le jardin et je me fiche de savoir ce qui se passe!
Elle mangea un peu et se dit avec inquiétude: «De quel côté? Quel chemin? ', Tenant sa main sur le dessus de sa tête pour sentir dans quel sens il grandissait, et elle fut assez surprise de constater qu'elle restait à la même taille: bien sûr, cela se produit généralement lorsque l'on mange un gâteau, mais Alice ne s’attendait à rien d’autre que des choses insolites, qu’il semblait assez ennuyeux et stupide que la vie continue de la même manière.
Alors elle se mit au travail et finit très vite de finir le gâteau.
LA FIN
Et ce CSS à votre feuille de style:
.illustration_03 background-color: # 14b29a; background-image: url ("… /images/miniwhite.png"); .illustration_04 background-color: # 80b9f1; background-image: url ("… /images/miniblack.png"); Vous devriez maintenant avoir l’ensemble de votre affichage en place avec un troisième et un quatrième conteneur de contenu affichant:
Ainsi qu’un dernier séparateur pour couronner le tout:
La dernière chose à faire est de prendre en compte les différentes tailles d'écran. Lorsque la fenêtre devient trop petite pour accueillir confortablement nos images d'arrière-plan, nous souhaitons les basculer vers des images en ligne..
En haut de chacun de vos conteneurs de contenu, à l'intérieur des divs d'ouverture et au-dessus du texte, ajoutez une figure avec la classe. .petit écran et à l'intérieur de cet endroit un img tag pour charger chacune des images actuellement utilisées dans les arrière-plans:
Premier conteneur de contenu:
Deuxième conteneur de contenu:
Troisième conteneur de contenu:
Quatrième conteneur de contenu:
Nous allons utiliser le .petit écran classe pour masquer cette image en ligne par défaut, mais pour l'afficher lorsque nous arrivons à une taille d'écran plus petite.
Ajoutez la classe suivante à votre feuille de style:
.smallscreen display: none;
Nous allons maintenant ajouter les requêtes multimédia qui détermineront si les images d'arrière-plan ou intégrées sont affichées. Ils réduiront également progressivement la taille du texte et l'espacement dans la mise en page afin que nous puissions adapter les éléments à toutes les largeurs de fenêtres..
Ajoutez ces requêtes multimédia à votre feuille de style:
@media (largeur maximale: 106.25rem) .wrapper, .separator taille de la police: 1.6875rem; @media (largeur maximale: 93.75rem) .content, .separator font-size: 1.5rem; .right padding: 1.618em 4.854em 1.618em 50%; .left padding: 1.618em 50% 1.618em 4.854em; @media (largeur maximale: 81.25rem) .content, .separator font-size: 1.3125rem; .right padding: 1.618em 3.236em 1.618em 45%; taille du fond: 44% auto; position de base: 0 55%; .left padding: 1.618em 45% 1.618em 3.236em; taille du fond: 44% auto; position de base: 100% 55%; @media (largeur maximale: 68.75rem) .content, .separator taille de la police: 1.125rem; .right padding: 1.618em 3.236em 1.618em 40%; taille du fond: 39% auto; position de fond: 0 60%; .left padding: 1.618em 40% 1.618em 3.236em; taille du fond: 39% auto; position de base: 100% 60%; @media (largeur maximale: 50rem) .smallscreen display: block; .right padding: 1.618em 3.236em; image de fond: aucune; .left padding: 1.618em 3.236em; image de fond: aucune; @media (largeur maximale: 31.25rem) .right padding: 1.618em 1.618em; .left padding: 1.618em 1.618em; @media (largeur maximale: 12rem) html largeur minimale: 12rem;
Les quatre premières requêtes multimédia réduisent simplement la taille de la police du texte et le remplissage à l'intérieur des conteneurs de contenu de manière progressive pour s'adapter à la largeur d'écran disponible..
Dans la cinquième interrogation médiatique de largeur maxi: 50rem nous incluons le code qui rend le .petit écran class visible, supprime notre remplissage latéral à 50% des conteneurs de contenu et masque les images d'arrière-plan. Lorsque cette requête de média démarre, nous ne verrons plus les grandes images d'arrière-plan fixes, mais plutôt des images standard en haut de chaque conteneur de contenu..
Maintenant, lorsque vous actualisez votre site, vous devriez le voir se réduire progressivement avec toutes les largeurs de fenêtres, jusqu'à ce que vous voyiez ceci à sa plus petite taille:
Même après tant d'années de travail avec CSS, je suis toujours surpris par le nombre toujours croissant de choses impressionnantes que vous pouvez faire avec. Et plus la technique est simple, plus impressionnant.
Essayez ce petit bijou, il est si rapide et facile de devenir accro!
