Carte adesive impilate

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 November 2024

<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;
  }
}

Carte adesive impilate

Consigliato

Prodotti di carte

Film di carte CSS pure 3D

HTML

CSS

JS

Consigliato

Prodotti di carte

Film di carte CSS pure 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS