Carte adesive impilate

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

31 January 2025

Carosello di carte 3D HTML CSS JavaScript

HTML

<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

Film di carte CSS pure 3D

Carte

Carosello di carte 3D HTML CSS JavaScript

HTML

CSS

JS

Consigliato

Film di carte CSS pure 3D

Carte

Carosello di carte 3D HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS