Inhaltsverzeichnis
Aktuell verfügen wir über verschiedenste Webseiten, die unterschiedliche Gestaltungsmuster umsetzen können, die vom klassischen Flat Design bis hin zum innovativen neuen Material Design reichen können.
Es gibt jedoch eine ganz andere und eigentümliche Art, Websites zu erstellen, Websites, die lediglich informativ sind und keine sehr komplexe Funktionalität als solche haben. Für diese Fälle können wir eine einseitige Website verwenden, die den Effekt implementiert Parallaxe.
Dieser Effekt gibt uns das Gefühl, dass wir mehrere Ebenen und sogar mehrere Seiten in einer haben. Mal sehen, wie wir es dann umsetzen können.
HTML Quelltext
Unser HTML Es wird aus einer ziemlich einfachen Struktur bestehen, bestehend aus div, die wir gemäß bestimmten Klassen als Container identifizieren, zusätzlich werden wir unsere Stylesheets auf die übliche Weise sowie unsere JavaScript. Für dieses Beispiel werden wir uns auf beide verlassen jQuery mögen Unterstrich.js Dies ist eine Bibliothek, die uns mehrere Funktionen zur Verfügung stellt, die uns bei dieser Übung helfen:
Startseite ParallaxeHimmelssturz
Film 1
Der Profi
Film 2
Reservoir Dogs
Film 3
CSS-Code
Für unser Stylesheet werden wir noch ein bisschen arbeiten und die Eigenschaften von . verwenden CSS3 in Bezug auf verwandelt sich Um den Effekt zu erzielen, dass wir unsere Hintergründe nach oben oder unten verschieben, verwenden wir zusätzlich die Kinder unseres Dokuments, um verschiedene Hintergrundbilder zuzuweisen, die als unsere mehreren Seiten dienen CSS:
.background {Hintergrundgröße: Abdeckung; Hintergrundwiederholung: keine Wiederholung; Hintergrund-Position: Mitte Mitte; Überlauf versteckt; will-change: transformieren; -webkit-backface-visibility: versteckt; Rückseiten-Sichtbarkeit: versteckt; Höhe: 130vh; Position: fest; Breite: 100 %; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformieren: translateY (30vh); -webkit-Übergang: alle 1,2s Kubikbezier (0,22, 0,44, 0, 1); Übergang: alle 1,2s kubisch-bezier (0,22, 0,44, 0, 1); } .background: before {content: ""; Position: absolut; Breite: 100 %; Höhe: 100%; oben: 0; links: 0; rechts: 0; unten: 0; Hintergrundfarbe: rgba (0, 0, 0, 0.3); } .background: first-child {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transformieren: translateY (-15vh); } .background: erstes Kind .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformieren: translateY (15vh); } .background: n-tes-Kind (2) {Hintergrundbild: URL (theprofessional.jpg.webp); } .background: nth-child (3) {Hintergrundbild: url (reservoirdogs.png.webp); } .hintergrund: n-tes-Kind (1) {z-Index: 3; } .hintergrund: n-tes-Kind (2) {z-Index: 2; } .background: n-tes-Kind (3) {z-Index: 1; }Zum Abschluss unseres Stylesheets werden wir einige Änderungen am Text vornehmen, der in jedem Container enthalten sein wird, sowie den Übergang, den jeder von diesen gemäß dem Scrollen vornehmen muss, den wir auf der Website vornehmen, um anzuzeigen, ob wir nach oben gehen oder runter
.content-wrapper {Höhe: 100vh; Anzeige: -webkit-box; Anzeige: -webkit-flex; Anzeige: -ms-flexbox; Anzeige: flexibel; -webkit-box-pack: Mitte; -webkit-justify-content: Mitte; -ms-flex-pack: Mitte; rechtfertigen-Inhalt: Mitte; Textausrichtung: Mitte; -webkit-flex-flow: Spalte Nowrap; -ms-flex-flow: Spalte Nowrap; flex-flow: Spalte Nowrap; Farbe: #fff; Schriftfamilie: Montserrat; Texttransformation: Großbuchstaben; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformieren: translateY (40vh); will-change: transformieren; -webkit-backface-visibility: versteckt; Rückseiten-Sichtbarkeit: versteckt; -webkit-Übergang: alle 1.7s Kubik-Bezier (0.22, 0.44, 0, 1); Übergang: alle 1,7s kubisch-bezier (0,22, 0,44, 0, 1); } .content-title {Schriftgröße: 12vh; Zeilenhöhe: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformieren: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformieren: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transformieren: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformieren: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformieren: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformieren: translateY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transformieren: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformieren: translateY (15vh); }
JavaScript-Code
Endlich in unserem JavaScript wir kümmern uns um was? Hörer unserer Veranstaltungen, d. h. zu wissen, wann der Benutzer mit der Maus durch die Webseite scrollt. Darüber hinaus erkennen wir den verwendeten Browser und ermitteln einige konstante Werte wie die Dauer, die ein Schieberegler haben muss, bevor er wieder geändert werden kann, die Empfindlichkeit des Scrollens und die Anzahl der Seiten, die wir haben werden.
var-Zeit = falsch; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var-Empfindlichkeit Scroll = 30; var DauerSchieberegler = 600; var sliderActual = 0; var sliderTotales = $ (". Hintergrund"). length; Funktion Parallaxeffekt (evt) {if (esFirefox) {delta = evt.detail * (-120); aufrechtzuerhalten. Sonst if (esInternetE) {delta = -evt.deltaY; aufrechtzuerhalten. Sonst {Delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } vorheriges Item (); DauerSliderTime (durationSliders); }}}Schließlich werden wir die Zeit festlegen, zu der das Bild repariert werden muss, um zum nächsten zu gelangen, sowie die Zuhörer unserer Ereignisse. Außerdem verwenden wir die Funktion zum Hinzufügen oder Entfernen von Klassen, um zu wissen, wann eines der Bilder ist unten oder oben:
Funktion timeSliderDuration (slideDuration) {setTimeout (Funktion () {time = false;}, slideDuration); } var eventScrollMouse = ist Firefox? "DOMMouseScroll": "Rad"; window.addEventListener (ScrollMouse-Ereignis, _.throttle (Parallax-Effekt, 60), false); Funktion eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("nach oben scrollen") addClass ("nach unten scrollen"); } function previousItem () {var $ slideSig = $ (". background").eq (currentSlider); $ slideSig.removeClass ("nach unten scrollen") addClass ("nach oben scrollen"); }Wenn unser Code fertig ist, müssen wir nur noch die Funktion unserer Anwendung testen, dazu müssen wir nur das Scrollen unserer Maus verwenden, um das Verhalten zu sehen, mal sehen:
Dieser Effekt verleiht unseren Websites ein ganz neues Gefühl, es ist jedoch ratsam, ihn in bestimmten Anwendungen wie Portfolios oder Informationsseiten zu verwenden, da jede andere Website, die andere Arten von Prozessen oder Informationen verarbeitet, den Benutzer ermüdet und das Interesse daran verliert . .
