Skapa effekter med hjälp av glidande klibbiga positionering

0
20

Klibbig elementen är huvudsakligen används för att hålla något som visas på skärmen hela rullning. Så kallt som det är, vi kan också dölja element på samma sätt!

Här är en typisk (um) klibbiga situation:

Se Pennans position:sticky (CSS) av Preethi Sam (@rpsthecoder) på CodePen.

Klibbig elementen (position: klibbiga;) är mycket liknande till fasta element ( position: fixed;) i det att de båda behålla sin position på skärmen, även när användaren förflyttar sig upp eller ner på sidan. Skillnaden? En klibbig del är begränsad till den överordnade behållare. Jämför klibbiga exemplet ovan med detta en som använder sig av samma koncept med ett fast inslag i stället:

Se Pennans position:sticky (CSS) av CSS-Tricks (@css-tricks) på CodePen.

Säg att vi vill skapa en effekt där element antingen glida in eller ur med tanke på bläddra — ungefär som parallax. Till exempel, en header som glider ut och en sidfot som glider i:

Och gissa vad? Vi kan göra det med klibbig elementen!

Se Pennan Glida In och Ut Effekt med hjälp av “position:sticky” av Preethi Sam (@rpsthecoder) på CodePen.

Hur gör vi det? Glad att du frågade. Låt oss bryta ner det.

HTML-setup

Det finns tre klibbig elementen i vårt exempel:

  • Den första är den kategori header som glider under kroppen av artikeln när den når toppen av skärmen.
  • Den andra är titeln på den artikel och det förblir synlig på toppen av skärmen, medan huvuddelen av innehållet försvinner bakom det på bläddra (vilket är den typiska klibbiga element beteende).
  • Den tredje delen är en sidfot som glider ut av artikeln och avslöjas när artikeln är rullas över en viss tröskel.

Låt oss se hur det är gjort. Här är HTML-vi arbetar med… i princip två artiklar:

<artikel>
<div class=”category”>Kategori Header</div>
<h1 class=”title”>Artikel 1 Titel</h1>
<p> > Organ innehåll skulle gå här.</p>
<!– Mer content –>
<div class=”footer”>
<p>Artikel 1 Sidfot</p>
</div>
</article>

<artikel>
<div class=”category”>Kategori Header</div>
<h1 class=”title”>Artikel 2 Titel</h1>
<p> > Organ innehåll skulle gå här.</p>
<!– Mer content –>
<div class=”footer”>
<p>Artikel 2 Sidfot</p>
</div>
</article>

Den klibbiga CSS

.kategori, .titel, och .sidfot element kommer att få position:klibbig, tillsammans med en placering egendom säga där på skärmen de börjar “klibba” vid rullas.

.kategori
.titel
.sidfot {
position: -webkit-klibbig; /* Krävs för Safari */
position: klibbiga;
height: 50px;
}

.kategori {
top: 0;
}

.titel {
top: 0;
}

.sidfot {
botten: 100px;
z-index: -1;
}

Jag gör inte mycket klibbig elementen, utom styling dem. De är redan gör vad de behöver göra: stick till skärmen. Allt som återstår är att skapa ett omslag och en del utrymme för de delar som kommer in och lämnar den sidan rullar.

Det finns förmodligen ett gäng på hur vi kan skapa en cover på den artikel som klibbig elementen kan gå och gömma sig under på en sida — jag gick med en background-image.

artikel {
background-image: linear-gradient(
till botten,
öppet 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
transparent 0
);
margin: auto auto 50px auto;
}

Bakgrunden linjär gradient tillämpas på artikeln och går från toppen till botten, till att börja med 50px av öppenhet och en färgförändring med ett hårt stopp på 50px. Calc-grejer? Det är så jag säger det färg för att fortsätta, men lämna 50px på botten. Sedan går vi öppet igen. Det innebär att vi har två 50px transparenta ränder, en i toppen och en i botten med lika höjder matchande höjder av kategori, rubrik och sidfot.

Kategorin rubrik och artikel sidfot är de element som glider in och ut ur texten, så att deras höjd är de som avgör hur länge de transparenta ränderna kommer att vara i toppen och botten av lutning.

Hur allt detta kommer tillsammans att både kategori rubrik och artikel titel hålla sig till skärmen när deras toppar är i linje med toppen av visningsområdet. Titeln travar på toppen av kategori header och, när det börjar att hålla på toppen av det virtuella, döljer den kategori huvudet helt och hållet.

För sidfot, det är redan fast 100px ovanför botten av skärmen (i artikeln är gränsen), men du kommer inte se det eftersom det är skjuts bakom innehållet med hjälp av z-index:-1. Det kommer att vara synliga när vi rullar förbi början av förra öppen rand av artikel bakgrund.

.sidfot {
botten: 100px;
margin: 50px auto auto auto;
z-index: -1;
}

Eftersom kategorin header är bara innehåll som inte har något att dölja med, men texten i sig, det är en bra idé att ge den sista klibbiga element (i sidfoten) en övre marginal på 50px (för att hålla saker och ting lika) så att du inte ser att det bakom den kategori huvudet medan du bläddrar.

Det är det!

Nu, naturligtvis, du vill göra detta för din egen och ändra det, som mått, antal element, och typ av innehåll. Det viktiga är att skapa de täcker som gör att dina klibbig elementen för att gömma sig bakom och att avslöjas som de passerar genom — igen, förmodligen olika sätt att gå om det, men jag gick med transparenta ränder i en gradient.

Vad som ytterligare ett exempel? Säkert!

Här är ett annat exempel med horisontell rullning (och en horisontell gradient), som kan vara idealisk för att applicera detta begrepp till mobila enheter:

Se Pennan Horisontellt glida in och ut effekt med hjälp av klibbig delarna av Preethi Sam (@rpsthecoder) på CodePen.

Se hur maten blir avslöjade som en artikel lämnar vy och sedan är dolda när nästa artikel går över det?

Samma typ av HTML-setup:

<artikel>
<div class=”title”>Artikel 1 Titel</div>
<p>Artikel innehåll går här.</p>
<img class=”image” src=”/sökväg/till/uppenbarat/bild.png”>
</article>

<artikel>
<div class=”title”>Artikel 2 Titel</div>
<p>Artikel innehåll går här.</p>
<img class=”image” src=”/sökväg/till/uppenbarat/bild.png”>
</article>

Jag ska till min linjär gradient lösningen för att skapa omslag, denna gång från vänster-till-höger-konto för en horisontell rullning:

artikel {
background-image: linear-gradient(
till höger,
öppet 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
transparent 0
);
}

.titel
.bild {
position: klibbiga;
position: -webkit-klibbig,
z-index: -1;
bredd: 50px;
}

.titel {
left: 20px;
margin-right: 52px;
}

.bild {
vänster: 150px;
}

Meddelande om igen att vi är på väg med samma två 50px transparenta ränder som tidigare, den enda skillnaden är att vi tillämpar det på bredden istället för på höjden.

Båda klibbig elementen (titel och bild) kommer att glida under och genom artikel. Så, för att undvika överlappning dem under rulla, titeln blir en högra marginalen som motsvarar bildens bredd, som är 50px (plus en extra 2px för en renare linje i Chrome).

Här är vad som händer: när vi bläddra horisontellt, titeln pinnar 20px från skärmens vänstra kant och bilden pinnar 150px från samma. Eftersom de båda har z-index: -1; de kommer att försvinna under artikel (ja, bakgrunden gradient) — de är dolda när de passerar genom den solida färgen på lutning och uppenbaras genom den transparenta ränder.

OK, ytterligare ett exempel:

Innan inslagning upp, låt mig visa ett till exempel som inspirerade till detta inlägg. Det är en webbplats sidfot, som uppenbarar sig på bläddra. Första gången jag såg denna design på Ryan Seddon s webbplats för länge sedan.

Denna konstruktion görs vanligen med hjälp av ett “fast” footer som har gett för lite utrymme i slutet av sidan för att komma ut, med marginal. Jag tänkte att om fasta element kan göra det för hela sidan, då kanske klibbig elementen kan göra något liknande för enskilda element — och därmed vad jag kom upp med så långt.

Det innebär att vi kan uppnå samma effekt med den klibbiga tekniker som vi har täckt så långt.

För det första, vår HTML:

<main>
<h1>Plats Rubrik</h1>
<p>Webbplatsens innehåll</p>
</main>
<footer>
Webbplatsens Sidfot
</footer>
html {
background-color: #fff;
}

body {
background-image: linear-gradient(
till toppen,
transparent 60 px,
#fff 60 px,
#fff 0
);
}

sidfot {
position: -webkit-klibbig,
position: klibbiga;
bottom: 0;
height: 50px;
padding: 5px 0;
z-index: -1;
}

Se Pennan sidfoten slide-out med “position:sticky” av Preethi Sam (@rpsthecoder) på CodePen.

En sticky footer och bakgrund lutning på kroppen gör susen.