Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass

Kürzlich habe ich auf der Website von Corey Ginnivan ein faszinierendes Designelement entdeckt: einen Kartenstapel, der sich während des Scrollens dynamisch neu positioniert.

Anfangs nahm ich an, dass dies ein umfangreiches JavaScript erfordern würde. Ich erkannte jedoch schnell, dass die elegante Lösung in position: sticky und ein Hauch von Sass. Anstatt Coreys Ansatz zu replizieren, habe ich beschlossen, meine eigene Version zu erstellen.

Lassen Sie uns zunächst grundlegende Kartenstile definieren:

 Körper {
  Hintergrund: Linear-Gradient ( #e8e8e8, #e0e0e0);
}

.Wrapper {
  Rand: 0 Auto;
  Max-Breite: 700px;
}

.Card {
  Hintergrundfarbe: #fff;
  Grenze: 1PX Solid #CCC;
  Border-Radius: 10px;
  Box-Shadow: 5px 5px 5px RGBA (0, 0, 0, 0,1);
  Farbe: #333;
  Polsterung: 40px;
}

Um den klebrigen Effekt zu erzielen, wenden wir position: sticky und setzen einen oberen Offset:

 .Card {
  Position: klebrig;
  Top: 10px;
  / * Andere Kartenstile *//
}

Dies schafft das anfängliche klebrige Verhalten. Um den gestapelten Effekt zu simulieren, nutzen wir Sass's @for Loop:

 @Für $ i von 1 bis 8 {
  .KARD: N-CHild (#{$ i} n) {
    Oben: $ I * 20px;
  }
}

Diese Schleife passt die top Eigenschaft für jede Karte an und erstellt die Stapel -Illusion.

Dieser Ansatz führt zu einem visuell ansprechenden Ergebnis. Weitere Verfeinerungen könnten das Anpassen der Box-Shadow- und Kartenfarben für eine verbesserte Ästhetik sein.

Ich wollte jedoch alternative Layouts erkunden. Inspiriert von einem anderen Design auf dieser Website, experimentierte ich mit einer horizontalen Anordnung mit Flexbox:

 .Wrapper {
  Anzeige: Flex;
  Überlauf-X: Scrollen;
}

.Card {
  Höhe: 60 VH;
  Min-Width: 50VW;
  Position: klebrig;
  TOP: 5VH;
  links: 10VW;
}

Um ein dynamisches, randomisiertes Element hinzuzufügen, habe ich die random() -Funktion von Sass in die Schleife integriert:

 @Für $ i von 1 bis 8 {
  .KARD: N-CHild (#{$ i} n) {
    Links: $ I * 20px Random (200) * 1px;
    Oben: $ I * 1PX Random (130) * 1px;
    Transformation: Drehen (zufällig (3) - 2 * 1DEG);
  }
}

Diese Modifikation führt zu zufälligen Offsets und Drehungen für jede Karte, was zu einer spielerischeren und dynamischeren Präsentation führt.

Die Kraft und Flexibilität der position: sticky werden in diesen Beispielen deutlich demonstriert.

Das obige ist der detaillierte Inhalt vonGestapelte Karten mit klebriger Positionierung und einem Schuss Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!