Share
L’utilisation des effets de défilement de parallaxe est l’une des tendances les plus récentes de la conception Web moderne. Dans ce tutoriel, je vais vous montrer comment créer l'effet sur votre propre site Web, avec un peu d'imagination et l'aide de Stellar.js..
Vous souhaitez gagner du temps et vous assurer que vous utilisez les meilleures pratiques modernes? Il existe un excellent plugin de curseur jQuery réactif sur Envato Market qui pourrait parfaitement faire l'affaire. Il est déjà utilisé sur plus de 150 000 sites Web..
L'effet de défilement de la parallaxe est populaire depuis que des sites tels que Nike, Better World, l'ont introduit sur leurs sites il y a quelques années. L’effet de parallaxe en ce qui concerne les interfaces existe depuis les années 1980, date à laquelle il a été utilisé pour la première fois dans les titres de jeux vidéo, puis dans les jeux eux-mêmes. Plus récemment, il a commencé à apparaître dans les interfaces Web - vous serez familiarisé avec silverbackapp qui utilisait l'effet dans le cadre de l'en-tête..
Combinés à la fonctionnalité de défilement d'un site Web, les effets de défilement parallaxe peuvent avoir un impact visuel important, en particulier lorsqu'ils sont combinés à une forme d'histoire qui vous emmène dans un voyage..
La parallaxe est un déplacement ou une différence de la position apparente d'un objet vu selon deux lignes de visée différentes. - Wikipédia
Alors, quel est exactement l'effet de parallaxe? Eh bien, c’est probablement l’une des choses auxquelles vos clients se réfèrent lorsqu'ils disent aveuglément «Je veux mon site HTML5». Chaque fois que les clients me demandent un site "HTML5", je dois leur demander spécifiquement comment ils interprètent le sens HTML5 - pour le moment, cela semble être le mot à la mode que les clients me disent sans cesse, sans vraiment comprendre ce que cela signifie..
Donc est-ce HTML5? Certes, HTML5 a un rôle à jouer dans l'effet de défilement de la parallaxe, mais il est plus que HTML5, il utilise également une forme de javascript, tel que jQuery, et ne serait pas possible sans un peu de CSS3..
Le mot actuel parallaxe est dérivé du grec παραλλαξη (parallaxe) qui signifie altération. Les objets les plus proches de l'œil ont une parallaxe plus grande que les objets au loin. Cela signifie que les objets les plus proches de nous peuvent sembler bouger plus vite que les objets en arrière-plan.
La superposition de plusieurs arrière-plans et objets (tels que des images), leur permettant ensuite de se déplacer à différentes vitesses, crée une sensation de profondeur et de dimension.
Jetez un oeil à quelques exemples qui démontrent des effets de parallaxe.
Les exemples ci-dessus vous emmènent dans une forme de voyage ou d'histoire, et ils le font de différentes façons. C’est, à mon avis, ce qui fait le succès d’un site de défilement de parallaxe. La clé pour le rendre intéressant et unique consiste à se concentrer sur une bonne histoire et un bon concept, puis à utiliser l'effet de manière créative et imaginative..
Wieden + Kennedy (W & K), les créateurs du site Web Nike Better World, soutiennent ceci:
À notre avis, les technologies sont indépendantes du concept. Notre objectif principal était de créer une grande expérience de narration interactive. - Wieden + Kennedy (W & K)
Pour illustrer un moyen d'implémenter le défilement parallaxe sur votre site Web, j'ai choisi de vous présenter un site Web simple comportant quatre diapositives et utilisant l'effet sur différents fonds et images. J'ai également ajouté une navigation dans le coin gauche qui permet de faire défiler une diapositive spécifique sur le site et de modifier la taille pour refléter le numéro de la diapositive active. J'utilise aussi la police Web Bebas, bien que vous soyez libre d'utiliser autre chose si vous le souhaitez.
Voici comment notre structure de dossiers apparaîtra:
Pour m'aider à atteindre cet objectif, j'utilise le Stellar.js, un plugin jquery de Mark Dalgleish qui facilite la création de sites de défilement de parallaxe. Il existe d'autres plugins disponibles pour vous aider à faire cela que j'ai énumérés au bas de cet article. J'ai choisi d'utiliser Stellar.js car sa mise en œuvre est assez simple et, bien que cela ne soit pas démontré dans ce didacticiel, il peut être optimisé pour fonctionner sur des plates-formes d'appareils intelligents comme iOS..
Je vais aussi utiliser les waypoints jQuery de Caleb Troughton. Waypoints est un autre plugin jQuery qui exécute une fonction chaque fois que vous faites défiler un élément. Cela permet à la navigation sur le site de mettre en évidence la diapositive sur laquelle nous nous trouvons en fonction de la position de la barre de défilement..
jQuery easing est un plugin de GSGD qui offre des options avancées d’assouplissement. Nous allons utiliser cela pour ajouter un joli mouvement d’atténuation lors du passage d’une diapositive à une autre..
En démarrant notre index.html, nous ajoutons le doctype HTML5 et créons ensuite la section head. Cela consiste en une réinitialisation CSS suivie de notre feuille de style 'styles.css'. Nous ajoutons ensuite la bibliothèque jQuery suivie de notre fichier jQuery personnalisé 'js.js'. Ceci est ensuite suivi par les trois plugins, 'jquery.stellar.min.js', 'waypoints.min.js' et 'jquery.easing.1.3.js'.
Créez un site Web de parallaxe à l'aide de Stellar.js
L'élément suivant de notre code html est l'image du logo Envato qui reste dans une position fixe constante sur tout le site. A cela, nous ajoutons une classe de 'envatologo' afin que nous puissions en définir le positionnement ultérieurement lorsque nous codons le CSS.
Les quatre diapositives utilisent le même balisage:
Nous utilisons une classe de "diapositives" qui sera utilisée comme style général pour toutes les diapositives. Chaque diapositive se voit alors attribuer un identifiant de «diapositive» suivi du numéro de la diapositive, à savoir «Diapositive1». Nous utilisons l'attribut de données HTML5 et l'appelons 'data-slide'. Cela nous permettra de le cibler en utilisant jQuery. Un autre attribut de données, "data-stellar-background-ratio", est ajouté. Ceci est spécifique au plugin jQuery stellar.js et indique au plugin à quel rapport la vitesse de l'élément doit défiler.
Le rapport est relatif à la vitesse de défilement naturelle, de sorte qu'un rapport de 0,5 entraîne le défilement de l'élément à demi-vitesse, un rapport de 1 n'aura aucun effet et un rapport de 2 fera défiler l'élément à une vitesse deux fois supérieure..
Toutes les diapositives sauf la diapositive quatre ont un bouton qui nous permettra de passer à la diapositive suivante. A cela, nous ajoutons l'attribut 'data-slide' avec la valeur du numéro de la diapositive suivante. Ceci afin que le bouton sache quelle diapositive est la suivante afin que nous puissions passer cette valeur à jQuery. La plupart des diapositives ont également une durée avec une classe de «slideno»; simplement une version texte du numéro de la diapositive qui apparaît dans le coin inférieur gauche de la plupart des diapositives. Cela pourrait aussi être utilisé pour les titres.
Accentsconagua
Diapo 1 Sur les diapositives trois et quatre, nous ajoutons également des éléments d’image au div 'diapositive'. Ces images permettront de mieux comprendre l’effet de parallaxe que nous créons. Nous les enveloppons dans une division 'wrapper' qui sera centralisée et aura une largeur de '960px', ceci uniquement pour nous assurer qu'elle s'affiche correctement pour toutes les tailles d'écran de bureau..
Chaque image est associée à un attribut "data-stellar-ratio". Ceci est à nouveau spécifique à stellar.js et indique au plugin à quel rapport de vitesse nous devons faire défiler l'élément à.
Heureusement pour nous, le CSS n’est pas trop impliqué. Il s'agit essentiellement de quelques éléments simples, mais la majorité sert à positionner certains éléments de l'image..
La première chose que nous devons faire avec notre CSS est d’apporter la police BEBAS en utilisant @ font-face. Nous ajoutons ensuite cela au code HTML pour définir la police de caractères du site. Nous définissons également la largeur et la hauteur du code HTML et du corps à 100%. Cela permettra à nos diapositives d'adopter toute la largeur et la hauteur de l'écran de l'utilisateur..
@ font-face font-family: 'BebasRegular'; src: url ('font / BEBAS ___- webfont.eot'); src: url ('font / BEBAS ___- webfont.eot? #iefix') format ('embedded-opentype'), url ('font / BEBAS ___- webfont.woff') format ('woff'), url ('font / BEBAS ___- webfont.ttf ') format (' type exact '), url (' police / BEBAS ___- webfont.svg # BebasRegular ') format (' svg '); poids de police: normal; style de police: normal; html, body font-family: 'BebasRegular'; largeur: 100%; hauteur: 100%; La navigation principale se voit attribuer une position «fixe» pour la conserver au même endroit sur tout le site. Nous compensons ce 20 pixels par le haut pour laisser un peu d’espace au-dessus et définissons l’indice z sur 1 pour nous assurer qu’il se trouve sur la couche supérieure du site..
La liste actuelle est simplement le style du texte avec une bordure en bas pour servir de soulignement. Cela a une largeur de 53px. Une transition est également ajoutée afin qu'elle passe de son état standard à son état de survol. J'ai utilisé le préfixe -webkit- ici simplement pour garder le code court, mais le code source complet que vous pouvez télécharger ci-dessus contient tous les préfixes du vendeur..
L'état de survol utilise également les mêmes propriétés que la classe 'active'; fondamentalement juste une augmentation de la taille et de la largeur de la police. JQuery utilise la classe 'active' pour mettre en forme la diapositive correspondante, visible dans la fenêtre du navigateur..
.navigation position: fixe; z-index: 1; en haut: 20px; .navigation li color: # 333333; bloc de visualisation; rembourrage: 0 10px; hauteur de ligne: 30px; marge inférieure: 2px; poids de police: gras; -webkit-transition: tous les fichiers .2 sont faciles à installer; bord inférieur: 1px noir uni; text-align: left; largeur: 53px; .navigation li: survol, .active taille de la police: 25px; curseur: pointeur; width: 100px! important;
Certains styles de positionnement sont attribués au logo envato uniquement pour s’assurer qu’il reste au centre de l’écran. De la même manière que la navigation, un indice z de '1' est également attribué afin de garantir qu'il reste au-dessus.
.envatologo position: fixed; en haut: 50%; à gauche: 50%; largeur: 446px; marge supérieure: -41px; marge gauche: -223px; z-index: 1;
Nous passons maintenant au style des diapositives. Nous leur donnons une propriété 'fixed' d'attache de fond. La propriété background-attachment définit si une image d'arrière-plan est fixe ou défile avec le reste de la page; elle est donc utile pour les images d'arrière-plan (comme celle utilisée sur la diapositive quatre). Pour cet exemple, nous avons utilisé un papier peint de Philipp Seiffert qui peut être téléchargé ici. Nous avons défini la position de la diapositive sur 'relative'. C'est à cela que nous pouvons absolument positionner les classes 'slideno' et 'button' contre la diapositive par opposition au document réel.
L'ombre de la boîte sert uniquement à la décoration et ajoute une belle ombre portée au haut de chaque diapositive..
.slide background-attachment: fixed; largeur: 100%; hauteur: 100%; position: relative; box-shadow: incrément 0px 10px 10px rgba (0,0,0,0,3); .wrapper width: 960px; hauteur: 200px; marge: 0 auto; position: relative; .slideno position: absolute; en bas: 0px; gauche: 0px; taille de police: 100px; poids de police: gras; couleur: rgba (255,255,255,0.3);
Le bouton. Est pour le bouton au bas de la page qui nous permet de passer à la diapositive suivante. Nous l'avons positionné en bas au centre de chaque diapositive et avons utilisé l'image d'une flèche comme indicateur..
.bouton display: block; largeur: 50px; hauteur: 50px; position: absolue; en bas: 0px; à gauche: 50%; couleur de fond: # 333333; background-image: url (… /images/arrow.png); répétition de fond: non répétée; .button: hover background-color: # 494949; curseur: pointeur;
Le style de chaque diapositive est relativement simple et suit le même motif à chaque fois. La diapositive 1 a une couleur de fond de '# 5c9900'. La deuxième diapositive contient également une couleur d'arrière-plan. La deuxième diapositive contient également des images et nous pouvons cibler chacune d'elles à l'aide du sélecteur CSS nième enfant (n). Ce sélecteur peut être décrit comme
Cette pseudo-classe met en correspondance des éléments sur la base de leurs positions dans la liste des éléments enfants d'un élément parent.
Nous appelons donc chaque image dans l’ordre dans lequel elle apparaît dans notre balisage. Nous les positionnons simplement par rapport à l'emballage de la diapositive.
/ ******************************* DIAPOSITIVE 1 ***************** ************** / # slide1 background-color: # 5c9900; / ******************************* DIAPOSITIVE 2 **************** *************** / # slide2 background-color: # 005c99; # slide2 img: premier-enfant position: absolute; en haut: 700 pixels; à gauche: -150px; # slide2 img: nth-child (2) position: absolute; en haut: 300 pixels; à gauche: 100px; # slide2 img: nth-child (3) position: absolute; en haut: 600px; à gauche: 300px; # slide2 img: nth-child (4) position: absolute; en haut: 400 pixels; à gauche: 300px; # slide2 img: nth-child (5) position: absolute; en haut: 600px; à droite: 300px; # slide2 img: nth-child (6) position: absolute; en haut: 600px; à droite: 300px; # slide2 img: nth-child (7) position: absolute; en haut: 400 pixels; à droite: 100px; # slide2 img: nth-child (8) position: absolute; en haut: 100px; à droite: 300px;
La diapositive trois suit la même couleur que la diapositive deux.
/ ******************************* DIAPOSITIVE 3 ***************** ************** / # slide3 background-color: # b6c10b; # slide3 img: premier-enfant position: absolute; en haut: 700 pixels; à gauche: 300px; # slide3 img: nth-child (2) position: absolute; en haut: 100px; à gauche: 100px; # slide3 img: nth-child (3) position: absolute; en haut: 150 pixels; à gauche: 300px; # slide3 img: nth-child (4) position: absolute; en haut: 450 pixels; à gauche: 300px; # slide3 img: nth-child (5) position: absolute; en haut: 200px; à droite: 300px; # slide3 img: nth-child (6) position: absolute; en haut: 100px; à droite: 300px;
La quatrième diapositive est légèrement différente des deux précédentes, car elle ne contient aucun élément d'image ni couleur d'arrière-plan, mais utilise plutôt une image d'arrière-plan. Nous lui avons également attribué la propriété CSS3 'background-size: cover'. Cela définit essentiellement l’image d’arrière-plan pour couvrir toute la fenêtre du navigateur et sera redimensionnée à mesure que la fenêtre du navigateur se redimensionne. Nous avons également ajouté une ligne de texte sur la dernière diapositive que nous avons stylée et avons donné une classe de 'parallaxbg'
/ ******************************* DIAPOSITIVE 4 ***************** ************** / # slide4 background-image: url (… /images/Slide4/desktop4.jpg); -webkit-background-size: couverture; -moz-background-size: couverture; -o-background-size: couverture; taille du fond: couverture; # slide4 .parallaxbg position: absolute; à droite: 40px; en haut: 40 px; taille de police: 28px; couleur: rgba (51,51,51,0,3);
Le jQuery est vraiment où cette chose commence à prendre vie. J'ai commenté le code pour que vous puissiez voir exactement ce qui se passe.
jQuery (document) .ready (function ($) // initialise Stellar.js $ (fenêtre) .stellar (); // Met en cache certaines variables var links = $ ('. navigation'). find ('li'); slide = $ ('. slide'); button = $ ('. button'); mywindow = $ (fenêtre); htmlbody = $ ('html, body'); // Configuration du plugin waypoints slide.waypoint (function (event , direction) // met en cache la variable de l'attribut data-slide associé à chaque diapositive dataslide = $ (this) .attr ('data-slide'); // Si l'utilisateur fait défiler vers le haut, modifie le lien de navigation qui a le même attribut data-slide en tant que slide à active et // supprime la classe active du lien de navigation précédent if (direction === 'down') $ ('. navigation li [data-slide = "' + dataslide + '" ] '). addClass (' active '). prev (). removeClass (' active '); // else Si l'utilisateur fait défiler vers le bas, modifie le lien de navigation qui possède le même attribut de diapositive de données que la diapositive à actif et / / supprime la classe active du lien de navigation suivant else $ ('. navigation li [data-slide = "' + dataslide + '"]'). addClass ('active'). next ( ) .removeClass ('active'); ); // Les points de passage ne détectent pas la première diapositive lorsque l'utilisateur revient au début de la liste. Nous ajoutons donc ce petit code qui supprime la classe // de la diapositive de lien de navigation 2 et l'ajoute à la diapositive de lien de navigation 1. mywindow.scroll (function () if (mywindow.scrollTop () == 0) $ ('. navigation li [diapo-donnée = "1"]'). addClass ('active'); $ ('. navigation li [diapo-donnée = "2"] '). RemoveClass (' active ');); // Crée une fonction qui se verra attribuer un numéro de diapositive, puis fera défiler cette diapositive à l'aide de jquerys animate. Le plug-in Jquery // easing est également utilisé, nous avons donc adopté la méthode d'accélération de 'easInOutQuint' disponible dans le plug-in. fonction goToByScroll (dataslide) htmlbody.animate (scrollTop: $ ('. slide [data-slide = "' + dataslide + '"] "). offset (). top, 2000," aisance au premier plan »; // Lorsque l'utilisateur clique sur les liens de navigation, récupère la valeur de l'attribut data-slide du lien et transmet cette variable à la fonction goToByScroll links.click (function (e) e.preventDefault (); dataslide = $ (this ) .attr ('data-slide'); goToByScroll (dataslide);); // Lorsque l'utilisateur clique sur le bouton, récupère la valeur d'attribut data-slide du bouton et passe cette variable à la fonction goToByScroll button.click (function (e) e.preventDefault (); dataslide = $ (this ) .attr ('data-slide'); goToByScroll (dataslide);); ); 
Si vous regardez la deuxième diapositive de notre exemple, vous remarquerez les bulles 3D. J'ai ajouté un léger flou gaussien à certains d'entre eux, principalement à ceux situés au premier plan et à l'arrière-plan. La combinaison de celles-ci avec des bulles nettement focalisées ajoute à la sensation de profondeur créée par la parallaxe. C’est quelque chose que vous devriez peut-être prendre en compte lorsque vous essayez d’obtenir une bonne profondeur de votre site..
Beaucoup de sites qui utilisent cet effet ont tendance à être assez chargés d'images. Assurez-vous de compresser vos images autant que vous le pouvez (sans sacrifier la qualité). Si, après la compression, le chargement prend encore un certain temps, envisagez d'ajouter un chargeur à votre site..
Le défilement de la parallaxe est l’un des effets les plus appréciés de la période récente et les gens ne cessent de repousser les limites. Aujourd'hui, je vous ai montré comment configurer un site Web de base utilisant le défilement parallaxe. La démo que j'ai montrée aujourd'hui est un site relativement simple à des fins d'apprentissage. Pour ceux d’entre vous qui sont sur le point de créer un site utilisant cet effet, je vous invite donc à vous attarder sur le concept et l’histoire, car c’est ce qui les rend uniques, partageables et même un plaisir de les parcourir. Il s'agit de savoir comment utiliser cet effet à bon escient, et pas seulement pour le plaisir de l'utiliser..
J'espère que vous avez apprécié la lecture sur le défilement de parallaxe et j'aimerais voir comment vous l'avez utilisé sur vos propres sites, n'hésitez pas à leur laisser des liens ci-dessous. Jusqu'à la prochaine fois!
