Spisie treści
Obecnie posiadamy szeroką gamę stron internetowych, które mogą realizować różne wzorce projektowe, od klasycznego płaskiego projektu lub innowacyjnego nowego Material Design.
Ale istnieje zupełnie inny i osobliwy sposób tworzenia stron internetowych, które mają jedynie charakter informacyjny i nie mają bardzo złożonej funkcjonalności jako takiej. W takich przypadkach możemy użyć jednostronicowej witryny, która implementuje efekt Paralaksa.
Ten efekt daje nam poczucie, że mamy wiele płaszczyzn, a nawet wiele stron w jednej. Zobaczmy więc, jak możemy to zaimplementować.
Kod HTML
Nasz HTML Będzie składał się z dość prostej struktury, złożonej z div, które będziemy identyfikować jako kontenery według określonych klas, oprócz tego w zwykły sposób uwzględnimy nasze arkusze stylów, a także nasze JavaScript. W tym przykładzie będziemy polegać na obu jQuery lubić Podkreślenie.js czyli biblioteka, która udostępnia nam kilka funkcjonalności, które pomogą nam w tym ćwiczeniu:
Strona główna ParalaksaUpadek nieba
Film 1
Profesjonalista
Film 2
Rezerwowe Psy
Film 3
Kod CSS
W naszym arkuszu stylów popracujemy trochę więcej, użyjemy właściwości CSS3 w odniesieniu do transformuje aby uzyskać efekt przesuwania się w górę lub w dół naszego tła, dodatkowo użyjemy dzieci naszego dokumentu, aby przypisać różne obrazy tła, które będą służyć jako nasze wiele stron, zobaczmy ten fragment naszego CSS:
.background {rozmiar tła: okładka; powtarzanie w tle: bez powtórzeń; pozycja tła: środek centrum; przelew: ukryty; zmiana woli: transformacja; -webkit-backface-visibility: ukryty; widoczność z tyłu: ukryta; wysokość: 130vh; pozycja: ustalona; szerokość: 100%; -transformacja webkit: translateY (30vh); -ms-transform: translateY (30vh); transformacja: translateY (30vh); -przejście na webkit: wszystkie 1.2s cube-bezier (0.22, 0.44, 0, 1); przejście: wszystkie 1,2s sześcienny-beziera (0,22, 0,44, 0, 1); } .background: przed {treść: ""; pozycja: bezwzględna; szerokość: 100%; wzrost: 100%; góra: 0; po lewej: 0; prawo: 0; dół: 0; kolor tła: rgba (0, 0, 0, 0,3); } .background: first-child {background-image: url (skyfall.jpg.webp); -transformacja webkit: translateY (-15vh); -ms-transform: przetłumaczY (-15vh); transformacja: przetłumaczY (-15vh); } .background: pierwsze dziecko .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformacja: translateY (15vh); } .background: n-dziecko (2) {obraz-w tle: url (professional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); } .background: n-te dziecko (1) {z-indeks: 3; } .background: n-te dziecko (2) {z-indeks: 2; } .background: n-te dziecko (3) {z-indeks: 1; }Aby zakończyć z naszym arkuszem stylów, wprowadzimy pewne zmiany w tekście, który będzie zawarty w każdym kontenerze, a także przejście, które każdy z nich musi wykonać zgodnie ze zwojem, który wykonujemy na stronie internetowej, wskazując, czy idziemy w górę lub w dół
.content-wrapper {wysokość: 100vh; wyświetlanie: -webkit-box; wyświetlanie: -webkit-flex; wyświetlacz: -ms-flexbox; wyświetlacz: elastyczny; -webkit-box-pack: centrum; -webkit-justify-content: centrum; -ms-flex-pack: centrum; uzasadnić-treść: centrum; wyrównanie tekstu: środek; -webkit-flex-flow: kolumna nowrap; -ms-flex-flow: kolumna nowrap; flex-flow: kolumna nowrap; kolor: #fff; rodzina czcionek: Montserrat; transformacja tekstu: wielkie litery; -transformacja webkit: translateY (40vh); -ms-transform: translateY (40vh); transformacja: przetłumaczY (40vh); zmiana woli: transformacja; -webkit-backface-visibility: ukryty; widoczność z tyłu: ukryta; -przejście na webkit: wszystkie sześcienne bezier 1,7s (0,22, 0,44, 0, 1); przejście: wszystkie 1,7s sześcienny-Beziera (0,22, 0,44, 0, 1); } .treść-tytuł {rozmiar-czcionki: 12vh; wysokość linii: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformacja: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformacja: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transformacja: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformacja: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformacja: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformacja: przetłumaczY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transformacja: translate3d (0, -15vh, 0); } .background.down-scroll + .background: nie (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformacja: translateY (15vh); }
Kod JavaScript
Wreszcie w naszym JavaScript poradzimy sobie, co to jest słuchacz naszych zdarzeń, to znaczy wiedzieć, kiedy użytkownik używa przewijania myszy do przewijania strony internetowej. Oprócz tego wykryjemy używaną przeglądarkę i ustalimy pewne stałe wartości, takie jak czas, jaki musi mieć suwak, zanim będzie można go ponownie zmienić, czułość przewijania i liczbę stron, które będziemy mieć.
var czas = fałsz; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var czułość Scroll = 30; var czas trwaniaSuwaki = 600; var sliderActual = 0; var sliderTotales = $ (". tło"). długość; function parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (czas! = prawda) {if (delta = czułość przewijania) {czas = prawda; if (bieżącySlider! == 0) {bieżącySlider--; } poprzedniPozycja (); durationSliderTime (durationSliders); }}}Na koniec ustalimy czas, w którym obraz musi zostać naprawiony, aby przejść do następnego, a także słuchacze naszych wydarzeń, dodatkowo skorzystamy z funkcji dodawania lub usuwania klasy, aby wiedzieć, kiedy jeden z obrazów jest na dole lub na górze :
function timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = czy Firefox? "DOMMouseScroll": "koło"; window.addEventListener (zdarzenie ScrollMouse, _.throttle (efekt paralaksy, 60), false); function eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass („przewijanie w górę”) addClass („przewijanie w dół”); } function previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass („przewijanie w dół”) addClass („przewijanie w górę”); }Po zakończeniu naszego kodu musimy tylko przetestować działanie naszej aplikacji, w tym celu wystarczy użyć scrolla naszej myszy, aby zobaczyć zachowanie, zobaczmy:
Ten efekt daje całkiem świeże wrażenie na naszych stronach, jednak wskazane jest, aby używać go w niektórych aplikacjach, takich jak portfolio lub strony informacyjne, ponieważ każda inna witryna, która obsługuje inne rodzaje procesów lub informacji, zmęczy użytkownika i straci zainteresowanie nim …
