<main>
  <h1>Effet Scroll</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  
  <figure>
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" width="100" /> 
    <img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" width="100" />
  </figure>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
</main>
figure{
  position: relative;
  left: 60%;
  opacity: 0;
  transition : all 1.5s ease;
}
body{
  overflow-x: hidden;
}
(function() {
  var img = document.querySelectorAll("figure")[0];
  var posImg = img.offsetTop;
  function effet(){
    var posCurseur = this.pageYOffset;
    if(posImg-posCurseur<300){
      img.style.left = 0;
      img.style.opacity = 1;
    }else{
      img.style.left = "30%";
      img.style.opacity = 0;
    }
  }
  window.addEventListener("scroll", effet);
}).call(this);



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.