Scroll fade-in element

Salut, Je suis entrain de rajouté un effet de fade-in lorsque je scroll la page d'un site en jquery. J'ai trouvé un bon tuto cela fonctionne mais j'ai un problème. Je veux que la première section de ma page puisse apparaitre avec un fade-in sans que je scroll obligatoirement ma page. Car pour le moment tant que je scroll pas, il n'y pas d'élément qui apparait et je bloque sur mon code:

J'ai inclus mon JS dans WordPress d'où "jQuery" à la place de "$"

JS

 jQuery(window).scroll(function(){
      jQuery('.fade-in').each(function() {
          var top_of_element = jQuery(this).offset().top;
          var bottom_of_element = jQuery(this).offset().top + jQuery(this).outerHeight();
          var bottom_of_screen = jQuery(window).scrollTop() + jQuery(window).innerHeight();
          var top_of_screen = jQuery(window).scrollTop();

          if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element) && !jQuery(this).hasClass('visible')) {
              jQuery(this).addClass('visible');
          }
      });
  });

CSS

.fade-in{
opacity: 0;
transition: all 1s ease-out;
}

.fade-in.visible{
opacity: 1;
}

Modifié par tc-web (17 May 2021 - 07:09)