Parallax + Intersection Observer

/* Paralaxe */
/**
  * La parti commentée doit être rajouté à chaque nouvelle "observation"
  * Ne pas oublier de mettre les keyframes voulu si vous voulez en utiliser d'autre
  */

.paralax{
  background-image: url('img/mrrobot2.jpg');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.paralax h1{
  color: red;
  font-size: 120px;
  text-align: center;
  text-transform: uppercase;
}

.imgSlideInLeft{
  position: relative;
  bottom: -110px;
  width: 40%;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}

.imgSlideInRight{
  position: relative;
  bottom: -100px;
  right: -450px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}

/* .fadeIn{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
} */

@-webkit-keyframes fadeInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width:1024px){
  .imgSlideInLeft{
    bottom: -60px;
  }
  .imgSlideInRight{
    bottom: -80px;
    right: -235px;
  }
}

@media (max-width:768px){
  .imgSlideInRight{
    bottom: -60px;
    right: -130px;
    width: 40%;
  }
}

@media (max-width:426px){
  .paralax h1{
    font-size: 70px;
  }
  .imgSlideInLeft{
    bottom: -190px;
    width: 60%;
  }
  .imgSlideInRight{
    bottom: -100px;
    right: -250px;
    width: 40%;
  }
}

// Intersection Observer 
// En commentaire tout ce qui doit être rajouter pour faire une observation supplémentaire
// Ne pas oublier de rajouter dans le css les animations sur l'objet observé 

var imgLeft;
var imgRight;
// var fadeIn;

var prevRatio = 0.0;
var fadeInLeft = "fadeInLeft";
var fadeInRight = "fadeInRight";
/**
 * var fadeInRight sauvegarde le nom de la keyframes qui sera utilisé pour lancé l'animation
 */

window.addEventListener("load", function(){
    imgLeft = document.querySelector(".imgSlideInLeft");
    imgRight = document.querySelector(".imgSlideInRight");
    // fadeIn = document.querySelector(".fadeIn");

    createObserver();
}, false);

function createObserver(){
    var observerLeft;
    var observerRight;
    // var observerFadeIn;

    var options = {
        root: null,
        rootMargin: "0px",
        thresholds: 0.2
        /**
         *  threshold = entre 0.0 et 1.0 (ratio de visibilité du bloc pour déclenchement de l'action
         */ 
    };

    observerLeft = new IntersectionObserver(handleIntersectLeft, options);
    observerLeft.observe(imgLeft);

    observerRight = new IntersectionObserver(handleIntersectRight, options);
    observerRight.observe(imgRight);

    // observerFadeIn = new IntersectionObserver(handleIntersectFadeIn, options);
    // observerFadeIn.observe(fadeIn);
}

function handleIntersectLeft(entries){
    entries.forEach(function(entry){
        if(entry.intersectionRatio > prevRatio){
            entry.target.style.animationName = fadeInLeft;
        }

        prevRatio = entry.intersectionRatio
    });
}

function handleIntersectRight(entries){
    entries.forEach(function(entry){
        if(entry.intersectionRatio > prevRatio){
            entry.target.style.animationName = fadeInRight;
        }

        prevRatio = entry.intersectionRatio
    });
}

// function handleIntersectFadeIn(entries){
//  entries.forEach(function(entry){
//      if(entry.intersectionRatio > prevRatio){
//          entry.target.style.animationName = fadeInLeft;
//      }
//      prevRatio = entry.intersectionRatio
//  });
// }