<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://images.unsplash.com/photo-1485546246426-74dc88dec4d9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7f0bc29050a6d9a793469d897455f7da" alt="" width="50%" /> 
    
  </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%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition : all 1.5s ease;
}
body{
  overflow-x: hidden;
}
(function() {
  var fig = document.querySelectorAll("figure")[0];
  var posImg = fig.offsetTop;
  function effet(){
    var posCurseur = this.pageYOffset;
    if(posImg-posCurseur<300){
      fig.style.left = 0;
      fig.style.opacity = 1;
    }else{
      fig.style.left = "160%";
      fig.style.opacity = 0;
    }
  }
  window.addEventListener("scroll", effet);
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.