<!-- Used: 
http://dinbror.dk/blog/blazy/
Blazy for lazy loading

Scrollmagic for scroll animations

-->

<div class="wrapper">
<!-- Fun with figure and figcaption -->
  <figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=100" data-src-small="https://picsum.photos/800/450random?sig=100" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>A Chair</figcaption>
</figure>

<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=110" data-src-small="https://picsum.photos/800/450random?sig=110" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>Some waves</figcaption>
</figure>
<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=120" data-src-small="https://picsum.photos/800/450random?sig=120" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>Mighty mountains</figcaption>
</figure>

<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=130" data-src-small="https://picsum.photos/800/450random?sig=130" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>Foggy person</figcaption>
</figure>

<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=155" data-src-small="https://picsum.photos/800/450random?sig=155" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>Twelve thirty five</figcaption>
</figure>

<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=160" data-src-small="https://picsum.photos/800/450random?sig=160" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>More waves</figcaption>
</figure>
<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=170" data-src-small="https://picsum.photos/800/450random?sig=170" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>Big rocks</figcaption>
</figure>

<figure class="image-wrapper ratio_16-9">
  <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://picsum.photos/1600/900random?sig=190" data-src-small="https://picsum.photos/800/450random?sig=190" alt="This is a sample 16 x 9 image"
  />
  <!-- Fallback for non JavaScript browsers -->
  <noscript><img src="image.jpg" alt="alt-text" /></noscript>
  <figcaption>Window water</figcaption>
</figure>
  </div>

body{
  padding-left: 20px;
  padding-right: 20px;
}

h1{
  font-size: 10rem;
}

figure{
  margin: 0;
}

figcaption{
  padding: 20px;
  font-size: 2rem;
  font-weight: 700;
}

.wrapper{
  max-width: 1200px;
  margin: 20px auto;
}

.image-wrapper {
  background: url("https://cdn.dribbble.com/users/91700/screenshots/3038974/loader.gif")
    center center no-repeat;
  width: 100%;
  position: relative;
  transform: scale(0.8);
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: ease-out;
  img{
    transform: perspective(400px) rotateX(5deg);
    transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: ease;
  }
}

.zap{

    transform: scale(1);
  img{
    transform: perspective(0) rotateX(0);
  }
}

.ratio_16-9 {
  padding-bottom: calc(56.25% + 100px);
  height: 0;
}
.b-lazy {
  max-width: 100%;
  
}

/* transition */
.b-lazy {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  max-width: 100%;
  opacity: 0.2;
}
.b-lazy.b-loaded {
  opacity: 1;
}

$(function() {
  var bLazy = new Blazy({
    breakpoints: [
      {
        width: 600, // max-width
        src: "data-src-small"
      }
    ]
  });
});


$(document).ready(function() {
  // scrollmagic
  var controller = new ScrollMagic.Controller();
  $(".image-wrapper").each(function() {
    var typeIndvScene = new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0.6,
      
    })
      .setClassToggle(this, "zap")
      .addTo(controller);
      
  });
  scene = scene.destroy();
  
});