ScrollMagic scenes at 100% height

by Marian Rick

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="first scene01" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene02" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene02" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene04" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene05" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene06" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene07" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>
<div class="scene scene08" id="trigger01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, fugit!</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.scene,
.first {
  height: 100%;
}

JavaScript

/*var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({triggerElement: ".scene", duration: 900, triggerHook: 'onLeave'})
.setPin(".scene")
.addIndicators({name: "scene"}) // add indicators (requires plugin)
.addTo(controller);*/

var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave'
  }
});

// get all slides
var slides = document.querySelectorAll(".scene");

// create scene for every slide
for (var i = 0; i < slides.length; i++) {
  new ScrollMagic.Scene({
      triggerElement: slides[i],
      duration: 500
    })
    .setPin(slides[i])
    .addIndicators() // add indicators (requires plugin)
    .addTo(controller);
}

function get_random_color() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.round(Math.random() * 15)];
  }
  return color;
}

$(".scene").each(function() {
  $(this).css("background-color", get_random_color());
});