Optik Tack v.3

by HcJanni

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>OptikTack</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  </head>

  <body id="test" class="blur">
    <div id="container">
      <!-- Für die Animaton am Anfang vom Laden der Seite -->
      <div class="wrapper">
        <!-- NAVIGATION -->
        <nav id="navbar">
          <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
          <script src="javascript/navbar fixed.js"></script>
          <a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png" class="logo"></a>
          <ul>
            <li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>
            <li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>
            <li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>
            <li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>
            <li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>
          </ul>
        </nav>
        <!-- NAVIGATION ENDE -->
        <!-- MAIN -->
        <div id="spacer"></div>
        <!-- home section -->
        <section id="home" class="section sectionhome">
          <div>
            <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
          </div>
        </section>
        <!-- home section ende -->
        <!-- wir-ueber-uns section -->
        <section id="wir-ueber-uns" class="section sectionwir-ueber-uns">
          <!--<div>
            <img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px" id="wir-ueber-unsbild">
         ...

CSS

@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Armata&family=Changa:wght@200;300;400;500;600;700;800&family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Goldman:wght@400;700&family=Play:wght@400;700&family=Rajdhani:wght@300;400;500;600;700&family=Saira:wght@100;200;300;400;500;600;700;800;900&family=Sunflower:wght@300;500;700&family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

/* CSS Document */

/*font-family: 'Armata', sans-serif;
font-family: 'Changa', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Goldman', cursive;
font-family: 'Play', sans-serif;
font-family: 'Rajdhani', sans-serif;
font-family: 'Saira', sans-serif;
font-family: 'Sunflower', sans-serif;
font-family: 'Tomorrow', sans-serif;*/

/* ALLGEMEINES */
* {
  font-family: "Saira", "Roboto", Segoe UI, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

#container {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: hidden;
}

body {
  background-color: #d0d0d0;
  margin: 128px 0 0 0;
  /*background-image: url("https://i.postimg.cc/9M2xQYcm/Hintergrund.png")*/
}






.block{
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 1280px;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}


/* NAVIGATION */
#navlinks {
  margin: 0;
}

ul {
  color: black;
  list-style: none;
  float: right;
  margin-right: 1rem;
  padding-top: 2.25%;
}

ul li {
  display: inline-table;
  margin-left: 0.25rem;
  padding: 0.25rem;
  border-bottom:...

JavaScript

// SHRINKING HEADER EFFEKT beim scrollen von https://codepen.io/tomdurkin/pen/nvAjd

$(function() {
  var shrinkHeader = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      $('#navbar').addClass('shrink');
    } else {
      $('#navbar').removeClass('shrink');
    }
  });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});


// SMART NAVBAR / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section, leicht verändert/angepasst

$(document).ready(function() {

  var navTop = $('#navbar').offset().top;
  var navHeight = $('#navbar').height();
  var windowH = $(window).height();

  $('.section').height(windowH);

  $(document).scroll(function() {
    var st = $(this).scrollTop(); // überwacht wie weit man scrollt

    if (window.scrollY <= 50) { // behebt kleinen Fehler beim ersten scrollen
      element.classList.add("active");
    }

    $('.section').each(function(index, element) {
      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
        $(this).addClass('active');

        var id = $(this).attr('id');
        $('a[href="#' + id + '"]').parent('li').addClass('active');
        // or $('#nav li:eq('+index+')').addClass('active');
      } else {
        $(this).removeClass('active');

        var id = $(this).attr('id');
        $('a[href="#' + id + '"]').parent('li').removeClass('active');
        //or $('#nav li:eq('+index+')').removeClass('active');
      }

    });

  });

});


// ANIMATION am Anfang vom Laden der Seite
$(window).on("load", function() {
    $('body').removeClass('blur', 'slow');
});

// SMOOTH SCROLL
$('a').click(function() {
  var scrollziel = $(this).attr('href');
  if (scrollziel == '#home') {
    $('html, body').animate({
      scrollTop: 0
    }, 750); // Geschwindigkeit beim hochscrollen
   ...