Parallaxeffektwebbplats

Vi har för närvarande en mängd olika webbsidor som kan implementera olika designmönster, som kan sträcka sig från en klassisk platt design eller den innovativa nya Material Design.

Men det finns ett helt annat och märkligt sätt att skapa webbplatser, webbplatser som bara är informativa och inte har en mycket komplex funktionalitet som sådan. För dessa fall kan vi använda en enda sida som implementerar effekten Parallax.

Denna effekt ger oss en känsla av att vi har flera plan och till och med flera sidor på en. Låt oss se hur vi kan genomföra det.

HTML -kod

Vår HTML Den kommer att bestå av en ganska enkel struktur, sammansatt av div som vi kommer att identifiera som behållare enligt vissa klasser, utöver detta kommer vi att inkludera våra stilark på vanligt sätt, liksom våra JavaScript. För detta exempel kommer vi att förlita oss på båda jQuery tycka om Underscore.js vilket är ett bibliotek som ger oss flera funktioner som hjälper oss med denna övning:

 Hem Parallax
Skyfall
Film 1
Den professionella
Film 2
Reservoarhundar
Film 3

CSS -kod

För vårt stilark kommer vi att arbeta lite mer vi kommer att använda egenskaperna för CSS3 när det gäller förvandlar för att ge effekten av att flytta upp eller ner i vår bakgrund, utöver detta kommer vi att använda barnen i vårt dokument för att tilldela olika bakgrundsbilder som kommer att fungera som våra flera sidor, låt oss se detta fragment av våra CSS:

 .bakgrund {bakgrundsstorlek: omslag; bakgrund-upprepa: ingen upprepning; bakgrundsposition: mitten mitt; överflöd: dold; vilja-förändring: transformera; -webkit-backface-synlighet: dold; baksida-synlighet: dold; höjd: 130vh; position: fast; bredd: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transform: translateY (30vh); -webkit-övergång: alla 1,2s cubic-bezier (0,22, 0,44, 0, 1); övergång: alla 1,2s cubic-bezier (0,22, 0,44, 0, 1); } .bakgrund: före {content: ""; position: absolut; bredd: 100%; höjd: 100%; topp: 0; vänster: 0; höger: 0; botten: 0; bakgrundsfärg: rgba (0, 0, 0, 0.3); } .bakgrund: första barnet {bakgrundsbild: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transform: translateY (-15vh); } .bakgrund: första-barn .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .bakgrund: nth-barn (2) {bakgrundsbild: url (theprofessional.jpg.webp); } .bakgrund: nth-barn (3) {bakgrundsbild: url (reservoirdogs.png.webp); } .bakgrund: nth-barn (1) {z-index: 3; } .bakgrund: nth-barn (2) {z-index: 2; } .bakgrund: nth-barn (3) {z-index: 1; }

För att avsluta med vårt stilark kommer vi att tillämpa några ändringar på texten som kommer att ingå i varje behållare, liksom övergången som var och en av dessa måste göra enligt rullningen som vi gör till webbplatsen, vilket indikerar om vi går uppåt eller ner

 .content-wrapper {höjd: 100vh; display: -webkit -box; display: -webkit -flex; display: -ms -flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-flöde: spalt nowrap; -ms-flex-flow: kolumn nurap; flex-flow: kolumn nurap; färg: #fff; font-family: Montserrat; text-transform: versaler; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transform: translateY (40vh); vilja-förändring: transformera; -webkit-backface-synlighet: dold; baksida-synlighet: dold; -webkit-övergång: alla 1,7s cubic-bezier (0,22, 0,44, 0, 1); övergång: alla 1,7s cubic-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; linjehöjd: 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); transform: 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); transform: 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); transform: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); }

JavaScript -kod

Äntligen i vår JavaScript vi kommer att hantera vad som är lyssnare av våra händelser, det vill säga att veta när användaren använder musrullen för att rulla igenom webbsidan. Utöver detta kommer vi att upptäcka den webbläsare som används och fastställa några konstanta värden, till exempel varaktigheten som ett reglage måste ha innan det kan ändras igen, rullningens känslighet och antalet sidor som vi kommer att ha.

 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 känslighet Scroll = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". bakgrund"). längd; funktion parallaxeffekt (evt) {if (esFirefox) {delta = evt.detail * (-120); } annars om (esInternetE) {delta = -evt.deltaY; } annat {delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } föregående artikel (); durationSliderTime (durationSliders); }}}

Slutligen ska vi fastställa den tid då bilden måste fixas för att gå till nästa, liksom lyssnare till våra händelser, dessutom kommer vi att använda funktionen att lägga till eller ta bort klass för att veta när en av bilderna är längst ner eller upptill:

 function timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = är Firefox? "DOMMouseScroll": "hjul"; window.addEventListener (ScrollMouse -händelse, _.throttle (Parallax -effekt, 60), false); funktion eleNext () {var $ slidePrevious = $ (". bakgrund"). eq (currentSlider - 1); $ slideAnterior.removeClass ("upp-rullning"). addClass ("ned-rullning"); } funktionen previousItem () {var $ slideSig = $ (". bakgrund"). eq (currentSlider); $ slideSig.removeClass ("nedrullning"). addClass ("upprullning"); }

När vår kod är klar behöver vi bara testa hur vår applikation fungerar, för detta behöver vi bara använda musens rullning för att se beteendet, låt oss se:

Denna effekt ger en ganska fräsch känsla för våra webbplatser, men det är lämpligt att använda den i vissa applikationer som portföljer eller informationssidor, eftersom alla andra webbplatser som hanterar andra typer av processer eller information kommer att göra användaren trött och tappa intresset för den …