Gestapelte Karten mit Sticky-Positionierung und einem Hauch von Sass

Neulich habe ich ein besonders schönes Detail auf der Website von Corey Ginnivan entdeckt, wo eine Sammlung von Karten übereinander gestapelt wird, während man scrollt.

Ich begann mich zu fragen, wie viel JavaScript das beinhalten würde und wie man das umsetzen könnte, als mir klar wurde – *ah!* – das muss die Arbeit von position: sticky und ein wenig Sass sein. Also, ohne darauf einzugehen, wie Corey das gemacht hat, beschloss ich, es selbst einmal zu versuchen.

Zuerst einige Standardstile für die Karten

body {
  background: linear-gradient(#e8e8e8, #e0e0e0);
}

.wrapper {
  margin: 0 auto;
  max-width: 700px;
}

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  color: #333;
  padding: 40px;
}

Als Nächstes müssen wir jede Karte am oberen Rand des Containers sticky machen. Das können wir so machen

.card {
  position: sticky;
  top: 10px;
  // other card styles
}

Und das hinterlässt uns damit

Aber wie bekommen wir jedes dieser Elemente so hin, dass es wie ein Stapel übereinander aussieht? Nun, wir können etwas ausgefallene Sass-Magie verwenden, um die Position jeder Karte zu fixieren. Zuerst schleifen wir über jedes Kartenelement und ändern dann den Wert bei jeder Iteration

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    top: $i * 20px;
  }
}

Was zu dieser Demo führt, die, wenn ich das so sagen darf, absolut charmant ist

Und da haben wir es! Wir könnten ein paar visuelle Änderungen vornehmen, um die Dinge zu verbessern. Zum Beispiel den box-shadow und die Farbe jeder Karte, genau wie in Coreys Beispiel. Aber ich wollte hier weiter experimentieren. Was wäre, wenn wir die Reihenfolge der Karten ändern und sie stattdessen horizontal machen?

Das machen wir schon auf dieser Webseite

Nachdem ich ein wenig experimentiert hatte, habe ich die Reihenfolge der Karten mit Flexbox geändert und jedes Element von rechts nach links einblenden lassen

.wrapper {
  display: flex;
  overflow-x: scroll;
}

.card {
  height: 60vh;
  min-width: 50vw;
  position: sticky;
  top: 5vh;
  left: 10vw;
}

Aber ich wollte auch, dass jede der Karten in unterschiedlichen Winkeln erscheint, also habe ich die Sass-Schleife mit der Zufallsfunktion aktualisiert

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    left: $i * 20px;
    left: random(200) + $i * 1px;
    top: random(130) + $i * 1px;
    transform: rotate(random(3) - 2 * 1deg);
  }
}

Das ist der Großteil der Änderungen und das Ergebnis ist das Folgende

Ziemlich schick, oder? Ich liebe position: sticky; so sehr.