Erstellen sliding-Effekte mit klebrig Positionierung

0
37

Sticky-Elemente werden vorwiegend für die Aufbewahrung von etwas auf dem Bildschirm angezeigt, während das Blättern. So cool wie das ist, wir können auch ausblenden, die Elemente in der gleichen Weise!

Hier ist eine typische (um -) klebrige situation:

Finden Sie die Stift-position:sticky (CSS) von Preethi Sam (@rpsthecoder) auf CodePen.

Sticky-Elemente (position: sticky;) sind sehr ähnlich zu feststehenden Elementen ( position: fixed;), dass Sie beide behalten Ihre position auf dem Bildschirm, selbst als der Benutzer führt einen Bildlauf nach oben oder unten auf der Seite. Der Unterschied ist? Ein sticky-element bleibt auf den Eltern-container. Vergleichen Sie klebrig obigen Beispiel, verwendet das gleiche Konzept mit einem festen element statt:

Finden Sie die Stift-position:sticky (CSS) CSS-Tricks (@css-tricks) auf CodePen.

Sagen wir, wir möchten einen Effekt zu erstellen, wobei die Elemente entweder schieben oder verkleinern der Ansicht auf Blättern — in der Art, wie parallax. Zum Beispiel einen header, Dias-und eine Fußzeile, die Folien:

Gut, erraten, was? Wir können mit der sticky-Elemente!

Finden Sie die Pen-Folie In-und Out-Effekt mit “position:sticky” von Preethi Sam (@rpsthecoder) auf CodePen.

Wie machen wir das? Sie bat froh. Lassen Sie uns es brechen.

HTML-setup

Es gibt drei sticky-Elemente in unserem Beispiel:

  • Die erste ist die Kategorie-header, die Folien unter dem Körper des Artikels, sobald es erreicht den oberen Rand des Bildschirms.
  • Die zweite ist der Titel des Artikels und es bleibt sichtbar oben auf dem Bildschirm, während der Körper der Inhalt verschwindet hinter ihm auf Blättern (was ist das typische sticky element Verhalten).
  • Das Dritte element ist eine Fußzeile, die Folien aus dem Artikel und wird enthüllt, wenn der Artikel wird gerollt über einem bestimmten Schwellenwert.

Mal sehen, wie es gemacht wird. Hier die HTML-Ausgabe, mit der wir arbeiten… im wesentlichen zwei Artikel:

<Artikel>
<div class=”Kategorie”>Kategorie-Header</div>
<h1 class=”title”>Artikel 1 Titel</h1>
<p>der Inhalt würde hier.</p>
<!– Weitere Inhalte –>
<div class=”footer”>
<p>Artikel 1-Fußzeile</p>
</div>
</article>

<Artikel>
<div class=”Kategorie”>Kategorie-Header</div>
<h1 class=”title”>Artikel 2-Titel</h1>
<p>der Inhalt würde hier.</p>
<!– Weitere Inhalte –>
<div class=”footer”>
<p>Artikel 2-Fußzeile</p>
</div>
</article>

Die klebrige CSS

Die .Kategorie .Titel, und .Fußzeile Elemente erhalten position:sticky; zusammen mit einer Position-Eigenschaft sagen, wo auf dem Bildschirm Sie ‘ ll start “kleben”, wenn gescrollt werden.

.Kategorie
.Titel,
.footer {
position: -webkit-klebrig; /* Erforderlich für Safari */
position: sticky;
height: 50px;
}

.Kategorie {
top: 0;
}

.Titel {
top: 0;
}

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

Ich bin nicht viel zu tun, um die klebrige Elemente, außer styling. Sie sind bereits tun, was Sie tun müssen: halten Sie den Bildschirm. Alles, was übrig ist, erstellen Sie eine Abdeckung und Platz für einige Elemente kommen und gehen, wie die Seite scrollt.

Es gibt wohl eine Reihe von Möglichkeiten, erstellen Sie eine Abdeckung auf die Artikel, die klebrige Elemente übergeben können, und verstecken sich unter auf einer Seite, ich ging mit einem hintergrund-Bild.

article {
background-image: linear-gradient(
nach unten,
transparente 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
transparent 0
);
margin: auto auto 50px auto;
}

Der hintergrund linear Farbverlauf angewendet wird, um die Artikel und verläuft von oben nach unten, beginnend mit 50px von Transparenz und Farbe ändern, mit einem harten Anschlag auf 50px. Die calc-Zeug? Das ist, wie ich sage die Farbe, auch weiterhin, aber lassen 50px an der Unterseite. Dann gehen wir wieder transparent. Das heißt, wir haben zwei 50px transparenten Streifen, eine oben und eine an der Unterseite mit gleichen Höhen passend zu den Höhen der Kategorie überschrift und die Fußzeile.

Die überschrift einer Kategorie, und der Artikel Fußzeile sind die Elemente, die Folie in die und aus der der text, so Ihre Höhen sind diejenigen, die bestimmen, wie lange die transparenten Streifen werden am oberen und unteren Rand des Gradienten.

Wie dies alles zusammen kommt, ist, dass sowohl die Kategorie-header und Titel des Artikels-stick auf dem Bildschirm, wenn Sie Ihren tops ausrichten mit der Spitze des Arbeitsbereichs. Der Titel stapeln oben auf die Kategorie-header und, wenn es anfängt zu kleben am oberen Rand des Viewports, verbirgt sich die Kategorie-header insgesamt.

Als für den footer, es ist bereits fest 100px über dem unteren Rand des Bildschirms (innerhalb des Artikels die Grenze), aber Sie werden nicht sehen, denn Sie schob hinter sich die Inhalte mit z-index:-1. Es wird sichtbar sein, sobald wir die schriftrolle hinter den Anfang der letzten transparenten Streifen-der Artikel ist hintergrund.

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

Weil die Kategorie-header wird nur der content mit nichts zu verbergen, aber mit dem text selbst, ist es eine gute Idee, um dem letzten sticky-element (in der Fußzeile) einen oberen Rand von 50px (um die Dinge gleich sind), so dass Sie nicht sehen, dass es hinter den Kategorie-header beim scrollen.

Das ist es!

Nun, natürlich, werden Sie wollen, stellen Sie dieser Ihre eigenen, und ändern Sie es, wie die Abmessungen, die Anzahl der Elemente, und die Art der Inhalte. Der Schlüssel ist, zu erstellen, die diejenigen umfasst, die es ermöglichen, Ihre klebrige Elemente um sich dahinter zu verstecken und zeigte, wie Sie passieren — wieder, wahrscheinlich verschiedene Möglichkeiten, darüber zu gehen, aber ich ging mit transparenten Streifen im Farbverlauf.

Was, ein Beispiel? Sicher!!!

Hier ist ein weiteres Beispiel mit horizontalem scrollen (und ein horizontaler Verlauf), das wäre ideal für die Anwendung dieses Konzepts auf mobile Geräte:

Finden Sie den Stift Horizontal slide-in-und-out-Effekt mit klebrigen Elemente von Preethi Sam (@rpsthecoder) auf CodePen.

Sehen, wie das Essen bekommt gezeigt, wie man Artikel verlässt den viewport und dann wird ausgeblendet, wenn die nächsten Artikel geht, die über es?

Gleiche Art von HTML-Einstellungen:

<Artikel>
<div class=”title”>Artikel 1 Titel</div>
<p>Artikel content goes here.</p>
<img class=”image” src=”/Pfad/zu/offenbart/Bild.png”>
</article>

<Artikel>
<div class=”title”>Artikel 2-Titel</div>
<p>Artikel content goes here.</p>
<img class=”image” src=”/Pfad/zu/offenbart/Bild.png”>
</article>

Ich werde meine linearer Farbverlauf Lösung für die Erstellung des covers, dieses mal von Links-nach-rechts zu berücksichtigen, für die ein horizontaler Bildlauf:

article {
background-image: linear-gradient(
zu Recht,
transparente 50px,
#F5A623 50px,
#F5A623 calc(100% – 50px),
transparent 0
);
}

.Titel,
.Bild {
position: sticky;
position: -webkit-klebrig;
z-index: -1;
width: 50px;
}

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

.Bild {
Links: 150px;
}

Immer wieder feststellen, dass wir mit den gleichen zwei 50px transparenten Streifen-wie zuvor — nur mit dem Unterschied, dass wir es anwenden, um die Breite statt der Höhe.

Die beiden sticky-Elemente (Titel und Bild) wird die Folie unter und über dem Artikel. Also, um überschneidungen zu vermeiden Sie während des Blättern, der Titel bekommt einen rechten Rand, das ist gleich die Breite des Bildes, die 50px (plus eine zusätzliche 2px für eine saubere Linie in Chrome).

Hier ist was Los: da wir horizontal Blättern, die Titel-sticks 20px vom Bildschirm den linken Rand und das Bild klebt 150px von der gleichen. Da beide z-index: -1;, werden Sie verschwinden unter dem Artikel (gut, die hintergrund-Farbverlauf) — Sie sind versteckt, wie Sie passieren durch die Feste Farbe, Farbverlauf und offenbart worden sind, durch die transparenten Streifen.

OK, noch ein Beispiel

Vor dem Verpacken, lassen Sie mich Ihnen noch ein Beispiel, das inspiriert diesen post. Es ist eine Website Fußzeile, zeigt sich auf den Blättern. Zuerst sah ich dieses design auf Ryan Seddon website vor langer Zeit.

Dieses design ist in der Regel durch Verwendung eines “fixiert” in der Fußzeile, die einige Leerzeichen am Ende der Seite zu kommen, mit margin. Ich dachte, wenn Feste Elemente tun kann, die für die ganze Seite, dann vielleicht sticky-Elemente können tun, etwas ähnliches für einzelne Elemente — und damit das, was ich kam mit, so weit.

Folglich können wir dies erreichen denselben Effekt mit der klebrigen Techniken, die wir abgedeckt haben, so weit.

Zuerst das HTML:

<main>
<h1>Titel der Website</h1>
<p>Website-content</p>
</main>
<footer>
Website Footer
</footer>
html – {
background-color: #fff;
}

body {
background-image: linear-gradient(
top,
transparente 60px,
#fff 60px,
#fff 0
);
}

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

Finden Sie die Stift-Seite-Fußzeile-slide-out mit “position:sticky” von Preethi Sam (@rpsthecoder) auf CodePen.

Ein sticky footer und hintergrund-Farbverlauf auf den Körper funktioniert der trick.