Table des matières
Nous avons actuellement une grande variété de pages Web, qui peuvent implémenter différents modèles de conception, qui peuvent aller d'un design plat classique ou du nouveau Material Design innovant.
Mais il existe une manière assez différente et particulière de créer des sites Web, des sites Web qui sont simplement informatifs et n'ont pas une fonctionnalité très complexe en tant que telle. Pour ces cas, nous pouvons utiliser un site Web d'une seule page qui implémente l'effet Parallaxe.
Cet effet nous donne l'impression d'avoir plusieurs plans et même plusieurs pages en un. Voyons ensuite comment nous pouvons l'implémenter.
Code HTML
Notre HTML Il sera composé d'une structure assez simple, composée de div que nous identifierons comme conteneurs selon certaines classes, en plus de cela nous inclurons nos feuilles de style de la manière habituelle, ainsi que nos JavaScript. Pour cet exemple, nous nous appuierons sur les deux jQuery aimer Underscore.js qui est une librairie qui nous fournit plusieurs fonctionnalités qui vont nous aider dans cet exercice :
Accueil ParallaxeChute du ciel
Film 1
Le professionnel
Film 2
Chiens de réservoir
Film 3
Code CSS
Pour notre feuille de style on va travailler un peu plus on va utiliser les propriétés de CSS3 en ce qui concerne se transforme pour donner l'effet de monter ou descendre nos arrière-plans, en plus de cela nous utiliserons les enfants de notre document pour attribuer différentes images d'arrière-plan qui serviront de nos multiples pages, voyons ce fragment de notre CSS:
.background {background-size: cover; background-repeat : pas de répétition; position d'arrière-plan : centre au centre; débordement caché; va-changer : transformer; -webkit-backface-visibility : masqué; visibilité vers l'arrière : masquée; hauteur : 130vh ; position : fixe ; largeur : 100 % ; -webkit-transform : translateY (30vh) ; -ms-transform : translateY (30vh) ; transformer : translateY (30vh) ; -webkit-transition : tous les 1.2s cube-bézier (0.22, 0.44, 0, 1); transition : tous les 1,2s cube-bézier (0,22, 0,44, 0, 1); } .background : avant {contenu : "; position : absolue ; largeur : 100 % ; hauteur : 100 % ; haut : 0 ; à gauche : 0; à droite : 0; bas : 0 ; couleur de fond : rgba (0, 0, 0, 0,3); } .background: first-child {background-image: url (skyfall.jpg.webp); -webkit-transform : translateY (-15vh) ; -ms-transform : translateY (-15vh) ; transformer : translateY (-15vh) ; } .background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform : translateY (15vh) ; transformer : translateY (15vh) ; } .background: nth-child (2) {background-image: url (theprofessional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); } .background : nième-enfant (1) {z-index : 3; } .background : nième-enfant (2) {z-index : 2; } .background : nième-enfant (3) {z-index : 1; }Pour terminer avec notre feuille de style, nous appliquerons quelques modifications au texte qui sera inclus dans chaque conteneur, ainsi que la transition que chacun d'eux doit effectuer en fonction du défilement que nous effectuons vers le site Web, indiquant si nous montons ou vers le bas
.content-wrapper {hauteur : 100vh; afficher : -webkit-box ; afficher : -webkit-flex ; afficher : -ms-flexbox ; affichage : flexible ; -webkit-box-pack : centre ; -webkit-justify-content : centre ; -ms-flex-pack : centre ; justifier-contenu : centre ; text-align : centre ; -webkit-flex-flow : colonne nowrap ; -ms-flex-flow : colonne nowrap ; flex-flow : colonne nowrap ; couleur : #fff ; famille de polices : Montserrat ; transformation de texte : majuscule ; -webkit-transform : translateY (40vh) ; -ms-transform : translateY (40vh) ; transformer : translateY (40vh) ; va-changer : transformer ; -webkit-backface-visibility : masqué; visibilité vers l'arrière : masquée; -webkit-transition : tous les 1.7s cube-bézier (0,22, 0,44, 0, 1); transition : tous les 1,7 s cube-bézier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; hauteur de ligne : 1.4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformer : translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform : translateY (15vh) ; transformer : translateY (15vh) ; } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transformer : translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform : translateY (30vh) ; transformer : translateY (30vh) ; } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformer : translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform : translateY (40vh) ; transformer : translateY (40vh) ; } .background.down-scroll + .background : pas (.down-scroll) {-webkit-transform : translate3d (0, -15vh, 0); transformer : translate3d (0, -15vh, 0); } .background.down-scroll + .background : pas (.down-scroll) .content-wrapper {-webkit-transform : translateY (15vh); -ms-transform : translateY (15vh) ; transformer : translateY (15vh) ; }
Code JavaScript
Enfin dans notre JavaScript nous allons gérer quels sont les auditeur de nos événements, c'est-à-dire savoir quand l'utilisateur utilise le défilement de la souris pour faire défiler la page Web. En plus de cela, nous allons détecter le navigateur utilisé et établir des valeurs constantes telles que la durée qu'un slider doit avoir avant de pouvoir être modifié à nouveau, la sensibilité du défilement et le nombre de pages que nous aurons.
var heure = faux; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var sensibilité Défilement = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". background"). length; fonction parallaxeeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (heure ! = vrai) {if (delta = Sensibilité de défilement) {heure = vrai; if (currentSlider! == 0) {currentSlider--; } élément précédent (); durationSliderTime (durationSliders); }}}Enfin, nous allons établir l'heure à laquelle l'image doit être fixée pour passer à la suivante, ainsi que les auditeurs de nos événements, de plus nous utiliserons la fonction d'ajout ou de suppression de classe pour savoir quand l'une des images est en bas ou en haut :
function timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = Firefox ? "DOMMouseScroll": "roue"; window.addEventListener (événement ScrollMouse, _.throttle (effet Parallax, 60), false); function eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("défilement vers le haut").addClass ("défilement vers le bas"); } function élément précédent () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("défilement vers le bas").addClass ("défilement vers le haut"); }Notre code terminé, nous n'avons plus qu'à tester le fonctionnement de notre application, pour cela nous n'avons qu'à utiliser le scroll de notre souris pour voir le comportement, voyons :
Cet effet donne une sensation assez fraîche à nos sites, cependant il est conseillé de l'utiliser dans certaines applications telles que des portfolios ou des pages d'informations, car tout autre site Web qui gère d'autres types de processus ou d'informations fatiguera l'utilisateur et le désintéressera. . . .
