<section class="section">

  <h1>Couscous royal</h1>

</section>

​

<section id="section-parallax">

</section>

​

<section class="section">

  <div>

    <h2>Ingrédients</h2>

​

    <ol>

      <li>Plaisir</li>

      <li>Délectation</li>

      <li>Allégresse</li>

    </ol>

    Sans oublier, le <a href="https://fr.wikipedia.org/wiki/Leben">leben</a> 🥛

  </div>

</section>

@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Licorice&display=swap");

​

html {

  font-size: 200%;

  font-family: Dongle;

  line-height: 1;

}

​

body {

  display: inherit;

  color: white;

  margin: 0;

  padding: 0 1rem;

}

​

a {

  color: white;

}

​

section {

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  border-radius: 1rem;

  background-color: rgba(#00e559, 0.1);

  margin: 1rem 0;

}

​

#section-parallax {

  /* Image portrait pour un parallax vertical */

  background-image: url(https://assets.codepen.io/9367036/couscousroyal.jpg);

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: scroll;

  background-position: 0% 50%;

}

​

h1 {

  font-family: Licorice;

  font-size: 20vmin;

}

​

ul {

  padding: 0 0 0 0;

}

​

gsap.to("#section-parallax", {

  backgroundPosition: "100% 50%",

  ease: "none",

  scrollTrigger: {

    trigger: "#section-parallax",

    start: "top 80%",

    end: "bottom 20%",

    scrub: 0.5,

    markers: true

  }

});

​