Contexte et introduction
Si vous naviguez sur un site Web moderne sur des ordinateurs ou des téléphones mobiles, vous avez peut-être constaté que lorsque vous faites défiler le site Web vers le bas / vers le haut, il semble que tout l'écran se déplace dans le sens du défilement. Si tel est le cas en arrière-plan, les informations du premier plan changent également lorsque vous faites défiler. Cet effet peut être brièvement décrit comme le défilement parallaxe.
Défilement
Laissez-nous comprendre ce que cela signifie par défilement. Lorsque vous visualisez une page Web, l'action de navigation sur la page Web dans n'importe quelle direction (haut, bas, gauche et droite) est appelée Défilement.
Habituellement, si vous êtes un utilisateur d'ordinateur de bureau, cette action est effectuée à l'aide de la molette de défilement de la souris.
L'histoire
Regardons le mot - Scroll. Autrefois, pour envoyer un message à d'autres personnes situées à une grande distance, on utilisait des parchemins manuscrits. Ces rouleaux ressemblaient à ceux ci-dessous -
Imaginez l'action de la personne qui tient le rouleau. Pour lire le contenu dans son intégralité, la personne devrait «faire défiler» et rouler plus loin. L'utilisation de ces rouleaux était également pour maintenir un texte ou des décisions d'enregistrement. Au fil du temps, l'utilisation du rouleau a augmenté car il était préparé à partir de différents matériaux d'écriture tels que le papyrus, le parchemin et le papier.
Au fur et à mesure que les ordinateurs évoluaient, le traitement et le stockage de très gros documents, tableaux et images devinrent possibles. Parfois, les données étaient tellement telles que la taille de l'écran n'était tout simplement pas suffisante pour présenter les données à l'utilisateur. Lorsque les données à afficher étaient plus grandes que la taille de la fenêtre ou de la zone d'affichage, les données resteraient masquées. Cela nécessitait une approche d'agrandissement de la zone d'écran.
Certaines options pour réaliser l'expansion de l'écran sont énumérées ci-dessous -
- Pour augmenter la taille de l'écran
- Pour réduire la taille des données
- Pour utiliser le défilement
Ce mécanisme de défilement est plus important pour les personnes travaillant avec la conception graphique et l'édition de photos.
Origine du défilement de parallaxe
Examinons l'histoire du défilement de parallaxe. Tout d'abord, nous comprendrons ce que signifie le mot parallaxe. Le mot parallaxe vient du mot grecπαράλλαξις (parallaxe), ce qui signifie alternance.
Si nous regardons un objet sous un angle, l'objet apparaîtra d'une manière spécifique. Mais si vous déplacez le même objet de différentes positions, il y aura un mouvement apparent des objets. Ce phénomène est appelé parallaxe.
Maintenant que nous avons compris l'origine et le contexte de Parallax, comprenons l'histoire et le concept du défilement Parallax dans la conception Web.
Définition
Selon Wikipedia - Parallax scrolling est une technique d'infographie où les images d'arrière-plan passent devant la caméra plus lentement que les images de premier plan, créant une illusion de profondeur dans une scène 2D et ajoutant au sentiment d'immersion dans l'expérience virtuelle.
Le défilement parallaxe était utilisé dans les premiers jours de l'animation. De nombreux studios d'animation (comme Disney) ont utilisé des caméras multiplan pour obtenir l'effet de parallaxe.
Au fur et à mesure que les technologies d'infographie évoluaient avec les frameworks de pointe comme JavaScript, les concepteurs et développeurs Web peuvent désormais créer des sites avec une expérience riche. Bien que le défilement de parallaxe ait commencé avec quelques couches, il a été porté au niveau suivant avec des barres de défilement dans les ordinateurs. La technique est restée la même, mais grâce à son application pour le défilement, une expérience unique a été créée.
Exemples
Le défilement de parallaxe est largement utilisé dans les sites Web modernes. Comme le défilement parallaxe peut être mis en œuvre pour les mobiles ainsi que pour les sites de bureau en une seule fois, la popularité de ces sites a explosé ces dernières années.
Quelques exemples de sites Web qui utilisent le défilement parallaxe sont donnés ci-dessous -
Bear Grylls
Au fur et à mesure de l'animation, vous pourrez voir comment le contenu du site Web devient interactif. Au fur et à mesure que vous avancez, de plus en plus d'informations seront révélées.
Faites que votre argent compte
Pour présenter au lecteur les avantages d'une caisse populaire, ce site vous présente un scénario. Au fur et à mesure que vous avancez, les informations sont révélées d'une manière unique.
Infographie InfoQuest
Le parcours d'un employé pour trouver des informations critiques sur son lieu de travail est représenté à l'aide de l'expérience de défilement.
GitHub 404
C'est un peu différent de l'expérience de parallaxe habituelle, l'objet en haut de l'écran se déplace lorsque vous passez le pointeur de la souris dessus.
Applications du défilement parallaxe
À présent, il devrait être clair d'après la définition et l'arrière-plan que le défilement de parallaxe est utile dans une grande variété de supports numériques. Certaines des applications sont le défilement de parallaxe sont ci-dessous -
Le design du jeu
Le défilement parallaxe est largement utilisé dans la conception de jeux. Le personnage doit se déplacer par rapport à l'arrière-plan et avec le contrôle du joueur à l'aide de la souris et du clavier, toute l'expérience doit changer. La conception de jeux est une manière très primitive mais à la mode d'utiliser le défilement parallaxe.
Sites Internet
Pour rendre l'utilisateur saisi sur le site Web, une expérience dynamique et différente est importante. Comme vous l'avez peut-être remarqué à partir des exemples de sites Web mentionnés ci-dessus, le défilement de parallaxe ajoute au contenu en raison de sa représentation de manière interactive.
Ce chapitre traite des concepts de conception Web et des avantages de l'utilisation du défilement parallaxe dans la conception Web.
Contexte de conception Web
Depuis le début du 20 e siècle, les médias papier se sont lancés dans une compétition acharnée en raison des médias numériques. Les médias numériques comprennent ce que nous voyons sur Internet et donc les magazines connexes qui viennent avec.
Les newsletters que vous recevez dans le cadre des abonnements hebdomadaires / mensuels sont également incluses dans les médias numériques. Principalement, les médias numériques dépendent fortement des appareils mobiles et de bureau. Cela fait une différence lorsque vous pouvez voir le contenu sur votre mobile (ordinateur de poche) ainsi que sur vos appareils de bureau. La façon dont le contenu est affiché sur l'un ou l'autre des appareils, un style spécifique de conception du contenu est en jeu.
Ce style de conception est appelé Web Designing. Du point de vue de la conception ou du codage, lorsqu'un concepteur de page Web se propose de créer une page Web, il prend également en compte les appareils mobiles.
Selon Wikipedia, Web design englobe de nombreuses compétences et disciplines différentes dans la production et la maintenance de sites Web. L'une de ces compétences consiste à concevoir une expérience percutante pour les utilisateurs. La conception Web s'adresse à cette expérience et fournit une manière organisée d'organiser le contenu de la page et leur fournit un style différent.
La conception Web comprend - la conception d'interface, la conception graphique et l'utilisation de certaines normes pour écrire le code. Ce travail peut être effectué par une seule personne ou par une équipe de personnes.
Il existe de nombreux outils disponibles sur le marché pour faciliter ce travail, cependant, il appartient à ses compétences créatives de créer l'apparence d'une page Web.
Conception de sites Web modernes
Avec l'évolution de la technologie, il y a une explosion de connaissances. Internet est devenu une chose et il a fait monter en flèche la qualité de nos vies. À tout moment, de plus en plus d'informations sont traitées par un internaute moyen. Ces informations peuvent être sous la forme d'un site Web sur un ordinateur de bureau ou à partir d'un appareil portatif; tablette ou téléphone portable.
Bien que tant d'informations essaient d'attirer l'attention de l'utilisateur, il est évident qu'en tant que personne qui conçoit une expérience Web, there are only 3 seconds allocated to pass the message across.
Comment gérer cela? Il est plus qu'important de transmettre le message, car il est à la source de toute conception Web. Vous souhaitez créer un site Web qui communique, en même temps qu'il doit attirer et faire adhérer l'utilisateur au contenu. C'est en effet une tâche difficile.
Compte tenu de la vaste portée du travail pour un contenu Web donné, de plus en plus de personnes se lancent dans le monde de la conception Web. Un concepteur de sites Web créatif est le discours de la ville grâce à son incroyable talent de créer une bonne expérience utilisateur. Le concepteur de sites Web peut actuellement prendre un emploi dans une société de marketing / publicité ou se lancer seul dans la conception de sites Web.
Aesthetic appeal is the key for a given content on web. Cela signifie qu'un concepteur Web doit être conscient des principes et des fondements de la conception, de la couleur, de l'espacement, etc. De plus en plus d'utilisateurs peuvent voir chaque jour un contenu Web de grande qualité. Il est évident que l'on comparera la page Web ou le site Web actuel avec celui qui a été visité il y a quelques heures ou quelques minutes. La commande du contenu, associée à de bons graphiques et couleurs, a fait de nombreuses bannières / pages autonomes une chose populaire sur Internet.
Exemple
Prenons le cas d'un simple graphique. Il existe de nombreux graphiques sur Internet, appelés mèmes. Ils sont simplesGraphics Interchange Format (GIF)images avec du texte intégré à l'intérieur des graphiques. Ces mèmes font le tour d'Internet sur la base d'un événement récent dans une partie du monde. Si nous regardons cet exemple, le seul attrait qu'ils ont est le graphique et un texte pertinent ou non pertinent.
Pourtant, il a gagné tellement de popularité qui fait penser à des possibilités incroyables sur Internet.
Ainsi, pour qu'une conception Web soit efficace, tant la créativité que la méthode de communication du message jouent un rôle important.
It is important point to note that a successful web page is combination of Web Design and Web Development. Selon la tendance actuelle du marché, avec le concepteur Web, un développeur Web est un incontournable de l'équipe. Un concepteur Web cherchera toujours l'inspiration et utilisera sa créativité pour créer des graphiques et des couleurs pertinentes. Alors qu'un développeur Web utilisera ses compétences en codage pour mettre en ligne les graphiques et les jeux de couleurs sur le site Web.
Un concepteur Web doit également avoir une connaissance de l'écriture du code, afin de rendre le graphique ou le jeu de couleurs prévu utilisable par un développeur Web. Un code simple dans une application simple comme le Bloc-notes peut aider un concepteur Web à prendre le volant dans le développement Web.
Utilisation du défilement parallaxe
Parallax Scrolling s'inscrit dans les limites du travail du concepteur Web et du développeur Web. Un concepteur Web peut créer l'effet de Parallax Scrolling à l'aide d'outils tels que InVision, UXPin pour transmettre au développeur Web le comportement prévu lors du défilement. De plus, un développeur Web utilisera ses compétences pour créer l'effet de défilement de parallaxe. Cela peut être fait par différentes techniques JavaScript, CSS et jQuery. Une description détaillée de chacune de ces méthodes est fournie dans les chapitres suivants.
Conformément à la définition spécifiée dans la section précédente, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Une technique CSS simple pour créer un effet de défilement de parallaxe est présentée sur ce site Web - The Urban Walks .
Comme vous pouvez le voir dans la capture d'écran ci-dessus, le téléphone mobile au centre de l'écran changera le contenu après avoir fait défiler deux fois. Observez également sur le premier parchemin, l'arrière-plan avec le téléphone mobile changera.
Cette transition vous donne le sentiment que le téléphone est constant à sa place et que l'arrière-plan change lorsque vous faites défiler vers le bas. Cet effet est appelé effet de défilement de parallaxe. Vous savez que vous le faites défiler vers le bas car il y a un indicateur des écrans vers l'extrême droite de l'écran sous la forme de quelques points.
La première utilisation du défilement de parallaxe était dans les anciens jeux informatiques. Où une image d'arrière-plan fixe se déplacerait à une vitesse plus lente lorsque le personnage se déplaçait plus rapidement que l'arrière-plan. Quelques exemples de ces jeux - Disney's Aladdin et Disney's Lion King. Ces jeux ont été lancés en 1993 et 1994 respectivement.
S'il est vrai que cela a commencé avec les jeux, mais actuellement, de nombreux concepteurs de sites Web mettent l'accent sur l'effet de faire aimer leur site à leur public. Les avantages du défilement parallaxe s'étendent du site Web aux sites mobiles.
Ces sites Web, une fois conçus avec un défilement parallaxe pour les versions de bureau, sont ajoutés avec un code qui prend également en charge les écrans mobiles.
Avantages du défilement parallaxe sur le Web et le mobile
Dans cette section, nous discuterons des avantages de l'utilisation du défilement parallaxe sous différentes perspectives, comme indiqué ci-dessous -
Du point de vue du public
Il y a un élément amusant associé au défilement de parallaxe. Comme vous l'avez vu dans l'exemple ci-dessus, transmettre les informations de mille mots est devenu plus facile lorsque l'utilisateur fait défiler différents écrans.
Si nous considérons un utilisateur pour la première fois, il y a une curiosité associée à chaque parchemin. Par conséquent, cela enrichit non seulement l'expérience du site Web, mais augmente également la probabilité que l'utilisateur passe plus de temps lors de la première visite sur le site Web lui-même.
La proportion d'engagement de l'utilisateur augmente considérablement à mesure que l'utilisateur est intrigué par le défilement.
L'utilisateur n'a pas à entrer dans la pensée du processus de détermination de l'information, car elle est disponible d'une manière plus évidente.
Dans certains cas, vous pouvez mettre une histoire sur le produit / service que vous proposez en animant d'autres éléments à l'écran, tels que le logo ou l'icône de menu.
Du point de vue technique
Une fois que vous avez implémenté le défilement parallaxe pour une version de bureau, le même framework peut très facilement être utilisé pour le site Web ou les écrans mobiles.
Comme l'extrait de code est simple et réutilisable, si vous êtes une agence de marketing ou un fournisseur de services de site Web, cela devient sans effort lors de la collecte de nouveaux clients.
La connaissance du défilement parallaxe s'accompagne d'une plus grande expertise dans les frameworks frontaux tels que CSS, JavaScript, etc.
Pour un développeur Web, lorsqu'il s'agit de créer un effet de défilement de parallaxe, différentes techniques sont disponibles. L'une de ces techniques utiliseCascaded Styling Sheets(CSS).
CSS explique comment les éléments HTML sont affichés à l'écran. On peut créer un fichier CSS et il peut être utilisé pour le site Web complet. Il est plus simple d'ajouter un fichier CSS que d'ajouter des styles à chaque élément HTML et de les gérer dans différentes parties de la page Web.
Note- Certaines des méthodes décrites ci-dessous dans ce chapitre sont spécifiques aux ordinateurs de bureau et non aux appareils mobiles. Il sera mentionné dans les étapes lorsqu'une technique particulière ne convient pas aux appareils mobiles.
Compte tenu des décharges CSS dans tous les dessins supplémentaires dans le modèle d'objet de document (DOM), il y a une plus grande utilisation de l'accélération matérielle et un effet fluide sans alourdir le processeur.
Méthode de position absolue
Cette méthode est fréquemment utilisée pour créer un effet de parallaxe, car elle est relativement légère par rapport aux autres options disponibles. La position de l'image d'arrière-plan est maintenue fixe par rapport à d'autres contenus sur l'écran. Dans l'exemple présenté ci-dessous, vous verrez comment le faire en utilisant la magie du CSS.
Dans cette section, nous allons passer par deux méthodes pour la méthode de position absolue -
- Fond unique
- Contexte multiple
Méthode d'arrière-plan unique
Dans cette méthode, nous allons créer deux fichiers dans le même dossier. Observez les étapes ci-dessous dans le même but -
Step 1
Nous devons créer deux fichiers dans le même dossier: le premier fichier avec le balisage HTML et le second avec le code CSS.
Step 2
Maintenant, définissons notre balisage HTML. Observez le code ci-dessous -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Ouvrez le bloc-notes. Copiez et collez l'extrait de code ci-dessus.
Lorsque vous enregistrez le fichier, sous Save as type, sélectionnez All Files. Entrez un nom pour votre fichier selon vos besoins, mais il doit être suivi d'une extension -.html comme indiqué dans la capture d'écran ci-dessous.
Step 4
Une fois le fichier enregistré, créez un autre fichier dans le bloc-notes et collez le code ci-dessous -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Comme vous l'avez vu à la dernière étape, lorsque vous enregistrez le fichier, sous Save as tapez, sélectionnez All Files. Entrez un nom à votre fichier selon vos besoins et ajoutez une extension.css à lui.
Analyse du code
Comprenons quelle partie du code est responsable de l'effet de parallaxe. Le travail le plus important pour la parallaxe est effectué en utilisant des règles de perspective et de transformation. Faire référence àline 15dans l'extrait de code ci-dessus. La perspective est créée pour notreBgContainerpremière. Cela lance une plate-forme pour la règle de transformation.
dans le Parallax conteneur à partir de la ligne 40, transform La règle à la ligne 48 pousse le div BgContainer en arrière-plan en utilisant translate (-1px).
Vous pouvez modifier les valeurs des paramètres de translation et d'échelle pour modifier la profondeur de la parallaxe.
Lorsque vous ouvrez le fichier html, l'effet de parallaxe sera visible comme indiqué ci-dessous -
Note - Pour le reste du didacticiel, on supposera que le lecteur est capable de créer les fichiers HTML et CSS selon la structure de dossier fournie dans la méthode ci-dessus.
Méthode d'arrière-plan multiple
Dans cette méthode, différentes images apparaîtront au fur et à mesure que l'utilisateur fera défiler la page. Il y a une image avec des crayons, qui est utilisée dans différentes combinaisons de couleurs pour illustrer cet effet.
Observez le code suivant pour la page HTML comme indiqué ci-dessous -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Similaire à l'exemple précédent, nous utiliserons styles.cssstocké au même emplacement que ce fichier HTML. Nous avons trois div différents nommés Premier, Deuxième, Troisième et Quatrième.
Le code CSS pour le défilement de parallaxe est donné ci-dessous -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Ici, nous créons l'effet de parallaxe à partir de la ligne 7, la propriété importante ici est background-attachment:fixed.
En utilisant cette propriété, la première image avec des crayons de couleur restera toujours en haut. Au fur et à mesure que vous faites défiler vers le bas, différentes images comme décrit à partir de la ligne 28 commenceront à apparaître.
En conséquence, vous pourrez voir l'effet de parallaxe comme indiqué dans le gif ci-dessous. L'image suivante est la capture d'écran de l'exemple que nous avons considéré pour plusieurs arrière-plans.
Parallaxe CSS pur
Combinons les connaissances des deux méthodes précédentes et créons un effet avancé Pure CSS Parallax.
La différence sera la façon dont nous organisons le image élément et le z-transformpropriété. L'explication de la propriété sera fournie après le code CSS.
Créez le fichier HTML avec le code suivant en utilisant la méthode habituelle du Bloc-notes.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Pour le fichier CSS, le code est donné ci-dessous -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Analyse du code
Nous avons fixé la position de la première couche dans line 26 en utilisant position:absolutepropriété. Les positions sont également codées en dur à 0.
Dans parallax_two, qui est le calque avec en-tête, nous avons appliqué z-index: 10pour donner un effet flottant au titre. La coucheparallax_three est déplacé vers le bas en fournissant une propriété margin-top.
Ainsi, nous pouvons élever le niveau de complexité de notre effet de parallaxe.
Observez l'effet comme indiqué dans la figure ci-dessous.
Pour créer un effet de parallaxe, la méthode la plus populaire utilise JavaScript. À partir de ce chapitre, nous discuterons des concepts de JavaScript et de certaines des bibliothèques utilisées pour réaliser le défilement Parallax.
L'utilisation de JavaScript pur est logique pour maintenir les performances du site Web optimales. L'utilisation de bibliothèques présente de nombreux autres avantages du point de vue des performances. Cependant, pour mieux comprendre l'organisation du code, nous commencerons par une implémentation de parallaxe JavaScript pure. Fait amusant, parfois du JavaScript pur est également appelévanilla JavaScript.
Défilement parallaxe à l'aide de JavaScript pur
Tout d'abord, créez le fichier HTML principal avec le code ci-dessous. La page HTML comprendra simplement quatre textes d'en-tête.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Observez qu'à la ligne 4, pour cet exemple, nous utilisons myscripts.js fichier qui sera stocké dans le même dossier que le fichier HTML et le fichier CSS.
Maintenant, préparons notre fichier CSS comme indiqué ci-dessous.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Vient maintenant la partie JavaScript, créez un fichier dans le bloc-notes et enregistrez-le sous myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Analyse du code
Analysons le code JavaScript.
Code de line number 1 to 4 représente la fonction d'assistance.
À la ligne 6, nous sélectionnons notre élément de parallaxe et ajoutons scrollévénement à la fenêtre. Pour déterminer la zone de défilement, nous utilisonsscrolledHeightpropriété. Alors que l'écran défile vers le bas,backgroundPositionY est mis à jour pour l'élément de parallaxe.
Pour ralentir l'effet de parallaxe, nous avons divisé par 1,5, ce nombre peut être changé en n'importe quel nombre que vous voulez.
Maintenant, vous pourrez voir la page défiler vers le bas comme indiqué dans la capture d'écran ci-dessous.
Utilisation de la bibliothèque JavaScript ScrollMagic
Comme indiqué dans la section précédente, bien que nous puissions utiliser du JavaScript pur pour créer un effet de parallaxe, il existe de puissantes bibliothèques JavaScript qui amélioreront l'expérience utilisateur. ScrollMagic est l'une de ces bibliothèques pour créer des interactions de défilement de parallaxe.
Discutons-en plus à ce sujet à l'aide d'un exemple donné ci-dessous -
Note- Dans cet exemple, pour rester simple, nous aurons le CSS stocké dans un fichier HTML. De plus, le code JavaScript sera présent dans le même document. En un mot, nous ne créerons qu'un seul fichier HTML et les bibliothèques ScrollMagic seront référencées avec le CSS requis.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Comme indiqué dans le code ci-dessus, nous avons requis des références de bibliothèques JavaScript de line 3 to 6. Le code CSS est spécifié de la ligne 9 à 19.
Réseau de diffusion de contenu
Les références de script de la ligne 3 à 6 pointent vers les URL ScrollMagic Content Delivery Network (CDN). L'utilisation d'un CDN est logique dans le développement de sites Web modernes, car vous pouvez charger les bibliothèques requises sans ralentir votre site Web.
Si des personnalisations sont nécessaires dans les bibliothèques, il faudrait héberger les bibliothèques sur leur serveur respectif pour utiliser ces effets. Si vous utilisez les fonctionnalités de base d'une bibliothèque, il est efficace d'utiliser l'URL CDN.
Le code HTML ci-dessus montre une image séparée par 2 divisions. La première division apparaît avec un en-tête -These are bricks et la deuxième division apparaît avec - Some More Bricks.
Notez que dans le code CSS de la ligne 9 à 19, nous spécifions uniquement la position et le style du div de parallaxe respectif.
Le travail de création de cette douce parallaxe sceneest fait par la bibliothèque ScrollMagic. Si vous faites référence au code de script de la ligne 43 à 62, ScrollMagiccontroller est invoqué et un scene est créé.
Les scènes guident le DOM pour créer un effet de parallaxe lorsque 80% de l'écran est occupé. JavaScript est utilisé pour comprendre le déclencheur de défilement. En conséquence, vous obtenez une expérience flottante sur cette page.
Note - En considérant l'image ci-dessus comme une image GIF, vous ne pourrez pas observer l'effet lisse des divisions de texte.
Animations de déclenchement
Les possibilités de créer une expérience utilisateur variée sont infinies avec ScrollMagic Library. Observez les extraits de code ci-dessous pour déclencher des animations lors du défilement.
Notez que pour cela, vous avez besoin de deux fichiers * moins; un fichier HTML et un fichier CSS.
Créez un fichier HTML avec le code ci-dessous -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Maintenant, créez un fichier CSS avec le code suivant.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Analyse du code
En se référant au code HTML, le code ScrollMagic commence à partir de line 17 et continue jusqu'à line 25. Dans cette section, nous créons deux scènes ScrollMagic. La première scène est pour l'image de la brique et l'autre pour l'animation de la bannière.
Comme spécifié dans setTween fonction sur line 20, lorsque l'action de défilement se produit à 40% de la taille de l'écran, la scène suivante commence qui montre la bannière C'est ça!
L'opacité du div avec id - square est contrôlé dans le fichier CSS sur line 10 et line 15.
En conséquence, vous pourrez voir l'animation ci-dessous sur la page.
Défilement horizontal
Nous pouvons également appliquer le défilement parallaxe et réaliser un défilement horizontal. La bibliothèque ScrollMagic peut être utilisée pour créer un effet horizontal de défilement. Voir le code ci-dessous.
Bien que le code soit simple pour créer un effet de défilement horizontal, nous aurons besoin d'une référence jquery pour réaliser le mouvement horizontal des écrans. Les détails de jQuery sont fournis dans le chapitre suivant, pour l'instant, suivez simplement le code ci-dessous.
Nous allons créer trois fichiers séparés - un fichier HTML pour le code principal, un fichier CSS pour les styles et un fichier JS pour les appels de fonction ScrollMagic.
Voici le code du document HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Notez que nous avons trois sections, qui apparaîtront après le défilement. Les trois sections sont désignées par les identifiants title1, title2 et title3 aux lignes 15, 19 et 23 respectivement.
Le code du document CSS est donné ci-dessous -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Analyse du code
Les couleurs d'arrière-plan des trois écrans (ou sections) sont fournies sur lines 10, 22 et 25.
Nous calculons la largeur relative de chaque écran dans le code à partir du line 13.
Le code JavaScript pour ScrollMagic est donné ci-dessous -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Remarquez le triggerHookpropriété à la ligne 8. Cette propriété est chargée de fournir l'effet de défilement lorsque l'utilisateur atteint la fin de l'événement de défilement. La fonctionTimelineMax est responsable de fournir l'effet de défilement horizontal à nos écrans.
Une fois les fichiers créés, vous pourrez voir l'animation de défilement horizontal comme indiqué ci-dessous.
Dans les chapitres précédents, nous avons compris à quel point les bons effets utilisant les bibliothèques JavaScript ajoutent au site Web. JavaScript, lorsqu'il est associé à Photoshop, offre une flexibilité et une facilité phénoménales pour ajouter un défilement parallaxe à votre site Web.
Dans ce chapitre, nous allons examiner trois plugins Photoshop pour ajouter l'effet de défilement de parallaxe. Tout comme nous l'avons référencé dans le chapitre précédent pour JavaScript, nous allons utiliser des références Photoshop dans notre code HTML pour créer un puissant défilement de parallaxe Photoshop.
Un point important à noter à propos des plugins Photoshop est que souvent les plugins ne sont pas mis à jour, vous voudrez donc faire des recherches avant de commencer à utiliser des plugins pour le défilement de parallaxe.
Défilement de parallaxe à l'aide de Parallax.js simple
Parallax.js en utilisant le plugin Photoshop, nous pouvons créer un effet de défilement de parallaxe sans trop de tracas. Considérer le plugin jQuery nécessite l'inclusion de bibliothèques haut de gamme telles que bootstrap. Notez que dans ce chapitre aura des balises HTML5 dans le code.
Regardons le fichier HTML ci-dessous -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Code d'analyse
Les extraits de code ci-dessus montrent le code d'une page avec deux images et un exemple de texte entre elles.
Comme vous pouvez le voir, le code commence par <!DOCTYPE html>C'est la manière typique de faire savoir aux navigateurs que le code est basé sur HTML5.
la <meta> balises de line 4 to 6montre le code qui est machine à interpréter. Vous ne pourrez pas voir l'impact de ce code. La chose importante à noter ici est - avecmeta tag, les développeurs Web obtiennent un contrôle amélioré sur les données affichées.
Aussi sur line 8 and 9, Nous avons inclus les feuilles de style CSS avec Bootstrap. Pour une police et une typographie spécifiques, Bootstrap est la bibliothèque largement utilisée.
Lines 10 and 11prenez soin des bibliothèques Photoshop et Parallax.js. Il est important d'inclure le contrôle sur Parallax.js pour avoir l'effet des images de parallaxe. Vous pourrez trouverdata-parallax propriété avec div sur line 21, Ce qui est suffisant pour appeler la bibliothèque parallax.js pour l'effet de parallaxe requis.
L'effet de parallaxe peut être vu dans le code sur lines 21 et line 40. Les propriétés importantes qui font que cet effet se produit avec parallax.js sont -data-parallax, data-image-src, data-natural-width, data-natural-height.
Avec le fichier CSS, nous devons fournir une seule propriété. C'est comme indiqué ci-dessous -
.parallax-container {
height: 500px;
width: 100%;
}Dans le code HTML ci-dessus, nous avons créé une structure spécifique pour les fichiers CSS. Nous aurons un dossier appelécss, qui aura des fichiers CSS - bootstrap.min.css et style.css.
Une fois que tout est terminé avec les documents, vous pourrez voir l'effet de parallaxe comme indiqué ci-dessous -
Parallaxator à l'aide du plugin Photoshop
Parallaxator best of Photoshop plugin fournit des effets de défilement de parallaxe et est facile à utiliser. Vous pouvez télécharger le plugin Parallaxator, ses fichiers CSS et JS à partir de ce lien - Parallaxator GitHub .
Une fois les fichiers CSS et JS téléchargés, vous pouvez utiliser le code ci-dessous pour créer le code HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Code d'analyse
L'effet de parallaxe est fourni par la classe parallax_child qui est fournie avec chaque balise img. Le parallax_child est connecté avec les fichiers CSS et JS qui sont fournis ci-dessous.
Pour que le parallaxateur du plugin fonctionne, nous avons inclus fm.parallaxator.jquery.css et fm.parallaxator.jquery.js. Ces fichiers doivent être disponibles dans le même répertoire que le fichier HTML.
Le code pour CSS est comme indiqué ci-dessous -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}En raison du code ci-dessus, vous pourrez voir l'effet de parallaxe.
Plug-in jQuery Stellar.js pour le défilement parallaxe
Stellar.js est un autre ajout à la liste des plugins Photoshop de parallaxe. Bien qu'il ne soit plus maintenu, les développeurs qui ont utilisé sa version stable peuvent facilement utiliser l'effet de défilement de parallaxe. Il est compatible avec les dernières versions de Photoshop et facile à mettre en œuvre.
Vous devrez télécharger la dernière version de jquery.stellar.js depuis le site officiel du plugin Stellar.js . Une fois téléchargé, créez ce fichier de plugin dans le même dossier que vos fichiers HTML et CSS.
Jetons un œil au code HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Code d'analyse
Pour que Stellar.js fonctionne, nous avons inclus la bibliothèque juste après le référencement du plugin Photoshop sur jquery.stellar.js line 6.
Les fonctions de la parallaxe stellaire sont appelées dans la balise de script de line 8 to line 15. Avec la propriétédata-stellar-background-ratio, Nous définissons un décalage pour les images affichées. Ceci est fait surlines 19,20,21 and 22.
Le code CSS est donné ci-dessous -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Une fois les fichiers créés et stellar.js, le fichier du plugin est inclus dans le même dossier, vous devriez pouvoir voir l'effet comme indiqué dans la capture d'écran ci-dessous -
Bootstrap est un framework populaire avec de nombreux composants prêts à l'emploi. Bootstrap peut optimiser le code pour implémenter le défilement de parallaxe.
Dans ce chapitre, avec un exemple Voyons comment nous allons utiliser le composant Jumbotron pour implémenter le défilement de parallaxe.
Page complète avec Parallax Bootstrap4 Jumbotron
Imaginez un site Web où l'utilisateur est présenté avec une grande boîte "appel à l'action" avec du contenu concernant une remise ou une vente. Habituellement, Jumbotron trouve son application dans de tels endroits. C'est une grande boîte utile pour attirer l'attention de l'utilisateur.
Comme nous n'utilisons qu'un seul composant du Bootstrap, nous ne créerons pas de fichier CSS séparé pour cet exemple. Laissez-nous plonger directement dans le code HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Code d'analyse
la line 64 références à la bibliothèque Bootstrap. Nous spécifions la marge et le rayon de la bordure pour Jumbotron à partir deline 8 to 11.
Comme on peut le voir sur line 33, Nous créons un div avec la classe Jumbotron pour montrer la grande boîte où nous allons charger notre image spécifique. Veuillez noter qu'il n'y a pas d'URL directe pour l'image cette fois, nous allons utiliser l'image téléchargée. Vous pouvez télécharger toutes les images haute résolution pour votre exemple et le spécifier dansline 16.
La sortie que vous pouvez voir lorsque vous exécutez le code ci-dessus est indiquée ci-dessous -
Dans ce tutoriel, nous avons étudié différentes bibliothèques pour créer un défilement de parallaxe. Nous avons couvert tous les aspects du niveau de base au niveau avancé où nous avons utilisé CSS Bootstrap, utilisé pour le développement frontal. Nous vous suggérons d'appliquer vos compétences créatives pour créer une page Web difficile à ignorer. N'oubliez pas que pour le défilement parallaxe, il existe d'énormes exemples en ligne pour vous donner une inspiration.
Utilisation du défilement parallaxe
Comme nous l'avons déjà discuté dans les chapitres d'introduction, vous pouvez utiliser le défilement parallaxe pour obtenir une expérience utilisateur extraordinaire. Voici quelques idées pour le site, où vous pouvez inclure le défilement de parallaxe.
Chronologie du site Web
Ces types de sites ont généralement une histoire à raconter sur un produit ou une entreprise ou quoi que ce soit d'autre. Vous pouvez créer un effet de parallaxe pour présenter l'histoire au visiteur et le garder engagé avec différentes animations.
Pour un site de chronologie, il vaudra la peine de créer un arrière-plan et d'afficher le contenu du texte au premier plan. Vous pouvez faire équipe avec un graphiste pour créer des graphiques qui vont de pair avec l'arrière-plan.
Site Web de l'application mobile
De nos jours, l'application mobile est un incontournable pour toute offre de produits / services. De nombreuses startups cherchent à créer un site Web d'application mobile qui explique ce que l'application mobile peut et ne peut pas faire.
L'App Store d'Apple, connu pour ses directives strictes en matière de création d'applications, exige que l'application mobile dispose d'un site Web d'assistance. Ce site Web devra toujours être attrayant et convivial.
En utilisant le défilement Parallax, vous pouvez utiliser une image mobile et afficher différents types de fonctionnalités lorsque l'utilisateur fait défiler la page. Un exemple de ce type est déjà présenté au chapitre 4 de ce didacticiel.
Passer la souris sur les effets
Vous pouvez utiliser la puissance du défilement parallaxe et passer la souris pour créer un niveau d'animation suivant. Avec la souris, vous pouvez contrôler la direction du défilement et créer un effet de parallaxe.
De cette façon, il existe de nombreuses possibilités pour créer une expérience formidable. Tout ce dont vous avez besoin est une idée et un bon ensemble d'outils et de bibliothèques.
L'avenir de l'interface utilisateur Web
Avec la puissance de la technologie et des éléments créatifs tels que le défilement parallaxe, il existe une concurrence sans précédent pour créer des expériences utilisateur incroyables. Ce n'est pas seulement limité aux sites Web, mais cela s'est également étendu aux sites mobiles.
Alors que l'interface utilisateur Web est actuellement à son apogée, avoir une page Web compatible avec un appareil mobile est une nécessité de temps. Comme nous l'avons vu dans les exemples de Bootstrap et jQuery, le site Web ne peut pas vivre longtemps s'il n'est pas pris en charge sur les appareils portables.
Outre les bibliothèques existantes, l'avenir de l'expérience utilisateur attend avec impatience l'intelligence artificielle et la réalité virtuelle. Certaines pages Web peuvent être consultées à l'aide d'un équipement VR. Dans une telle situation, rester en contact avec les derniers plugins et chercher à en créer un nouveau a vraiment du sens.
Vous appliquez les connaissances acquises dans ce tutoriel pour créer le meilleur de l'expérience utilisateur, je vous souhaite beaucoup de chance et de succès dans votre parcours de développement Web!