Cartes empilées avec un positionnement collant et une pincée de sass

Récemment, j'ai découvert un élément de conception captivant sur le site Web de Corey Ginnivan: une pile de cartes qui se repositionnent dynamiquement pendant que vous faites défiler.

Au départ, j'ai supposé que cela nécessiterait un JavaScript étendu. Cependant, j'ai rapidement réalisé que la solution élégante réside en position: sticky et touche de sass. Au lieu de reproduire l'approche de Corey, j'ai décidé de créer ma propre version.

Tout d'abord, définissons les styles de carte de base:

 corps {
  Contexte: Linear-Gradient (# E8E8E8, # E0E0E0);
}

.wrapper {
  marge: 0 auto;
  largeur maximale: 700px;
}

.carte {
  Color d'arrière-plan: #FFF;
  Border: 1px solide #ccc;
  Border-Radius: 10px;
  Box-Shadow: 5px 5px 5px RGBA (0, 0, 0, 0,1);
  Couleur: # 333;
  rembourrage: 40px;
}

Pour atteindre l'effet collant, nous appliquons position: sticky et définissez un décalage supérieur:

 .carte {
  Position: collante;
  En haut: 10px;
  / * Autres styles de carte * /
}

Cela crée le comportement collant initial. Pour simuler l'effet empilé, nous tirons parti de la boucle @for de Sass:

 @for $ i de 1 à 8 {
  .card: nth-child (# {$ i} n) {
    En haut: $ i * 20px;
  }
}

Cette boucle ajuste la propriété top pour chaque carte, créant l'illusion d'empilement.

Cette approche produit un résultat visuellement attrayant. D'autres raffinements pourraient inclure le réglage de la boîte de boîte et des couleurs de la carte pour une esthétique améliorée.

Cependant, je voulais explorer des dispositions alternatives. Inspiré par une autre conception sur ce site Web, j'ai expérimenté un arrangement horizontal utilisant Flexbox:

 .wrapper {
  Affichage: flex;
  Overflow-X: Scroll;
}

.carte {
  Hauteur: 60VH;
  largeur min: 50vw;
  Position: collante;
  En haut: 5VH;
  Gauche: 10vw;
}

Pour ajouter un élément dynamique et randomisé, j'ai incorporé la fonction random() de SASS dans la boucle:

 @for $ i de 1 à 8 {
  .card: nth-child (# {$ i} n) {
    gauche: $ i * 20px aléatoire (200) * 1px;
    En haut: $ i * 1px aléatoire (130) * 1px;
    transformée: tournure (aléatoire (3) - 2 * 1deg);
  }
}

Cette modification introduit des décalages et rotations aléatoires à chaque carte, ce qui entraîne une présentation plus ludique et dynamique.

La puissance et la flexibilité de position: sticky sont clairement démontrées dans ces exemples.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!