Fade sur une fonction scroll / offset

Bonjour tout le monde,
J'ai réussi a faire un système dont la date change quand on scroll sur un post.
Mais j'aimerais que lorsque la date change cela fasse un fade entre les deux dates.
Un fadein en meme temps que le fadeout donc sans blancs entre le deux fade.

Tout ce que j'ai essayé ne mène à rien !!!
Notez qu'il y a aussi un fadeOut quand on arrête de scroller et un fadein quand on recommence le scroll.

Voici le fiddle
http://jsfiddle.net/cdYEZ/9/

Est ce que quelqu'un aurait une idée. ?
Merci !

Bonjour,

Je ne suis pas sûr d'avoir bien compris ce que tu endends par "sans blancs entre les deux fades".

Il pourrait suffire de réduire la durée des fadeOut/fadeIn correspondants pour obtenir un effet visuel acceptable.

A noter que si l'internaute scrolle rapidement sur plusieurs photos, on aura un effet visuel légèrement déplaisant, les fadeOut/fadeIn sur les photos intermédiaires s'exécutant alors qu'on est déjà sur une autre photo (empêcher qu'ils surviennent ou les stopper en cours de route, tout en conservant à l'ensemble une fluidité correcte, ça ne semble pas évident).

Edit : éventuellement, on peut ajouter un mécanisme de timeout au moment où on teste si la date a changé.

Il faut sans doute aussi allonger la durée du fadeOut quand on s'arrête de scroller.

Par exemple :

var $toTop = $('#date,#date2,#date3');
$(document).scroll(function(){  
    $toTop.fadeIn();

    var scrollA = $(document).scrollTop();

    setTimeout(function(){
        if(scrollA == $(document).scrollTop()){
           $toTop.fadeOut();
        }
    }, 800);

})

var newDate="";
var newDate2="";
var newDate3="";
var exDate="";
var exDate2="";
var exDate3="";

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#date').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                newDate=$(this).find('.description').text();
                newDate2=$(this).find('.description2').text();
                newDate3=$(this).find('.description3').text();
                if ((newDate != exDate)||(newDate2 != exDate2)||(newDate3 != exDate3))
                {
                    exDate=newDate;
                    exDate2=newDate2;
                    exDate3=newDate3;
                    $toTop.fadeOut(50,function(){
                        $('#date').html(newDate);
                        $('#date2').html(newDate2);
                        $('#date3').html(newDate3);
                        $toTop.fadeIn(50);}
                    );
                }
                return; //break the loop
            }
        });
    });

})

Amicalement,
Modifié par parsimonhi (22 Jul 2014 - 08:52)

Hello Parsimonhi,
Et merci pour ton code.. c'est super ! c'est pratiquement ce que je souhaite.

En fait quand je dis sans blancs entre les deux fades, c'est à dire que les deux s'enchainent, L'élément qui fadeOut se superpose un petit instant à l'élément qui se fadeIn comme sur l'exemple ci -dessous :
http://jsfiddle.net/r2GdM/

Crois tu que c'est possible à partir de ton code..?
J'ai essayé de changer 2 3 trucs mais sans succès…

j'ai fait un fiddle avec ton code :
http://jsfiddle.net/cdYEZ/10/


Merci en tous cas !
Modifié par lambdaka (22 Jul 2014 - 17:06)

Bonjour,

Plus le temps passe, plus je pense que c'est vraiment difficile à faire marcher correctement à cause du temps que prend le fadeIn/fadeOut quand on scrolle d'une part, et qu'on rajoute ensuite un fadeOut quand on s'arrête de scroller. On aura forcément un effet visuel médiocre dès qu'on scrolle un peu vite, notamment au risque de me répéter quand le scroll concerne plusieurs photos en un temps très court.

Pour éviter de déclencher fadeIn/fadeOut sur les photos intermédiaires quand on scrolle rapidement sur plusieurs photos (afin d'éviter un effet de blink vraiment désagréable), il faudrait rajouter des temps de latence sur les fadeIn/fadeOut en question, mais alors on aura un retard indésirable quand le scroll ne concernera que deux photos, ou une date affichée pendant quelques fractions de seconde ne correspondant pas à la photo.

Le code correspondant n'est pas impossible à mettre au point même s'il nécessite un peu de travail (et là, je n'ai pas le temps nécessaire pour le faire). Mais je crains encore une fois d'après quelques tests que j'ai déjà fait que le résultat ne soit jamais bon quelque soit les réglages que l'on fera en particulier sur le temps de latence avant de déclencher un fadeIn/fadeOut, et sur la durée des fadeIn/fadeOut. Il me semble bien meilleur visuellement de changer "brutalement" la date quand on passe d'une photo à une autre comme tu le fais déjà (éventuellement en passant par un état où aucune date est affichée quand le scroll est entre deux photos), et de se contenter d'un seul fadeIn/fadeOut au démarrage et à la fin d'un scroll.

Amicalement,