Der Parallax Text – Sektion Effekt

Heute zeige ich euch wie man nur mit HTML und CSS einen coolen Parallax Effekt erzeugen kann. Wen man da runterscrollt sieht man verschiedene Sektionen die sich irgendwann überschneiden und dann wir der Text auch ausgetauscht. In meinen Augen ist das ein perfekter Weg um ein Storytelling in der Webseite darzustellen

Video

HTML

<section class="parallax-section parallax-section--white">
      <div class="parallax-content">
        <h1 class="parallax-title">Parallax Effekt</h1>
        <p>Einfach runterscrollen - reins HTML / CSS</p>
      </div>
    </section>

    <section class="parallax-section parallax-section--blue-1">
      <div class="parallax-content">
        <p>Sektion 2 - Es wird dunkler</p>
      </div>
    </section>

    <section class="parallax-section parallax-section--blue-2">
      <div class="parallax-content">
        <p>Sektion 3 und noch dunkler</p>
      </div>
    </section>

    <section class="parallax-section parallax-section--blue-3">
      <div class="parallax-content">
        <p>Sektion 4 wow noch dunkler</p>
      </div>
    </section>

    <section class="parallax-section parallax-section--blue-4">
      <div class="parallax-content parallax-content--white-text">
        <p>The End - wir haben fertig</p>
      </div>
    </section>

CSS

@import url("https://fonts.googleapis.com/css2?family=Sintony:wght@300;700&display=swap");

:root {
  --color-white: #ffffff;
  --color-blue-1: #6496c8;
  --color-blue-2: #3c6496;
  --color-blue-3: #1e3c64;
  --color-blue-4: #0f1e32;
  --color-text: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Sintony", sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-text);
  height: 500vh;
}

.parallax-section {
  position: absolute;
  width: 100%;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  clip: rect(0, auto, auto, 0);
}

.parallax-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  padding: 20px;
}

.parallax-title {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 16px;
}

.parallax-content p {
  font-size: 20px;
  line-height: 1.8;
}

.parallax-content--white-text {
  color: var(--color-text);
}

/* Section colors — white to dark blue */
.parallax-section--white {
  background-color: var(--color-white);
  color: #000;
  top: 0;
  z-index: 1;
}

.parallax-section--blue-1 {
  background-color: var(--color-blue-1);
  top: 100vh;
  z-index: 2;
}

.parallax-section--blue-2 {
  background-color: var(--color-blue-2);
  top: 200vh;
  z-index: 3;
}

.parallax-section--blue-3 {
  background-color: var(--color-blue-3);
  top: 300vh;
  z-index: 4;
}

.parallax-section--blue-4 {
  background-color: var(--color-blue-4);
  top: 400vh;
  z-index: 5;
}