Web s efektem paralaxy

V současné době máme širokou škálu webových stránek, které mohou implementovat různé designové vzory, které mohou sahat od klasického plochého designu až po inovativní nový Material Design.

Existuje však zcela odlišný a zvláštní způsob vytváření webových stránek, webů, které jsou pouze informativní a nemají příliš komplexní funkce jako takové. V těchto případech můžeme použít jednostránkový web, který efekt implementuje Paralaxa.

Tento efekt nám dává pocit, že máme více rovin a dokonce více stránek v jedné. Podívejme se tedy, jak to můžeme implementovat.

HTML kód

Náš HTML Bude se skládat z poměrně jednoduché struktury složené z div, které budeme identifikovat jako kontejnery podle určitých tříd, kromě toho zahrneme naše šablony stylů obvyklým způsobem, stejně jako naše JavaScript. V tomto případě se budeme spoléhat na obojí jQuery jako Podtržítko.js což je knihovna, která nám poskytuje několik funkcí, které nám s tímto cvičením pomohou:

 Domácí paralaxa
Pád nebes
Film 1
Profesionál
Film 2
Rezervní psi
Film 3

CSS kód

Pro náš list stylů budeme pracovat trochu více, použijeme vlastnosti CSS3 co se týká transformuje abychom dosáhli efektu pohybu nahoru nebo dolů na našich pozadí, kromě toho použijeme podřízené objekty našeho dokumentu k přiřazení různých obrázků na pozadí, které budou sloužit jako naše více stránek, podívejme se na tento fragment našich CSS:

 .background {background-size: cover; opakování na pozadí: neopakování; poloha pozadí: střed středu; přetečení: skryté; will-change: transform; -webkit-backface-visibility: skrytý; viditelnost na zadní straně: skrytá; výška: 130vh; poloha: pevná; šířka: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); -webkit-transition: všechny 1,2 s krychlových-bezier (0,22, 0,44, 0, 1); přechod: všechny 1,2 s krychlových bezier (0,22, 0,44, 0, 1); }. pozadí: před {content: ""; pozice: absolutní; šířka: 100%; výška: 100%; nahoře: 0; vlevo: 0; vpravo: 0; dole: 0; barva pozadí: rgba (0, 0, 0, 0,3); } .background: first-child {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transform: translateY (-15vh); } .background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .background: nth-child (2) {background-image: url (theprofessional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); }. pozadí: n-dítě (1) {z-index: 3; }. pozadí: n-dítě (2) {z-index: 2; }. pozadí: n-dítě (3) {z-index: 1; }

Abychom skončili s naší šablonou stylů, použijeme některé změny v textu, který bude obsažen v každém kontejneru, a také přechod, který každý z nich musí provést podle svitku, který na webu provedeme, což naznačuje, že se pohybujeme nahoru nebo dolů

 .content-wrapper {výška: 100vh; displej: -webkit -box; displej: -webkit -flex; displej: -ms -flexbox; displej: flex; -webkit-box-pack: střed; -webkit-justify-content: center; -ms-flex-pack: střed; justify-content: center; zarovnání textu: střed; -webkit-flex-flow: sloupec nowrap; -ms-flex-flow: sloupec nowrap; flex-flow: column nowrap; barva: #fff; rodina písem: Montserrat; transformace textu: velká písmena; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); will-change: transform; -webkit-backface-visibility: skrytý; viditelnost na zadní straně: skrytá; -webkit-transition: všechny 1,7 s krychlových-bezier (0,22, 0,44, 0, 1); přechod: všechny 1,7 s krychlových-bezier (0,22, 0,44, 0, 1); } .content-title {velikost písma: 12vh; výška řádku: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transformovat: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformovat: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transformovat: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); }

JavaScriptový kód

Konečně v našem JavaScript vyřídíme, jaké jsou posluchač našich událostí, to znamená vědět, kdy uživatel používá k procházení webové stránky posouvání myší. Kromě toho zjistíme použitý prohlížeč a stanovíme některé konstantní hodnoty, jako je doba, kterou musí mít posuvník, než ji lze znovu změnit, citlivost svitku a počet stránek, které budeme mít.

 var time = false; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var citlivost Scroll = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". pozadí"). délka; funkce parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}

Nakonec určíme čas, kdy musí být obrázek fixován, aby šel na další, stejně jako posluchači našich událostí, dále použijeme funkci přidání nebo odebrání třídy, abychom věděli, kdy je jeden z obrázků dole nebo nahoře:

 funkce timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = je Firefox? "DOMMouseScroll": "kolečko"; window.addEventListener (událost ScrollMouse, _.throttle (efekt paralaxy, 60), false); funkce eleNext () {var $ slidePrevious = $ (". pozadí"). eq (currentSlider - 1); $ slideAnterior.removeClass ("posun nahoru"). addClass ("posun dolů"); } funkce previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("down-scroll"). addClass ("up-scroll"); }

Když je náš kód hotový, musíme pouze vyzkoušet fungování naší aplikace, k tomu musíme použít pouze svitek naší myši, abychom viděli chování, podívejme se:

Tento efekt dává našim stránkám docela nový pocit, nicméně je vhodné jej použít v určitých aplikacích, jako jsou portfolia nebo informační stránky, protože jakýkoli jiný web, který zpracovává jiné typy procesů nebo informací, uživatele unaví a ztratí o něj zájem …