Het maken van schuifdeuren effecten met behulp van kleverige positionering

0
32

Sticky elementen worden voornamelijk gebruikt voor het houden van iets op het scherm weergegeven tijdens het scrollen. Zo cool als dat is, wij verbergen van elementen op dezelfde manier!

Hier is een typisch (um) kleverige situatie:

Zie de Pen position:sticky (CSS) van Preethi Sam (@rpsthecoder) op CodePen.

Sticky elementen (position: sticky;) zijn zeer vergelijkbaar met de vaste elementen ( position: fixed;) in dat zij zowel het behoud van hun positie op het scherm, zelfs als de gebruiker scrollt omhoog of omlaag op de pagina. Het verschil? Een sticky element blijft beperkt tot de bovenliggende container. Vergelijk sticky bovenstaande voorbeeld met deze die gebruikt hetzelfde concept met behulp van een vast element in de plaats:

Zie de Pen position:sticky (CSS) van CSS-Tricks (@css-tricks) op CodePen.

Zeggen dat we willen om meer effect te creëren waarin elementen van beide dia in of uit het zicht op bladeren, een beetje zoals de website van parallax. Bijvoorbeeld, een kop die uit dia ‘s en een voettekst die dia’ s in:

Nou, wat denk je? We kunnen dat doen met kleverige elementen!

Zie de Pen Schuift In en Uit Effect met “position:sticky” door Preethi Sam (@rpsthecoder) op CodePen.

Hoe doen we dat? Blij dat je het vraagt. Laten we het af te breken.

HTML-setup

Er zijn drie sticky elementen in ons voorbeeld:

  • De eerste is de categorie header die platen onder het lichaam van het artikel als het eenmaal bereikt de top van het scherm.
  • De tweede is de titel van het artikel en het blijft zichtbaar op de bovenkant van het scherm, terwijl het lichaam van de inhoud verdwijnt achter op scroll (dat is de typische sticky element gedrag).
  • Het derde element is een voettekst die dia ‘ s uit het artikel wordt duidelijk wanneer het artikel wordt geschoven boven een bepaalde drempel.

Laten we eens kijken hoe het is gedaan. Hier is de HTML-we werken samen met… in principe twee artikelen:

<artikel>
<div class=”categorie”>Categorie Header</div>
<h1 class=”title”>Artikel 1 Titel</h1>
<p>Inhoud inhoud zou gaan.</p>
<!– Meer inhoud –>
<div class=”footer”>
<p>Artikel 1 Voettekst</p>
</div>
</article>

<artikel>
<div class=”categorie”>Categorie Header</div>
<h1 class=”title”>Artikel 2, Titel</h1>
<p>Inhoud inhoud zou gaan.</p>
<!– Meer inhoud –>
<div class=”footer”>
<p>Artikel 2 Voettekst</p>
</div>
</article>

De kleverige CSS

Het .categorie .titel, en .footer elementen krijgt position:sticky; samen met een plaatsing van de goederen te zeggen waar op het scherm zullen ze beginnen te “plakken” bij het scrollen.

.categorie
.titel
.footer {
positie: -webkit-sticky; /* Vereist voor Safari */
position: sticky;
hoogte: 50px;
}

.categorie {
top: 0;
}

.titel {
top: 0;
}

.footer {
bodem: 100px;
z-index: -1;
}

Ik ben niet veel gedaan, naar de kleverige elementen, met uitzondering van styling. Ze doen al wat ze moeten doen: vasthouden aan het scherm. Alles wat overblijft is het creëren van een cover en wat ruimte voor de elementen om te komen in en laat als de pagina beweegt.

Er zijn waarschijnlijk een aantal manieren kunnen we een omslag maken over het artikel dat kleverige elementen kan passeren en verbergen onder op een pagina — ging ik met een achtergrond-afbeelding.

artikel {
background-image: linear-gradient(
naar beneden,
transparante 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
transparante 0
);
margin: auto auto 50px auto;
}

De achtergrond lineair verloop is toegepast op het artikel en loopt van boven naar beneden, te beginnen met 50px van transparantie en een verandering van kleur met een harde stop aan 50px. De calc-spullen? Dat is hoe ik ben het vertellen van de kleur om door te gaan, maar laat 50px aan de onderkant. Dan gaan we weer transparant. Dat betekent dat we twee 50px transparante strepen, één aan de bovenkant en één aan de onderkant met gelijke hoogten afstemmen van de hoogte van de categorie kop-en voettekst.

De categorie met kop en het artikel voettekst zijn de elementen die schuif in en uit de tekst, zodat hun hoogten zijn degenen die bepalen hoe lang de transparante strepen aan de boven-en onderkant van het verloop.

Hoe dit allemaal bij elkaar komt is dat zowel de categorie header en de titel van het artikel stick op het scherm wanneer de bovenkant lijnt met de bovenkant van de viewport. De titel stapels op de top van de categorie header en, wanneer het begint te steken op de top van de viewport, verbergt de categorie header helemaal.

Als voor de voet, het is al vast 100px boven de onderkant van het scherm (in het artikel de grens), maar dan zie je het niet omdat het gedrukt achter de inhoud met behulp van z-index:-1. Het zal zichtbaar zijn zodra we schuiven voorbij het begin van de vorige transparante streep van het artikel de achtergrond.

.footer {
bodem: 100px;
margin: 50px auto auto auto;
z-index: -1;
}

Omdat de categorie header is alleen de inhoud met niets te verbergen, maar de tekst zelf, het is een goed idee te geven van de laatste sticky element (de voettekst) een marge aan de bovenkant van 50px (blijft gelijk) dus die zie je niet achter de categorie header tijdens het scrollen.

Dat is het!

Nu, natuurlijk, zult u willen dit uw eigen en veranderen, zoals de afmetingen, het aantal van de elementen, en het type van de inhoud. De sleutel is om te maken die betrekking waarmee je sticky-elementen te verbergen achter en worden onthuld als ze door — opnieuw, waarschijnlijk verschillende manieren om te gaan over dat, maar ik ging met transparante strepen in kleurverloop.

Wat een ander voorbeeld? Zeker!

Hier is een ander voorbeeld met horizontaal scrollen (en een horizontaal verloop), dat zou ideaal zijn voor de toepassing van dit concept op mobiele apparaten:

Zie de Pen Horizontaal schuiven in en uit effect met behulp van kleverige elementen door Preethi Sam (@rpsthecoder) op CodePen.

Zie hoe het voedsel wordt geopenbaard als één artikel laat de viewport en dan is verborgen wanneer het volgende artikel gaat over het?

Dezelfde soort van HTML-instelling:

<artikel>
<div class=”title”>Artikel 1 Titel</div>
<p>inhoud van het Artikel gaat het hier.</p>
<img class=”image” src=”/pad/naar/bleek/afbeelding.png”>
</article>

<artikel>
<div class=”title”>Artikel 2, Titel</div>
<p>inhoud van het Artikel gaat het hier.</p>
<img class=”image” src=”/pad/naar/bleek/afbeelding.png”>
</article>

Ik ga mijn lineair verloop oplossing voor het maken van de covers, dit keer van links naar rechts om rekening te houden met een horizontaal scrollen:

artikel {
background-image: linear-gradient(
naar rechts,
transparante 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
transparante 0
);
}

.titel
.afbeelding {
position: sticky;
positie: -webkit-sticky;
z-index: -1;
breedte: 50px;
}

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

.afbeelding {
links: 150px;
}

Merk op dat we er met dezelfde twee 50px transparante strepen — het enige verschil is dat we deze toe te passen in de breedte in plaats van de hoogte.

Zowel de lastige elementen (de titel en afbeelding) schuift onder het artikel. Dus, om overlappingen te vermijden tijdens het scrollen, de titel krijgt een rechtermarge dat is gelijk aan het beeld van de breedte, dat is 50px (plus een extra 2px voor een schonere lijn in Chrome).

Hier is wat er aan de hand: als we schuiven horizontaal, de titel sticks 20px van het scherm links van de rand en de afbeelding sticks 150px van hetzelfde. Omdat ze beide hebben z-index: -1;, zullen ze verdwijnen onder het artikel (en het verloop) — ze zijn verborgen als ze door de effen kleur van de gradiënt en zijn onthuld door de transparante strepen.

OK, nog een voorbeeld

Voor het inpakken, laat me je een voorbeeld dat inspireerde tot deze post. Het is een voettekst van de site die zich openbaart op ga. Ik zag dit voor het eerst ontwerp op Ryan Seddon de website van een lange tijd geleden.

Dit ontwerp wordt meestal gedaan met behulp van een “vaste” footer gegeven van wat ruimte aan het einde van de pagina om uit te komen, door gebruik te maken van de marge. Ik dacht dat als de vaste elementen kan doen die voor de hele pagina, dan is het misschien sticky elementen kan iets soortgelijks doen voor afzonderlijke elementen — en dus wat ik kwam met zo ver.

Bijgevolg, kunnen we dit bereiken hetzelfde effect met de sticky technieken die we tot dusver hebben besproken.

Ten eerste, onze HTML-code:

<main>
<h1>Website Titel</h1>
<p>de inhoud van de Site</p>
</main>
<footer>
Voettekst Van De Site
</footer>
html {
background-color: #fff;
}

body {
background-image: linear-gradient(
naar boven
transparante 60px,
#fff 60px,
#fff 0
);
}

footer {
positie: -webkit-sticky;
position: sticky;
bottom: 0;
hoogte: 50px;
padding: 5px 0;
z-index: -1;
}

Zie de Pen Pagina voet tekst slide-out met “position:sticky” door Preethi Sam (@rpsthecoder) op CodePen.

Een sticky footer en achtergrond gradient op het lichaam doet de truc.