Trig.js Example - Reveal Header

HTML

<html>
    <head>
        <title>Trig.js Example - Reveal Header</title>
        
        <!-- Trig JS -->
        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

        <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono&display=swap" rel="stylesheet">
        <!--End Fonts -->

        <!-- Mobile viewport meta tag -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    </head>
    <body>
        <div class="pageContainer">

            <header>

                <div class="header slide">
        
                    <div class="logo">
                        Trig.js
                    </div>

                    <div class="menu">

                        <ul>
                            <li class="mobileMenu">&#8801;</li>
                            <li>Home</li>
                            <li>About</li>
                            <li>Blog</li>
                            <li>Contact Us</li>
                        </ul>

                    </div>
            
                    <div class="progress">
                
                        <div class="progressBar">
                
                        </div>
                        
                    </div>

                </div>


            </header>
            
            <div class="container">
                
                <h1 id="title" class="alignCenter" data-trig-max="200" data-trig data-trig-var="true">New article</h1>
                
            </div>
            
            <div class="container" id="article" data-trig-min="0" data-trig-global="true" data-trig-var="true" data-trig>
                
                
                <div>
                    
                    
                    <p>Lorem ipsum...

CSS

body{
   margin:0px;
   padding:0px;
   background-color:#060606;
   color:#FFF;
   font-family: 'Space Mono', monospace;
}
.pageContainer{
  max-width:100%;
  width:100%;
  overflow:hidden;
}
.container{
  width:80vw;
  min-height:100vh;
  position:relative;
  margin:auto;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
h1{
  font-family: 'Bebas Neue', cursive;
  color: #FFF;
  text-shadow: 2px 2px 2px #000000;
  font-size:72px;
}
#article{
  position:relative;
  height:auto;
  display:block;
}
header{
  position:fixed;
  left: 0;
  top: 0;
  z-index:10;
  width:100%;
}
.header{
  background-color: #FFF;
  color:#000;
  width: 100%;
  padding:20px;
  transition:all 0.5s ease-in-out;
}
.trig-scroll-down .slide{
  transform:translateY(calc(-100% + 10px));
}
.trig-scroll-top .slide, .trig-scroll-bottom .slide,.trig-scroll-up .slide{
  transform:translateY(0px);
}
.logo{
  font-size:34px;
}
.menu, .logo{
  width:calc(50% - 20px);
  display:inline-block;
}
.menu ul{ 
  list-style:none;
  float: right;
  margin: 0px;

}
.menu ul li{ 
  display:inline-block;
  padding:0px 10px;
}
.menu ul li.mobileMenu{
  line-height:20px;
  font-size:32px;
  display:none;
}
.progress{
  background-color: #ccc;
  width: calc(100% - 40px);
  height: 10px;
  transition: all 0.5s ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
}
.progressBar{
  background-color: #F1F1F1;
  width: 100%;
  height: 10px;
}
.progressBar:after{
  content:"";
  height:10px;
  width:0px;
  width:var(--trig-article);
  background-color:#1b8237;
  display: block;
  transition:width ease-out 0.3s;
}
#title{
  perspective-origin: 25% 75%;
  transform-style: preserve-3d;
  transform: translateY(var(--trig));
  transition: transform ease-out 0.3s;
}
@media screen and (max-width: 921px) {
  .menu ul li{
    display:none;
  }
  .menu ul li.mobileMenu{
    display:inline-block;
  }
}