Share
I dagens videoopplæring skal jeg vise deg hvordan du lager et "splitt-skjerm" skyveelement (eller brukergrensesnitt, uansett hva du foretrekker å kalle det) ved hjelp av JavaScript. Inspirasjonen til dette kom fra en side på Corsairs hjemmeside; la oss se hvordan vi kan bygge en til våre egne prosjekter.
La oss først ta en titt på en demonstrasjon av hva vi bygger. Se prosjektet på CodePen, eller ta tak i kildefilene fra GitHub.
Så hvordan er dette gjort? Begynn med å bygge to separate paneler i HTML-oppslaget ditt. Jeg har brukt to div elementer med en klasse av panel. Den første har en ekstra klasse av bunn, den andre en ekstra klasse av topp. Hver inneholder en annen div å pakke inn innholdet.
Sett inn innholdet du liker (bilder, overskrifter etc.) i innhold divs.
Med de som er gjort, legg til en ny div, før avslutningen splitview tag for å fungere som et håndtak.
De første viktige stilene vil stable våre to paneler oppå hverandre, og sørg for at de også er væske.
/ * Paneler. * / .splitview posisjon: relative; bredde: 100%; min høyde: 45vw; overløp: skjult; .panel posisjon: absolutt; bredde: 100vw; min høyde: 45vw; overløp: skjult;
Stil hvert enkelt panel-topp og bunn-annerledes, for eksempel å gi dem forskjelligebakgrunnsfarge, og stil innholdet i dem, men du vil. En ting å merke seg er z-indeksen for hver, for å sikre at de stabler i riktig rekkefølge.
.bunn bakgrunnsfarge: rgb (44, 44, 44); z-indeks: 1; .top bakgrunnsfarge: rgb (77, 69, 173); z-indeks: 2;
Vi har nå toppplaten vår helt dekker den under, så la oss eksperimentere ved å redusere bredden:
.topp bakgrunnsfarge: rgb (77, 69, 173); z-indeks: 2; bredde: 50vw;
Du burde finne deg nå har noe slikt, med topppanelet bare når midten (50vw) på siden:
Nå som vi har utarbeidet ting med CSS, la oss slå på JavaScript og se om vi kan animere denne glidende maskeffekten. Vi begynner med å spørre nettleseren til å utføre en funksjon, men bare når DOM har lastet:
Accentsconagua
document.addEventListener ('DOMContentLoaded', funksjon () );Resten av koden vår går innenfor denne funksjonen, mellom de krøllete armbåndene.
Deretter tilordner vi noen variabler ved å hente foreldreelementet, topppanelet (nemlig det eneste vi endrer) og håndtaket.
var parent = document.querySelector ('splitview'), topPanel = parent.querySelector ('. top'), handle = parent.querySelector ('. handle'),Før vi går videre, la oss stilte håndtaket.
/ * Håndter. * /. handle høyde: 100%; posisjon: absolutt; skjerm: blokk; bakgrunnsfarge: rgb (253, 171, 0); bredde: 5px; topp: 0; venstre: 50%; z-indeks: 3;
Det er en 5px bred gul bar, kjører høyden på beholderen og plassert i sentrum av visningsporten. Den har en z-indeks av 3 for å sørge for at den sitter på toppen.
Vi ønsker å ta tak i x-koordinatene til musemarkøren når vi beveger den i visningsporten. Vi vil da flytte håndtaket og sette bredden på topppanelet i henhold til disse koordinatene.
Vi starter med en hendelselytter på foreldreelementet, og deretter angir du venstre stilegenskap til håndtaket som lik den event.clientX verdi.
parent.addEventListener ('mousemove', funksjon (hendelse) // Flytt håndtaket. handle.style.left = event.clientX + 'px';);Det tar vare på vårt bevegelige håndtak, la oss nå endre størrelsen på panelet, igjen gjøre det lik event.clientX.
parent.addEventListener ('mousemove', funksjon (hendelse) // Flytt håndtaket. handle.style.left = event.clientX + 'px'; // Juster toppbreddets bredde. topPanel.style.width = event.clientX + 'px';);Godt gjort for å nå slutten; Med den relativt enkle CSS og JavaScript har vi opprettet en strålende skjermmaskeffekt på skjermen. For å ta det videre, som jeg gjør i videoen, kan vi skjære håndtaket også - se demoen på CodePen for å se hvordan det er oppnådd!
