My simple one page website (image overlays, preloading animation)

HTML

              
                <div id="loading"></div>

<!-- Das Menü ist nicht im Wrapper enthalten, da es fixiert ist. Fixierte Elemente lassen sich nicht in Elementen mit einer Perspektive anordnen.-->
<ul id="main_menu">
  <li><a href="#home" class="menu_link active">Home</a></li>
  <li><a href="#intro" class="menu_link">Über mich</a></li>
  <li><a href="#angebote" class="menu_link">Angebote</a></li>
  <li><a href="#gallerie" class="menu_link">Beispiele</a></li>
  <li><a href="#kontakt" class="menu_link">Kontakt</a></li>
</ul>

<div class="wrapper">
  <header id="home" class="section_heading">
    <div class="header_text header_transformed header_animated">
      <h1>Willkommen auf meiner Webseite!</h1>
      <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        <p>

          <a id="header_button" href="#intro">Mehr erfahren</a>
    </div>
  </header>

  <section id="intro">
    <h2 class="section_heading">Über mich</h2>
    <p class="item_transformed">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

  </section>

  <section id="angebote">
    <h2 class="section_heading">Meine Angebote</h2>

    <ul class="flex_container flex_list">
      <li class="flex_item item_transformed">Lorem ipsum</li>
      <li class="flex_item item_transformed">Lorem ipsum</li>
      <li class="flex_item item_transformed">Lorem ipsum</li>
      <li class="flex_item item_transformed">Lorem ipsum</li>
    </ul>
  </section>

  <section id="gallerie">

    <h2 class="section_heading">Meine besten Arbeiten</h2>
    <p>Klicken Sie auf ein Bild, um mehr zu erfahren.</p>

    <div class="grid_container">

      <div class="box grid_item grid_transformed">
        <img src="https://picsum.photos/300/300">

        <div>Lorem ipsum</div>
      </div>

      <div class="box grid_item grid_transformed">
        <img src="https://picsum.photos/300/300">

        <div>Lorem ipsum</div>
      </div>

      <div class="box grid_item grid_transformed">
        <img src="https://picsum.photos/300/300">

        <div>Lorem ipsum</div>
      </div>

      <div class="box grid_item grid_transformed">
        <img src="https://picsum.photos/300/300">

        <div>Lorem ipsum</div>
      </div>

      <div class="box grid_item grid_transformed">
        <img src="https://picsum.photos/300/300">

        <div>Lorem ipsum</div>
      </div>

      <div class="box grid_item grid_transformed">
        <img src="https://picsum.photos/300/300">

        <div>Lorem ipsum</div>
      </div>
    </div>

  </section>

  <footer id="kontakt">
    <h2 class="section_heading">Kontaktieren Sie mich!</h2>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </footer>

  </wrapper>

CSS

              
                /* Erweiterung für Bild-Overlays:*/
.box {
  position: relative;
}

.box div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;

  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  color: white;
  transition: 0.5s;
}

/* Erweiterung für Preloading-Screen:*/

#loading {
  background: url("https://media.giphy.com/media/N256GFy1u6M6Y/giphy.gif")
    no-repeat center center;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999999;
}


/*************************************/

/* Erweiterung für scrollbasierte Menü-Hervorhebungen:*/

.active {
  border-bottom: 1px solid white;
}

/*************************************/

/* Erweiterung für Scroll-Animationen (siehe auch Media Queries weiter unten):*/

.header_transformed {
  opacity: 0;
  transform: translateY(50%);
}

.header_animated {
  animation: text_animation 2s ease 0s forwards;
}

@keyframes text_animation {
  0% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.item_transformed {
  opacity: 0;
  transform: translateY(10%);
}

.item_transformed:nth-child(1) {
  animation-delay: 0s;
}
.item_transformed:nth-child(2) {
  animation-delay: 100ms;
}
.item_transformed:nth-child(3) {
  animation-delay: 200ms;
}
.item_transformed:nth-child(4) {
  animation-delay: 300ms;
}
.item_transformed:nth-child(5) {
  animation-delay: 400ms;
}
.item_transformed:nth-child(6) {
  animation-delay: 500ms;
}

.item_animated {
  animation: text_animation 1s ease 0s forwards;
}

/***************************************/

/* Erweiterung für parallaktisches Scrollen:*/
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  perspective: 1px;
  transform-style: preserve-3d;
  scroll-behavior: smooth;
}

header{
  
  transform-style: inherit;
}

header::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: cover;
  background-position: bottom;
  z-index: -1;
  background-image: url("https://blaustern.eu/bokeh.png");
  background-repeat: no-repeat;
}

/****************************************/

/*Stern bedeutet: gilt für alle Elemente*/
* {
  margin: 0;
}

body {
  color: white;
  background-color: #2b2b5f;
  font-family: Arial, sans-serif;
  line-height: 2;
}

img {
  width: 100%;
}

h1,
h2 {
  font-weight: normal;
}

h1,
h2,
p {
  letter-spacing: 1px;
}

section {
  background-color: #2b2b5f;
  padding: 75px 30px;
  border-top: 1px dashed #ff8bc5;
}

section h2 {
  margin-bottom: 20px;
}

header {
  background-image: url(https://images.pexels.com/photos/627823/pexels-photo-627823.jpeg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.header_text {
  text-align: center;
  color: #3a3a9d;

  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  padding: 30px;
}

.header_text p {
  font-size: 1em;
  margin-bottom: 50px;
}

.header_text h1 {
  line-height: 1.5;
}

#header_button {
  padding: 25px;
  background-color: #3a3a9d;
  border-radius: 10px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 0.8em;
  transition: padding 0.5s;
}

#header_button:hover {
  padding: 30px;
}

#main_menu {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  background-color: #2b2b5f;
  display: flex;
  list-style-type: none;
}

.menu_link {
  color: white;
  display: block;
  padding: 10px;
  line-height: 10px;
  text-decoration: none;
  font-size: 0.65em;
}

.active {
  border-bottom: 1px solid white;
}

#angebote {
  border-top: 1px dashed #84c3ff;
}

#angebote h2 {
  color: #84c3ff;
}

.flex_list {
  padding: 0;
  list-style-type: none;
}

.flex_list li {
  border-radius: 5px;
  padding: 20px;
  border: 1px solid #84c3ff;
  margin-bottom: 10px;
}

.flex_list li:hover {
  color: white;
  background-color: #84c3ff;
  border: 1px solid #84c3ff;
}

#gallerie {
  color: white;
}

#gallerie h2 {
  color: #ff8bc5;
}

footer {
  padding: 25px;
  text-align: center;
  border-top: 1px dashed #ff8bc5;
}

.box {
  position: relative;
}

.grid_container {
  margin-top: 20px;
}

@media screen and (min-width: 500px) {
  #main_menu {
    background: linear-gradient(
      to right,
      rgba(43, 43, 95, 1) 0%,
      rgba(43, 43, 95, 1) 50%,
      rgba(43, 43, 95, 0) 100%
    );
  }
}

@media screen and (min-width: 660px) {
  /* Erweiterung für Scroll-Animationen*/

  .item_transformed {
    transform: translateY(25%);
  }

  .grid_transformed:nth-child(4n + 1) {
    opacity: 0;
    transform: translateX(-50%);
  }

  .grid_transformed:nth-child(4n + 2) {
    opacity: 0;
    transform: translateX(-50%);
  }

  .grid_transformed:nth-child(4n + 3) {
    opacity: 0;
    transform: translateX(50%);
  }

  .grid_transformed:nth-child(4n + 4) {
    opacity: 0;
    transform: translateX(50%);
  }

  .grid_animated {
    animation: grid_animation 1s ease 0s forwards;
  }

  @keyframes grid_animation {
    0% {
      opacity: 0;
    }
    100% {
      transform: translateZ(0);
      opacity: 1;
    }
  }

  /**************************************/
  section {
    padding: 75px;
  }

  .header_text h1 {
    font-size: 3em;
  }

  p {
    font-size: 1.25em;
  }

  #header_button {
    font-size: 1em;
  }

  .flex_container {
    display: flex;
  }

  .flex_item {
    margin-right: 10px;
  }

  .grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    line-height: 0;
  }

  .grid_item {
    grid-column: span 6;
  }
}

@media screen and (min-width: 900px) {
  /* Erweiterung für Scroll-Animationen:*/

  .item_transformed {
    transform: translateY(50%);
  }

  .grid_transformed:nth-child(3n + 1) {
    opacity: 0;
    transform: translateX(-50%);
  }

  .grid_transformed:nth-child(3n + 2) {
    opacity: 0;
    transform: translateX(-50%);
  }

  .grid_transformed:nth-child(3n + 3) {
    opacity: 0;
    transform: translateX(-50%);
  }

  .grid_transformed:nth-child(3n + 4) {
    opacity: 0;
    transform: translateX(50%);
  }

  .grid_transformed:nth-child(3n + 5) {
    opacity: 0;
    transform: translateX(50%);
  }

  .grid_transformed:nth-child(3n + 6) {
    opacity: 0;
    transform: translateX(50%);
  }
  /**************************************/
  .grid_item {
    grid-column: span 4;
  }
}

@media screen and (min-width: 1200px) {
  .grid_container {
    width: 80%;
    margin: 20px auto 0 auto;
  }
}

JS

              
                /* Erweiterung für Bild-Overlays und Preloading-Screen:*/

let active_box;

window.onload = function() {
  
  /* Preloading-Screen ausblenden:*/
  document.getElementById("loading").style.display = "none";

  /*Animation vom Header-Text erst nach dem Preloading-Screen:*/
  document
    .querySelector(".header_transformed")
    .classList.add("header_animated");

  /*Bild-Overlays:*/
  let boxes = document.querySelectorAll(".box div");

  boxes.forEach(box => {
    box.onclick = function() {
      box.style.opacity = 1;

      if (active_box) {
        active_box.style.opacity = 0;
      }

      if (active_box != box) {
        active_box = box;
      } else {
        active_box = null;
      }
    };
  });
};

/*****************************************************/

/* Erweiterung für scrollbasierte Menü-Hervorhebungen*/
let callback3 = function(entries) {
  for (let i = 0; i < entries.length; i++) {
    let entry = entries[i];

    let id = entry.target.getAttribute("id");
    if (!id) {
      id = entry.target.parentNode.getAttribute("id");
    }

    let newLink = document.querySelector(`[href="#${id}"]`);

    if (entry.intersectionRatio >= 0.5 && entry.isIntersecting) {
      newLink.classList.add("visible");
    } else {
      newLink.classList.remove("visible");
    }

    highlightFirst();
  }
};

function highlightFirst() {
  //Liste der gerade sichtbaren Abschnitte
  let firstVisibleLink = document.querySelector(".visible");

  let links = document.querySelectorAll(".active");

  if (firstVisibleLink) {
    links.forEach(link => {
      link.classList.remove("active");
    });

    firstVisibleLink.classList.add("active");
  }
}

let observer3 = new IntersectionObserver(callback3, {
  threshold: 0.5
});

let items3 = document.querySelectorAll(".section_heading");
items3.forEach(item => {
  observer3.observe(item);
});

/*****************************************************/

//Only Use the IntersectionObserver if it is supported
if (IntersectionObserver) {
  let callback = function(entries) {
    entries.forEach(entry => {
      //if the element is visible, add the animated class
      if (
        entry.isIntersecting &&
        !entry.target.classList.contains("item_animated")
      ) {
        entry.target.classList.add("item_animated");
      }
    });
  };

  let callback2 = function(entries) {
    entries.forEach(entry => {
      //if the element is visible, add the animated class
      if (
        entry.isIntersecting &&
        !entry.target.classList.contains("grid_animated")
      ) {
        entry.target.classList.add("grid_animated");
      }
    });
  };

  let observer = new IntersectionObserver(callback);

  let observer2 = new IntersectionObserver(callback2, {
    //Callback auslösen, sobald 20% vom Element sichtbar sind
    threshold: 0.2
  });

  //Get and observe all the items with the class item_transformed
  let items = document.querySelectorAll(".item_transformed");
  items.forEach(item => {
    observer.observe(item);
  });

  //Get and observe all the items with the class grid_transformed
  let items2 = document.querySelectorAll(".grid_transformed");
  items2.forEach(item => {
    //item.classList.add('text_transformed');

    observer2.observe(item);
  });
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions