3D model test

by HcJanni

HTML

<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script defer src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"></script>
    <!--<script src="assets/script.js" type="text/javascript"></script>-->
  </head>
  <!-- begin snippet: js hide: false -->

  <body>
    <div class="loader-wrapper">
      <span class="loader"><span class="loader-inner"></span></span>
      <p id="loader-text">Loading...</p>
    </div>
    <div id="hintergrund"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>

    <nav id="navwrapper">
      <div id="navfiller"></div>
      <div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top selectSection">
        <a href="#navwrapper" class="scrollt js-scroll-to-top">
          <h1 id="titel">WEITERVERARBEITUNG</h1>
        </a>
        <ul>
          <li class="nav-item"><button type="button" data-number="1" class="activenav navb scrollwrap">Bindearten</button></li>
          <li class="nav-item"><button type="button" data-number="2" class="navb scrollwrap">Falzarten</button></li>
          <li class="nav-item"><button type="button" data-number="3" class="navb scrollwrap">Veredelungen</button></li>
          <li class="nav-item"><button type="button" data-number="4" class="navb scrollwrap">Weiteres</button></li>
        </ul>
      </div>


      <button id="burger" class="open-main-nav">
        <span class="burger"></span>
        <span class="burger-text">Menu</span>
      </button>
      <div class="mobilecontainer navbar navbar-dark bg-primary navbar-fixed-top selectSection">
        <div...

CSS

/* ALLGEMEINES */
html {
  /*scroll-behavior: smooth;*/
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 100%;
  overflow-x: hidden;
}
.mitte {
  width: 10px;
  height: 10px;
  position: relative;
  margin: auto;
  margin-top: 80vh;
}
#wrap {
  scroll-margin-top: 130px;
}

h1 {
  text-align: center;
  font-size: 4rem;
  top: 0.5em;
  position: relative;
}

h2 {
  text-align: center;
  font-weight: 300;
  margin-top: 3em;
  font-size: 1rem;
}

ul {
  list-style: none;
  text-align: center;
}

ul li {
  display: inline-table;
  margin-left: 0.25vw;
  padding: 0.25vw;
}

button {
  cursor: pointer !important;
}

a, a:visited, a:hover, a:active {
  color: #343a40;
}

p.img_icon {
  border: 2px solid ;
  position: absolute;
  z-index: 1;
  opacity: 0.25;
  padding: 5px;
  border-radius: 25%;
  top: 5px;
  left: 5px;
  background: #343a40;
  font-size: 1.5em;
}

p.copyright {
  position: absolute;
  top: 47.8em;
  left: 5px;
  opacity: 0.25;
  z-index: 1;
  font-size: 0.8em;
}

.icon-tabler-copyright {
  position: relative;
  top: 2px;
}

.cdark {
  color: #343a40;
  stroke: #343a40;
}

#titel {
  color: #fff;
}

.fade {
  margin: 0;
  padding: 0;
  background-color: lightgreen;
  opacity: 1;
}

.scrollt {
  text-decoration: none;
  color: white;
}

/* NAVIGATION */
#navfiller {
  position: relative;
  height: 5rem;
}

.navb {
  position: relative;
  top: 50px;
  color: #D0DDE8 !important;
  /*color: #87CEEB !important;*/
}

.navb:hover {
  color: #fff !important;
}

#navbar {
  position: absolute;
  top: 40%;
  text-align: center;
  width: 100%;
  color: white;
  z-index: 999;
  transition: 0.3s;
}
#hintergrund img {
  position: absolute;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: ;
  align-items: center;
  opacity: 3%;
  animation: Pulsate 15s ease infinite;
  overflow: hidden;
}

@-webkit-keyframes Pulsate /*Safari and Chrome*/
{
0% {opacity:0.3}
40% {opacity:0.1}
80% {opacity:0.3}
100%...

JavaScript

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

$('.fbutton').click(function() {
  // flip current element
  $(this).closest('.flip-container').removeClass('hover');
});



//$(function () {
//$(document).scroll(function () {
//var $nav = $(".navbar-fixed-top");
//$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
//});
//});





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

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

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



$(window).on("load",function() {
 this.fade(true); //fade elements on page-load
  $(window).scroll(function(){this.fade(false);}); //fade elements on scroll
});

//Take below fade method outside of the load event listener.

  function fade(pageLoad) {
    var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
    var min=0, max=1, threshold=0.01;
    
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
      
      /* Fade element in/out based on its visible percentage */
      if (objectTop < windowTop) {
        if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold ||...