Cartões de adesivos empilhados

Abrir no Editor Publique Seu Código

Recomendado

11 June 2025

<div class="wrapper">
  
  <div class="scroll-cards">
    <h1>Some Sticky-Stacked Cards</h1>
    <article class="scroll-cards__item" aria-label="Wie - 1">
      <h2>Nice little headline</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eveniet rem repudiandae quam illo, odio velit eius sunt architecto ratione iure deserunt magnam aut tenetur sint incidunt, ipsam id. Ab?</p>
    </article>
    <article class="scroll-cards__item" aria-label="Wie - 1">
      <h2>Another Headline here</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eveniet rem repudiandae quam illo, odio velit eius sunt architecto ratione iure deserunt magnam aut tenetur sint incidunt, ipsam id. Ab?</p>
    </article>
    <article class="scroll-cards__item" aria-label="Wie - 1">
      <h2>Third Card follows</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eveniet rem repudiandae quam illo, odio velit eius sunt architecto ratione iure deserunt magnam aut tenetur sint incidunt, ipsam id. Ab?</p>
    </article>
    <article class="scroll-cards__item" aria-label="Wie - 1">
      <h2>Will there be another?</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eveniet rem repudiandae quam illo, odio velit eius sunt architecto ratione iure deserunt magnam aut tenetur sint incidunt, ipsam id. Ab?</p>
    </article>
    <article class="scroll-cards__item" aria-label="Wie - 1">
      <h2>Last one</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eveniet rem repudiandae quam illo, odio velit eius sunt architecto ratione iure deserunt magnam aut tenetur sint incidunt, ipsam id. Ab?</p>
    </article>  
  </div>
</div>

CSS

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  padding: 2em;
  background: #003;
  color: #fff;
}

.wrapper {
  max-width: 60em;
  margin: 0 auto;
}

.scroll-cards {
  counter-reset: card;
  position: relative;
  display: block;
  padding-bottom: 120vh;
}

.scroll-cards > .scroll-cards__item + .scroll-cards__item {
  margin-top: 40vh;
}

.scroll-cards h1 {
  position: sticky;
  top: 2rem;
  font-size: 2em;
  margin: 0 0 0.5em;
}

.scroll-cards__item {
  --offset: 0.5em;
  color: #000;
  position: sticky;
  top: max(16vh, 10em);
  padding: 2em 1.5em;
  min-height: 19em;
  background: #fff;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.1);
  width: calc(100% - 5 * var(--offset));
}

h2 {
  font-size: 1.25em;
  text-transform: uppercase;
  margin: 0;
}

p {
  font-size: 1.25em;
  line-height: 1.5;
}

/*
If you use SASS you can shorten this one here like this:

@for $i from 0 through 5 {
  &:nth-of-type(#{$i}) {
    transform: translate(calc((#{$i} - 1) * var(--offset)), calc((#{$i} - 1) * var(--offset)));
  }
}
*/
.scroll-cards__item:nth-of-type(0) {
  transform: translate(calc((0 - 1) * var(--offset)), calc((0 - 1) * var(--offset)));
}
.scroll-cards__item:nth-of-type(1) {
  transform: translate(calc((1 - 1) * var(--offset)), calc((1 - 1) * var(--offset)));
}
.scroll-cards__item:nth-of-type(2) {
  transform: translate(calc((2 - 1) * var(--offset)), calc((2 - 1) * var(--offset)));
}
.scroll-cards__item:nth-of-type(3) {
  transform: translate(calc((3 - 1) * var(--offset)), calc((3 - 1) * var(--offset)));
}
.scroll-cards__item:nth-of-type(4) {
  transform: translate(calc((4 - 1) * var(--offset)), calc((4 - 1) * var(--offset)));
}
.scroll-cards__item:nth-of-type(5) {
  transform: translate(calc((5 - 1) * var(--offset)), calc((5 - 1) * var(--offset)));
}

@media screen and (min-width: 37em) {
  h1 {
    font-size: 3em;
  }
  .scroll-cards__item {
    --offset: 1em;
    padding-left: 5em;
  }
  .scroll-cards__item:before {
    counter-increment: card;
    content: "0" counter(card);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75em;
    height: 2.75em;
    background: #f09;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    left: 1.25em;
    top: 1.25em;
    font-weight: bold;
  }
}

@media screen and (min-width: 62em) {
  .scroll-cards h1 {
    font-size: 3em;
  }
  .scroll-cards__item {
    --offset: 1.25em;
    max-width: 42em;
  }
}

Cartões de adesivos empilhados

Recomendado

Um código de Mete

um site de plataforma

Um Código de Skyrreum

HTML

CSS

JS

Recomendado

Um código de Mete

um site de plataforma

Um Código de Skyrreum

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS