JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<h1>Herzlich Willkommen bei diesem Versuch</h1>
<p>sollten nicht auch Pseudo-Elemente (::before und ::after, auf dieselbe Größe und Position, aber z-index-mäßig hinter das eigentliche Element gelegt) ausreichen? Diese mit jeweils einem Hintergrundbild versehen, und dann die Opacity der Pseudo-Elemente animieren.</p>
<p>sollten nicht auch Pseudo-Elemente (::before und ::after, auf dieselbe Größe und Position, aber z-index-mäßig hinter das eigentliche Element gelegt) ausreichen? Diese mit jeweils einem Hintergrundbild versehen, und dann die Opacity der Pseudo-Elemente animieren.</p>
<p>sollten nicht auch Pseudo-Elemente (::before und ::after, auf dieselbe Größe und Position, aber z-index-mäßig hinter das eigentliche Element gelegt) ausreichen? Diese mit jeweils einem Hintergrundbild versehen, und dann die Opacity der Pseudo-Elemente animieren.</p>
<p>sollten nicht auch Pseudo-Elemente (::before und ::after, auf dieselbe Größe und Position, aber z-index-mäßig hinter das eigentliche Element gelegt) ausreichen? Diese mit jeweils einem Hintergrundbild versehen, und dann die Opacity der Pseudo-Elemente animieren.</p>
<p>sollten nicht auch Pseudo-Elemente (::before und ::after, auf dieselbe Größe und Position, aber z-index-mäßig hinter das eigentliche Element gelegt) ausreichen? Diese mit jeweils einem Hintergrundbild versehen, und dann die Opacity der Pseudo-Elemente animieren.</p>

CSS

body::before, body::after {
  content: " "; 
  display: block;
  position: fixed;
  z-index: -1;
  top: 0; left: 0;
  width: 100%;
  bottom: 0;
  transition: opacity 1s linear;
}
body::before {
  opacity: 1;
  background-image: linear-gradient(to right, #c00, white);
}
body::after {
  opacity: 0;
  background-image: linear-gradient(to right, white, #c00);
}
body.is-down::before {
  opacity: 0;
}
body.is-down::after {
  opacity: 1;
}

p { font-size: 1.5rem; }

JavaScript

document.addEventListener("scroll", function() {
   document.body.classList.toggle("is-down", window.pageYOffset > 100);
});