Opprette skyve effekter ved bruk av sticky lokalisering

0
29

Klebrig elementer er hovedsakelig brukt for å holde noe som vises på skjermen hele å rulle. Så kult som det er, vi kan også skjule elementer på samme måte!

Her er en typisk (um) klebrig situasjon:

Se Pen posisjon:klebrig (CSS) av Preethi Sam (@rpsthecoder) på CodePen.

Klebrig elementer (posisjon: klebrig;) er veldig like faste elementer ( position: fixed;) i at de begge opprettholde sin posisjon på skjermen, selv når brukeren ruller opp eller ned på siden. Forskjellen? En klebrig elementet være begrenset til den overordnede beholderen det er i. Sammenlign klebrig eksempelet over med dette, som bruker samme konseptet ved å bruke et fast element i stedet:

Se Pen posisjon:klebrig (CSS) av CSS-Triks (@css-triks) på CodePen.

Si at vi ønsker å skape en effekt der elementer enten dra i eller ut av syn på bla — liksom som parallax. For eksempel, en overskrift som glir ut og en bunntekst som lysbilder i:

Vel, gjett hva? Vi kan gjøre det med klebrig elementer!

Se Pennen Gli Inn og Ut Effekten ved bruk av “- posisjon:sticky” av Preethi Sam (@rpsthecoder) på CodePen.

Hvordan gjør vi det? Glad du spurte. La oss bryte det ned.

HTML-oppsett

Det er tre klebrig elementer i vårt eksempel:

  • Den første er den kategorien topptekst som glir under kroppen av artikkelen når den når toppen av skjermen.
  • Den andre er tittelen på artikkelen, og det forblir synlig på toppen av skjermen, mens kroppen av innholdet forsvinner bak det på rull (som er den typiske klebrig element atferd).
  • Det tredje elementet er en footer som glir ut av artikkelen, og er åpenbart når artikkelen er rullet over en viss terskel.

La oss se hvordan det er gjort. Her er HTML-vi arbeider med… i utgangspunktet to artikler:

<artikkel>
<div class=”category”>Kategorien Topptekst</div>
<h1 class=”title”>Artikkel 1 Tittel</h1>
<p>Kroppen innhold ville gå hit.</p>
<!– Mer innhold –>
<div class=”footer”>
<p>Artikkel 1 Bunntekst</p>
</div>
</article>

<artikkel>
<div class=”category”>Kategorien Topptekst</div>
<h1 class=”title”>Artikkel 2 Tittel</h1>
<p>Kroppen innhold ville gå hit.</p>
<!– Mer innhold –>
<div class=”footer”>
<p>Artikkel 2 Bunntekst</p>
</div>
</article>

Sticky CSS

.kategori .tittel, og .bunntekst elementer vil komme i posisjon:klebrig, sammen med en plassering eiendom si hvor på skjermen vil de begynne å “stikke” når den rulles.

.kategori
.tittel
.bunntekst {
posisjon: -webkit-klissete; /* Påkrevd for Safari */
posisjon: klebrig;
høyde: 50px;
}

.kategorien {
øverst: 0;
}

.tittel {
øverst: 0;
}

.bunntekst {
nederst: 100px;
z-index: -1;
}

Jeg gjør ikke mye for å klebrig elementer, bortsett fra styling til dem. De er allerede å gjøre hva de trenger å gjøre: klistret til skjermen. Alt som gjenstår er å lage en cover og noen plass for elementer for å komme i, og la så ruller siden.

Det er trolig en haug av måter vi kan lage en cover på artikkelen, og som klebrig elementer kan gå og gjemme seg under på en side — jeg gikk med et bakgrunnsbilde.

artikkelen {
background-image: linear-gradient(
til bunn,
gjennomsiktig 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
gjennomsiktig 0
);
margin: auto auto 50px auto;
}

Bakgrunnen lineær gradient brukes til artikkelen og går fra topp til bunn, fra og med 50px av åpenhet og en fargeendring med en hard stopper på 50px. Calc ting? Det er hvordan jeg forteller farge for å fortsette, men la 50px nederst. Så går vi gjennomsiktig igjen. Det betyr at vi har to 50px transparente striper, en øverst og en nederst med like høyder matchende høyder av kategorien overskriften og bunntekst.

Kategorien topptekst og artikkelen bunntekst er de elementene som glir inn og ut av tekst, slik at deres høyder er de som bestemmer hvor lenge den transparente striper vil være på toppen og bunnen av fargeovergangen.

Hvordan alt dette kommer sammen er det både den kategorien topptekst og artikkel-tittel klistret til skjermen når deres topper kant i kant med toppen av vinduet. Tittelen stabler på toppen av kategorien topptekst og, når det begynner å stikke på toppen av vinduet, skjuler kategorien topptekst helt.

Som for bunntekst, det er allerede fast 100px over bunnen av skjermen (i artikkelen er grensen), men du vil ikke se det, siden det er skjøvet bak innholdet ved hjelp av z-index:-1. Det vil være synlig når vi blar forbi begynnelsen av forrige gjennomsiktig stripe av artikkelen bakgrunn.

.bunntekst {
nederst: 100px;
margin: 50px auto auto auto;
z-index: -1;
}

Fordi kategorien topptekst er bare innhold med ingenting å skjule, men selve teksten, er det en god idé å gi den siste klebrig element (bunntekst) en topp-margin på 50px (for å holde ting er lik), slik at du ikke se det bak kategorien topptekst mens du blar.

Det er det!

Nå, selvfølgelig, vil du ønsker å gjøre dette til din egen, og du kan endre den, som dimensjoner, antall elementer, og type innhold. Nøkkelen er å skape de dekker at din klebrig elementer for å skjule seg bak og bli avslørt som de passerer gjennom — igjen, sannsynligvis forskjellige måter å gå om det, men jeg gikk med transparente striper i en gradient.

Hva annet eksempel? Sikker!

Her er et annet eksempel med horisontal rulling (og horisontale gradient), som kan være ideell for å legge dette konseptet til mobile enheter:

Se Pen Horisontal skyv inn-og ut-effekt ved hjelp av klebrig elementer av Preethi Sam (@rpsthecoder) på CodePen.

Se hvordan maten blir avslørt som en artikkel etterlater viewport og da er skjult når den neste artikkelen passerer over det?

Samme slags HTML-oppsett:

<artikkel>
<div class=”title”>Artikkel 1 Tittel</div>
<p>Artikkel innhold går her.</p>
<img class=”image” src=”/sti/til/avslørte/bilde.png”>
</article>

<artikkel>
<div class=”title”>Artikkel 2 Tittel</div>
<p>Artikkel innhold går her.</p>
<img class=”image” src=”/sti/til/avslørte/bilde.png”>
</article>

Jeg kommer til min lineær gradient løsning for å lage den dekker, denne gangen går fra venstre-til-høyre-til konto til en horisontal rulling:

artikkelen {
background-image: linear-gradient(
til høyre,
gjennomsiktig 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
gjennomsiktig 0
);
}

.tittel
.bildet {
posisjon: klebrig;
posisjon: -webkit-klissete;
z-index: -1;
bredde: 50px;
}

.tittel {
venstre: 20 piksler;
margin-right: 52px;
}

.bildet {
venstre: 150px;
}

Merker igjen at vi kommer med de samme to 50px transparente striper som før, den eneste forskjellen er at vi bruker det til bredden i stedet for i høyden.

Både av klebrig elementer (tittel og bilde) vil skyve under og gjennom artikkelen. Så, for å unngå overlappende dem under bla, tittelen får en høyre marg som er lik bildets bredde, som er 50px (pluss en ekstra 2px for en renere linje i Chrome).

Her er hva som skjer: når vi blar horisontalt, tittelen pinner 20 piksler fra skjermen til venstre og bilde pinner 150px fra den samme. Fordi de begge har z-index: -1; de vil forsvinne under artikkelen (vel, bakgrunnen gradient) — de er skjult når de passerer gjennom solid farge gradient og er åpenbart av den transparente striper.

OK, ett eksempel

Før innpakning opp, la meg vise deg ett eksempel som inspirerte til dette innlegget. Det er et nettsted bunntekst som åpenbarer seg på bla. Første gang jeg så dette design på Ryan Seddon hjemmeside for lenge siden.

Dette design er vanligvis gjort ved hjelp av en “fast” bunntekst som gir noen plass ved slutten av siden for å komme ut til, ved hjelp av margin. Jeg tenkte at hvis faste elementer kan gjøre det for hele siden, så kanskje klebrig elementer som kan gjøre noe lignende for enkelte elementer, og dermed hva jeg kom opp med så langt.

Følgelig kan vi oppnå den samme effekten ved hjelp av sticky teknikker vi har dekket så langt.

Først vår HTML:

<main>
<h1> – Området Tittel</h1>
<p>innhold</p>
</main>
<footer>
Sidens Bunntekst
</footer>
html {
background-color: #fff;
}

body {
background-image: linear-gradient(
til toppen
gjennomsiktig 60 piksler,
#fff 60 piksler,
#fff 0
);
}

bunntekst {
posisjon: -webkit-klissete;
posisjon: klebrig;
nederst: 0;
høyde: 50px;
padding: 5px 0;
z-index: -1;
}

Se Penn bunntekst på Side skyves ut ved hjelp av “- posisjon:sticky” av Preethi Sam (@rpsthecoder) på CodePen.

En klebrig bunntekst bakgrunn og gradient på kroppen gjør susen.