<div class="first"></div>

<div class="second">
    <div class="scroll-inside"></div>
</div>

<div class="third"></div>
 
/* line 1 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* line 8 */
body > div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent center no-repeat;
  background-size: cover;
}
/* line 16 */
body > div.first {
  background-image: url(https://www.audi.com.au/content/dam/nemo/models/a8/a8/my-2018/1920x1080-inline-media-gallery/1920x1080_InlineMediaGallery_AA8_D_171016.jpg);
}
/* line 19 */
body > div.second {
  background-color: #e9e9e9;
  overflow: hidden;
}
/* line 23 */
body > div.third {
  background-image: url(https://www.audi.com/content/dam/gbp/company/layer_audiusa.jpg);
}
/* line 27 */
body .scroll-inside {
  position: absolute;
  right: 0;
  left: auto;
  height: 100%;
  background: #375ca1;
}
const scroll = new Kodhus.KScroll();
scroll.init({
  items: [
    {
      selector: '.first',
      frames: [
        {
          scrollPosition: '0%',
          styles: "transform:translate(0,0%);"
        },
        {
          scrollPosition: '100',
          styles: "transform:translate(0,-100%);"
        }
      ]
    },
    {
      selector: '.second',
      frames: [
        {
          scrollPosition: '0%',
          styles: "transform:translate(0,100%);"
        },
        {
          scrollPosition: '100',
          styles: "transform:translate(0,0%)"
        },
        {
          scrollPosition: '250',
          styles: ""
        },
        {
          scrollPosition: '350',
          styles: "transform:translate(0,-100%)"
        }
      ]
    },
    {
      selector: '.third',
      frames: [
        {
          scrollPosition: '250',
          styles: "transform:translate(0,100%);"
        },
        {
          scrollPosition: '350',
          styles: "transform:translate(0,0%);"
        }
      ]
    },
    {
      selector: '.scroll-inside',
      frames: [
        {
          scrollPosition: '100',
          styles: "width:0%;"
        },
        {
          scrollPosition: '250',
          styles: "width:100%"
        }
      ]
    }
  ]
});