Inhoudsopgave
We hebben momenteel een grote verscheidenheid aan webpagina's, die verschillende ontwerppatronen kunnen implementeren, die kunnen variëren van een klassiek plat ontwerp of het innovatieve nieuwe materiaalontwerp.
Maar er is een heel andere en eigenaardige manier om websites te maken, websites die louter informatief zijn en op zich niet zo'n complexe functionaliteit hebben. Voor deze gevallen kunnen we een website van één pagina gebruiken die het effect implementeert Parallax.
Dit effect geeft ons het gevoel dat we meerdere vlakken en zelfs meerdere pagina's in één hebben. Laten we dan kijken hoe we het kunnen implementeren.
HTML code
Ons HTML Het zal bestaan uit een vrij eenvoudige structuur, bestaande uit div die we zullen identificeren als containers volgens bepaalde klassen, daarnaast zullen we onze stijlbladen op de gebruikelijke manier opnemen, evenals onze JavaScript. Voor dit voorbeeld zullen we vertrouwen op beide jQuery Leuk vinden Underscore.js dat is een bibliotheek die ons verschillende functionaliteiten biedt die ons bij deze oefening zullen helpen:
Home ParallaxSkyfall
Film 1
De professional
Film 2
Reservoir honden
Film 3
CSS-code
Voor onze stylesheet zullen we wat meer werken, we zullen de eigenschappen gebruiken van CSS3 met betrekking tot transformeert om het effect te geven van het omhoog of omlaag bewegen van onze achtergronden, daarnaast zullen we de kinderen van ons document gebruiken om verschillende achtergrondafbeeldingen toe te wijzen die zullen dienen als onze meerdere pagina's, laten we dit fragment van onze CSS:
.achtergrond {achtergrondformaat: omslag; achtergrondherhaling: geen herhaling; achtergrondpositie: midden midden; overloop verborgen; wil veranderen: transformeren; -webkit-backface-visibility: verborgen; backface-zichtbaarheid: verborgen; hoogte: 130vh; positie: vast; breedte: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformeren: translateY (30vh); -webkit-overgang: alle 1,2s kubieke bezier (0,22, 0,44, 0, 1); overgang: alle 1,2s kubieke-bezier (0,22, 0,44, 0, 1); } .achtergrond: voor {inhoud: ""; positie: absoluut; breedte: 100%; hoogte: 100%; boven: 0; links: 0; rechts: 0; onder: 0; achtergrondkleur: rgba (0, 0, 0, 0.3); } .achtergrond: eerste kind {achtergrondafbeelding: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transformeren: translateY (-15vh); } .background: eerste-kind .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformeren: translateY (15vh); } .background: nth-child (2) {background-image: url (theprofessional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); } .achtergrond: n-de-kind (1) {z-index: 3; } .achtergrond: n-de-kind (2) {z-index: 2; } .achtergrond: n-de-kind (3) {z-index: 1; }Om af te sluiten met ons stijlblad zullen we enkele wijzigingen aanbrengen in de tekst die in elke container zal worden opgenomen, evenals de overgang die elk van deze moet maken volgens de scroll die we naar de website maken, om aan te geven of we naar boven gaan of naar beneden
.content-wrapper {hoogte: 100vh; weergave: -webkit-box; weergave: -webkit-flex; weergave: -ms-flexbox; weergave: flexibel; -webkit-box-pack: centrum; -webkit-justify-content: centrum; -ms-flex-pack: midden; rechtvaardigen-inhoud: centrum; tekst uitlijnen: midden; -webkit-flex-flow: kolom nowrap; -ms-flex-flow: kolom nowrap; flex-flow: kolom nowrap; kleur: #fff; font-familie: Montserrat; teksttransformatie: hoofdletters; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformeren: translateY (40vh); wil veranderen: transformeren; -webkit-backface-visibility: verborgen; backface-zichtbaarheid: verborgen; -webkit-overgang: alle 1,7s kubieke bezier (0,22, 0,44, 0, 1); overgang: alle 1,7s kubieke bezier (0,22, 0,44, 0, 1); } .content-title {lettergrootte: 12vh; lijnhoogte: 1.4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transformeren: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformeren: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transformeren: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformeren: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transformeren: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformeren: translateY (40vh); } .background.down-scroll + .background: niet (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transformeren: translate3d (0, -15vh, 0); } .background.down-scroll + .background: niet (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformeren: translateY (15vh); }
JavaScript-code
Eindelijk in onze JavaScript we zullen omgaan met wat zijn de luisteraar van onze evenementen, dat wil zeggen, om te weten wanneer de gebruiker de muis gebruikt om door de webpagina te scrollen. Daarnaast zullen we de gebruikte browser detecteren en enkele constante waarden vaststellen, zoals de duur die een schuifregelaar moet hebben voordat deze weer kan worden gewijzigd, de gevoeligheid van de scroll en het aantal pagina's dat we zullen hebben.
var tijd = onwaar; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var gevoeligheid Scroll = 30; var duurSliders = 600; var sliderActual = 0; var sliderTotales = $ (". achtergrond"). lengte; functie 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--; } vorig item (); durationSliderTime (durationSliders); }}}Ten slotte gaan we de tijd vaststellen dat de afbeelding moet worden hersteld om naar de volgende te gaan, evenals de luisteraars van onze evenementen, bovendien zullen we de functie van het toevoegen of verwijderen van klasse gebruiken om te weten wanneer een van de afbeeldingen is onderaan of bovenaan:
functie timeSliderDuration (slideDuration) {setTimeout (functie () {time = false;}, slideDuration); } var eventScrollMouse = is Firefox? "DOMMouseScroll": "wiel"; window.addEventListener (ScrollMouse-gebeurtenis, _.throttle (Parallax-effect, 60), false); functie eleNext () {var $ slidePrevious = $ (". background") eq (currentSlider - 1); $ slideAnterior.removeClass ("omhoog scrollen") addClass ("omlaag scrollen"); } function previousItem () {var $ slideSig = $ (". background").eq (currentSlider); $ slideSig.removeClass ("down-scroll") addClass ("up-scroll"); }Nu onze code is voltooid, hoeven we alleen de werking van onze applicatie te testen, hiervoor hoeven we alleen de scroll van onze muis te gebruiken om het gedrag te zien, laten we eens kijken:
Dit effect geeft een vrij fris gevoel aan onze sites, maar het is raadzaam om het in bepaalde toepassingen te gebruiken, zoals portfolio's of informatiepagina's, aangezien elke andere website die andere soorten processen of informatie afhandelt, de gebruiker vermoeid zal maken en de interesse erin zal verliezen .
