JSFiddle - React, Tailwind, and code Playground

by thallysondias

HTML

<script src="https://rawgithub.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.min.js"></script>
<header role="banner">
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/392/demo_tophat.png" width="64" height="auto" alt="scroll magic">
</header>

<main class="full-screen" role="main">
  <section class="full-screen blue">
    <div>
      <h1>Basic Pin</h1>
      <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
    </div>
  </section>

  <section id="pinned-trigger1" class="full-screen orange">
    <div id="pinned-element1">
      <p>This element will be pinned once it's trigger hits the top of the viewport and will have a duration of window height minus 100</p>
    </div> 
  </section>

  <section id="pinned-trigger2" class="full-screen red">
    <div id="pinned-element2">
      <p>This element will be pinned for a duration of 150px</p>
    </div>
  </section>
    
      <section id="pinned-trigger3" class="full-screen orange">
    <div id="pinned-element3">
      <p>elemnto 3</p>
    </div>
  </section>
  
  <section class="full-screen blue">
    <div>
      <p>Section Four!</p>
    </div>
  </section>
</main>

CSS

/*
	Demo Styles: NOT REQUIRED
*/
html,
body {
  margin: 0;
  height: 100%
}

h1,
p {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 10px;
  left: 10px;
}

section {
  text-align: center;
  color: #EFEFEF;
}

.full-screen {
 
}

.blue {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blue {
	background-color: #3883d8;
}
.red {
	background-color: #cf3535;
}
.orange {
	background-color: #ea6300;
}

JavaScript

// init ScrollMagic Controller
controller = new ScrollMagic();

// Scene Handler
var scene = new ScrollScene({
  triggerElement: "#pinned-trigger1", // point of execution
  duration: $(window).height() - 100, // pin element for the window height - 1
  triggerHook: 0, // don't trigger until #pinned-trigger1 hits the top of the viewport
  reverse: true // allows the effect to trigger when scrolled in the reverse direction
})
.setPin("#pinned-element1"); // the element we want to pin

// Scene2 Handler
var scene2 = new ScrollScene({
  triggerElement: "#pinned-trigger2", // point of execution
  duration: 150 // pin the element for a total of 400px
})
.setPin("#pinned-element2"); // the element we want to pin

// Scene3 Handler
var scene3 = new ScrollScene({
  triggerElement: "#pinned-trigger3", // point of execution
  duration: 100 // pin the element for a total of 400px
})
.setPin("#pinned-element3"); // the element we want to pin


// Add Scenes to ScrollMagic Controller
controller.addScene([
  scene,
  scene2,
  scene3
]);