<div class="pageContainer">

            <div class="container alignCenter">
                <div class="box">
                    <h1 id="logo" class="enable-trig" data-trig-min="30">hogehoge</h1>

                    <hr id="headerLine" data-trig-min="20" data-trig />
            
                    <h2 id="documentation" data-trig-min="20" data-trig>Documentation</h2>
                </div>
            </div>

            <hr/>

            <div class="container alignCenter">
                <div class="box" id="Whatis" data-trig-min="20" data-trig-max="40" data-trig>        
                    <h2>zoom!</h2>
                </div>
                <hr id="headerLine2" data-trig-min="10" data-trig />
                <div id="textBlock" data-trig-min="0" data-trig>
                    <div class="box fadeIn" data-trig>        
                      スクロールで拡大したり
                    </div>
                    <div class="box fadeIn animdelay1" data-trig>        
                       フェードインしたり
                    </div>
                    <div class="box fadeIn animdelay2" data-trig>        
                        
                    </div>
                </div>
            </div>

            <hr/>

            <div class="container alignCenter">
                <div class="box title" id="install" data-trig-min="20" data-trig-offset="400" data-trig>        
                    <h2>パララックス実装したり! </h2>
                </div>
                <div class="box fadeIn" data-trig>        
                    <p>セッティングはHTMLにカスタムデータ属性を付与して設定します。</p>
                    
                   
                </div>
            </div>



            <div class="container alignCenter">
                <div id="creative" class="box" data-trig-offset="400" data-trig>        
                    <div class="headerText">横に飛ばしたり</div>
                </div>
                <div id="withcss" class="box" data-trig-offset="400" data-trig>        
                    <div class="headerText">応用も効きます。</div>
                </div>
                <div id="examples" class="box" data-trig-offset="400" data-trig>
                    <a class="moreExamples" href="https://idev-games.github.io/Trig-JS-Examples/" target="_Blank">他のサンプル</a>
                </div>
            </div>


        </div>

body {
  margin: 0px;
  padding: 0px;
  background-color: #060606;
  color: #fff;
  font-family: "Space Mono", monospace;
}
.pageContainer {
  max-width: 100%;
  overflow: hidden;
}
.container {
  background-color: #060606;
  width: 100%;
  min-height: 100vh;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 1800px;
}
hr {
  border-color: #aaaaaa;
}
pre {
  font-size: 22px;
  white-space: pre-line;
  background-color: #111;
  padding: 20px;
}
.box {
  position: relative;
  display: inline-block;
  width: auto;
  margin: auto;
  margin: 20px;
  padding: 20px;
  max-width: 100%;
}
.alignCenter {
  text-align: center;
}
h1 {
  color: #fff;
  text-shadow: 2px 2px 2px #000000;
  font-size: 72px;
}
#logo {
  transform: scale(calc(var(--trig) * 5))
    translateY(calc(var(--trig-reverse) / 2));
}
.listItem {
  font-size: 20px;
  background-color: #111;
  padding: 20px;
  display: inline-block;
  margin-top: 10px;
}
.headerText {
  color: #fff;
  text-shadow: 2px 2px 2px #000000;
  font-size: 52px;
  width: 238px;
}
.moreExamples {
  display: inline-block;
  margin: auto;
  background-color: #f1f1f1;
  color: #060606;
  font-weight: bold;
  padding: 10px 45px;
  text-decoration: none;
}
#headerLine {
  transform: scaleX(calc(var(--trig) * 5));
}
#headerLine2 {
  background: #aaaaaa;
  width: 200px;
  transform: scaleX(calc(var(--trig-reverse) * 5));
}
#Whatis {
  transform: scale(calc(var(--trig) * 5));
  width: 100%;
  z-index: 2;
}
#creative {
  opacity: calc(var(--trig));
  transform: translateX(calc(var(--trig)));
}
#withcss {
  opacity: calc(var(--trig));
  transform: translateX(calc(var(--trig-reverse)));
}
.fadeIn {
  opacity: 0;
}
.fadeIn.trig {
  animation: fadeIn 1s normal forwards ease-in-out;
}
.fadeIn.animdelay1 {
  animation-delay: 0.25s;
}
.fadeIn.animdelay2 {
  animation-delay: 0.5s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  #documentation {
    transform: translateY(calc(var(--trig) * 10));
  }
  #textBlock {
    transform: translateY(calc(var(--trig)));
  }
  .title {
    transform: translateY(calc(var(--trig-reverse)));
  }
  .headerText {
    font-size: 122px;
    width: 100%;
  }
  #examples {
    position: relative;
    z-index: 2;
    transform: translateY(calc(var(--trig) * 2));
  }
}