Changement d'image basé sur le défilement avec animation jQuery

Question

J'ai un site web sur lequel je veux que le logo change en fonction de la hauteur de défilement. Je veux aussi qu'il s'estompe entre les deux logos. Je suis nouveau en Javascript et jQuery mais j'ai ce code qui fonctionne à l'exception de l'animation :

jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 400) {
        $(".logo-main").attr("src","IMAGEURL1")
    } else {
         $(".logo-main").attr("src","IMAGEURL2")
    }
 });

Le logo change parfaitement lors du défilement. Mais je veux qu'il se fane de l'ancien logo au nouveau. J'ai essayé ceci :

jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 400) {
        $(".logo-main").fadeIn().attr("src","IMAGEURL1")
    } else {
         $(".logo-main").fadeOut().attr("src","IMAGEURL2")
    }
});

Mais cela provoque la dissipation du logo "haut" (celui dans le else) avant que l'autre logo ne soit prêt. Il ne revient pas non plus lorsque vous remontez en haut.

En ce moment, il change juste vers la bonne image, mais il saute simplement vers elle. Je veux qu'il se fane d'une image à l'autre.

P.S. C'est sur WordPress donc je ne peux pas contrôler la structure HTML du logo. C'est pourquoi j'utilise .attr().

Answer 1

Pour réaliser l'effet de fondu puis de fondu enchaîné, vous pouvez faire quelque chose comme ceci :

$(".logo-main").fadeOut(function(){
  $(this).attr("src","IMAGEURL").fadeIn();
});

La fonction passée attendra que le logo ait disparu avant d'appliquer le changement à la source (src) et de réapparaître en fondu. Plus d'informations ici dans la documentation .fadeOut()

Vous voudrez également ajouter une condition pour vérifier si l'URL actuelle du logo correspond déjà à celle que vous souhaitez changer, sinon le logo disparaîtra puis réapparaîtra à chaque défilement, même si l'image reste la même.

Voici un code auquel j'ai pensé. J'ai transformé le changement du logo en sa propre fonction pour éviter de répéter du code.

jQuery(window).scroll(function () {

  // Récupérer l'URL actuelle du logo
  var currentURL = $(".logo-main").attr("src");

    if (jQuery(window).scrollTop() > 400) {
      // Changer le logo en IMAGE1 lorsque scrollTop > 400

        // Changer seulement si l'URL du logo ne correspond pas à IMAGE1
        if(currentURL !== "IMAGE1") { changeLogo("IMAGE1") }

        }
     else {
       // Changer le logo en IMAGE2

        // Changer seulement si l'URL du logo ne correspond pas à IMAGE2
        if(currentURL !== "IMAGE2") { changeLogo("IMAGE2") }

    }

    function changeLogo(url){
      $(".logo-main").fadeOut(function(){
        $(this).attr("src", url).fadeIn();
      });
    }
});

J'espère que cela vous aidera.

Answer 2

Voici comment vous pouvez éviter qu'il ne disparaisse deux fois !

let isScrolling = true; //une variable pour arrêter le .scrollTop >= 400 de se répéter
$(document).ready(function() {
    $(window).on("scroll", function() {
      if ($(window).scrollTop() >= 400 && isScrolling) {
        $(".logo").fadeOut(400, function(){
          $(".logo").fadeIn(400).attr("src","URL-de-l'image 1");  
        });
        isScrolling = false;
      } else if ($(window).scrollTop() < 400 && !isScrolling) {
        $(".logo").fadeOut(400, function(){
          $(".logo").fadeIn(400).attr("src","URL-de-l'image 2");
        });
        isScrolling = true;
      }
    });
  });

En fait, lorsque vous faites défiler, l'événement de défilement est déclenché à chaque fois que l'écran se déplace vers le bas (scrollTop() est calculé pour chaque pixel déplacé), c'est pourquoi l'image disparaissait et réapparaissait plusieurs fois. J'espère que cela vous aide :)