Erstellen von Slide-Effekten mit Sticky-Positionierung

Sticky-Elemente werden hauptsächlich verwendet, um etwas sichtbar auf dem Bildschirm zu halten, während gescrollt wird. So toll das auch ist, wir können Elemente auf die gleiche Weise auch ausblenden!

Hier ist eine typische (ähm) klebrige Situation

Sehen Sie den Pen position:sticky (CSS) von Preethi Sam (@rpsthecoder) auf CodePen.

Sticky-Elemente (position: sticky;) ähneln stark fixierten Elementen (position: fixed;), da beide ihre Position auf dem Bildschirm beibehalten, auch wenn der Benutzer die Seite nach oben oder unten scrollt. Der Unterschied? Ein Sticky-Element bleibt auf den übergeordneten Container beschränkt, in dem es sich befindet. Vergleichen Sie das obige Sticky-Beispiel mit diesem, das dasselbe Konzept mit einem fixierten Element verwendet.

Sehen Sie den Pen position:sticky (CSS) von CSS-Tricks (@css-tricks) auf CodePen.

Nehmen wir an, wir möchten einen Effekt erzeugen, bei dem Elemente beim Scrollen ein- oder ausgeblendet werden – ähnlich wie bei Parallax. Zum Beispiel ein Header, der herausgleitet, und ein Footer, der hineingleitet.

Nun, raten Sie mal? Das können wir mit Sticky-Elementen machen!

Sehen Sie den Pen Slide In und Out Effekt mit "position:sticky" von Preethi Sam (@rpsthecoder) auf CodePen.

Wie machen wir das? Gut, dass Sie fragen. Lassen Sie es uns aufschlüsseln.

HTML-Setup

In unserem Beispiel gibt es drei Sticky-Elemente

• Das erste ist die Kategorieüberschrift, die unter den Artikelkörper gleitet, sobald sie den oberen Rand des Bildschirms erreicht.
• Das zweite ist der Titel des Artikels, der oben auf dem Bildschirm sichtbar bleibt, während der Inhalt dahinter beim Scrollen verschwindet (was das typische Verhalten von Sticky-Elementen ist).
• Das dritte Element ist ein Footer, der aus dem Artikel herausgleitet und sichtbar wird, wenn der Artikel über einen bestimmten Schwellenwert gescrollt wird.

Sehen wir uns an, wie es gemacht wird. Hier ist das HTML, mit dem wir arbeiten ... im Grunde zwei Artikel

<article>
  <div class="category">Category Header</div>
  <h1 class="title">Article 1 Title</h1>
  <p>Body content would go here.</p>
  <!-- More content -->
  <div class="footer">
    <p>Article 1 Footer</p>
  </div>
</article>

<article>
  <div class="category">Category Header</div>
  <h1 class="title">Article 2 Title</h1>
  <p>Body content would go here.</p>
  <!-- More content -->
  <div class="footer">
    <p>Article 2 Footer</p>
  </div>
</article>

Das Sticky CSS

Die Elemente .category, .title und .footer erhalten position:sticky; zusammen mit einer Platzierungseigenschaft, die angibt, wo auf dem Bildschirm sie beim Scrollen "haften" beginnen.

.category,
.title,
.footer {
  position: -webkit-sticky; /* Required for Safari */
  position: sticky;
  height: 50px;
}

.category {
  top: 0;
}

.title {
  top: 0;
}

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

Ich mache nicht viel mit den Sticky-Elementen, außer sie zu stylen. Sie tun bereits, was sie tun müssen: am Bildschirm haften. Alles, was übrig bleibt, ist, eine Abdeckung und etwas Platz zu schaffen, damit die Elemente beim Scrollen der Seite ein- und ausgeblendet werden können.

Es gibt wahrscheinlich viele Möglichkeiten, eine Abdeckung für den Artikel zu erstellen, unter der Sticky-Elemente auf einer Seite hindurchgleiten und versteckt werden können – ich habe mich für ein background-image entschieden.

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

Der lineare Hintergrundverlauf wird auf den Artikel angewendet und verläuft von oben nach unten, beginnend mit 50px Transparenz und einem Farbübergang mit einem harten Stopp bei 50px. Die calc-Sache? So sage ich der Farbe, dass sie weitergehen soll, aber unten 50px Platz lassen soll. Dann gehen wir wieder transparent. Das bedeutet, wir haben zwei 50px transparente Streifen, einen oben und einen unten mit gleichen Höhen, die den Höhen der Kategorieüberschrift und des Footers entsprechen.

Die Kategorieüberschrift und der Artikel-Footer sind die Elemente, die in den Text hinein- und herausgleiten, daher bestimmen ihre Höhen, wie lange die transparenten Streifen oben und unten im Verlauf sein werden.

Wie alles zusammenkommt: Sowohl die Kategorieüberschrift als auch der Artikeltitel haften am Bildschirm, wenn ihre Oberseiten mit dem oberen Rand des Viewports übereinstimmen. Der Titel stapelt sich über der Kategorieüberschrift und, wenn er am oberen Rand des Viewports zu haften beginnt, verbirgt er die Kategorieüberschrift vollständig.

Der Footer haftet bereits 100px über dem unteren Bildschirmrand (innerhalb der Grenzen des Artikels), aber Sie sehen ihn nicht, da er mit z-index:-1 hinter dem Inhalt versteckt wird. Er wird sichtbar, sobald wir über den Beginn des letzten transparenten Streifens des Hintergrundverlaufs des Artikels hinaus scrollen.

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

Da die Kategorieüberschrift nur Inhalt ist, der nichts zu verbergen hat als den Text selbst, ist es eine gute Idee, dem letzten Sticky-Element (dem Footer) einen oberen Rand von 50px zu geben (um alles gleich zu halten), damit Sie ihn beim Scrollen nicht hinter der Kategorieüberschrift sehen.

Das ist alles!

Nun möchten Sie das natürlich selbst gestalten und verändern, wie z. B. die Abmessungen, die Anzahl der Elemente und die Art des Inhalts. Der Schlüssel ist, diese Abdeckungen zu erstellen, die es Ihren Sticky-Elementen ermöglichen, dahinter zu verstecken und beim Durchlaufen sichtbar zu werden – wieder, wahrscheinlich gibt es verschiedene Wege, dies zu erreichen, aber ich habe mich für transparente Streifen in einem Verlauf entschieden.

Was, noch ein Beispiel? Klar!

Hier ist ein weiteres Beispiel mit horizontalem Scrollen (und einem horizontalen Verlauf), das sich ideal für die Anwendung dieses Konzepts auf Mobilgeräten eignet.

Sehen Sie den Pen Horizontaler Slide-In- und -Out-Effekt mit Sticky-Elementen von Preethi Sam (@rpsthecoder) auf CodePen.

Sehen Sie, wie das Essen sichtbar wird, wenn ein Artikel aus dem Viewport verschwindet, und dann versteckt wird, wenn der nächste Artikel darüber vorbeizieht?

Gleiche Art von HTML-Setup

<article>
  <div class="title">Article 1 Title</div>
  <p>Article content goes here.</p>
  <img class="image" src="/path/to/revealed/image.png">
</article>

<article>
  <div class="title">Article 2 Title</div>
  <p>Article content goes here.</p>
  <img class="image" src="/path/to/revealed/image.png">
</article>

Ich verwende meine lineare Verlauflösung zum Erstellen der Abdeckungen, diesmal von links nach rechts, um ein horizontales Scrollen zu berücksichtigen.

article  {
  background-image: linear-gradient(
    to right,
    transparent 50px,
    #F5A623 50px,
    #F5A623 calc(100% - 50px),
    transparent 0
  );
}

.title,
.image  {
  position: sticky;
  position: -webkit-sticky;
  z-index: -1;
  width: 50px;
}

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

.image  {
  left: 150px;
}

Beachten Sie erneut, dass wir die gleichen zwei transparenten 50px-Streifen wie zuvor verwenden – der einzige Unterschied besteht darin, dass wir sie auf die Breite statt auf die Höhe anwenden.

Beide Sticky-Elemente (der Titel und das Bild) gleiten unter den Artikel und durch ihn hindurch. Um sie beim Scrollen nicht überlappen zu lassen, erhält der Titel einen rechten Rand, der der Breite des Bildes entspricht, also 50px (plus zusätzliche 2px für eine sauberere Linie in Chrome).

Das passiert: Wenn wir horizontal scrollen, haftet der Titel 20px vom linken Bildschirmrand entfernt und das Bild 150px vom selben Rand entfernt. Da beide z-index: -1; haben, verschwinden sie unter dem Artikel (nun ja, dem Hintergrundverlauf) – sie werden versteckt, wenn sie durch die Volltonfarbe des Verlaufs gleiten, und durch die transparenten Streifen sichtbar gemacht.

OK, noch ein Beispiel

Bevor wir zum Ende kommen, zeige ich Ihnen noch ein Beispiel, das mich zu diesem Beitrag inspiriert hat. Es ist ein Website-Footer, der sich beim Scrollen offenbart. Dieses Design habe ich vor langer Zeit zum ersten Mal auf Ryan Seddons Website gesehen.

Dieses Design wird normalerweise mit einem "fixed" Footer realisiert, dem am Ende der Seite etwas Platz gegeben wird, um herauszufahren, mittels Margin. Ich dachte, wenn feste Elemente das für die gesamte Seite tun können, dann können Sticky-Elemente vielleicht etwas Ähnliches für einzelne Elemente tun – und daher das, was ich bisher entwickelt habe.

Folglich können wir diesen gleichen Effekt mit den bisher behandelten Sticky-Techniken erzielen.

Zuerst unser HTML

<main>
  <h1>Site Title</h1>
  <p>Site content</p>
</main>
<footer>
  Site Footer
</footer>

html {
  background-color: #fff;
}

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

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

Sehen Sie den Pen Page footer slide-out mit "position:sticky" von Preethi Sam (@rpsthecoder) auf CodePen.

Ein Sticky-Footer und ein Hintergrundverlauf auf dem Body machen den Trick.