Modifier l'opacité en fonction du décalage actuel des éléments

Question

J'essaie de régler le opacity pour certaines images, en fonction de chaque offset . Le problème est que l'opacité n'est pas la même pour toutes les images si vous faites défiler l'écran vers le bas.

C'est ce que j'essaie d'accomplir, pour cada image :

################
#              #
#              #
#              #
#   === <= opacity 1
#              #
#   *** <= opacity 0.6
#              #
################

    ... <= opacity 0

Actuellement, cela ne fonctionne que pour les premières ~2-3 images. Toutes les images suivantes ne sont pas définies à partir de 0-1 plutôt que de 0.5-40 ou autre.

Un autre problème est que, si le décalage de défilement est 0 toutes les images sont cachées...

C'est ce que j'ai fait jusqu'à présent :

var $win = $(window);
var $img = $('img');

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $img.each(function () {
        var $self = $(this);

        $self.css({
            opacity: scrollTop / $self.offset().top
        });
    });

}).scroll();

http://jsfiddle.net/ARTsinn/c5SUC/0/

Une idée sur la façon de faire fonctionner ce système ?

Answer 1

Vous pouvez essayer

var $win = $(window);
var $img = $('img');

$win.on('scroll', function () {
var scrollTop = $win.scrollTop();

$img.each(function () {
    var $self = $(this);
    var prev=$self.prev().offset();
    var pt=0;
    if(prev){
        pt=prev.top;        
    }
    $self.css({
        opacity: (scrollTop-pt)/ ($self.offset().top-pt)
    });
    console.log(scrollTop+" / "+$self.offset().top+"-"+pt);
});

}).scroll();    

http://jsfiddle.net/mQHEs/
EDIT

var $win = $(window);
var $img = $('img');

$win.on('scroll', function () {
var scrollTop = $win.scrollTop();

$img.each(function () {
    var $self = $(this);
    var prev=$self.prev().offset();
    if(prev){
        var pt=0;
        pt=prev.top;    
        $self.css({
            opacity: (scrollTop-pt)/ ($self.offset().top-pt)
        });
    }
    else{          //SHOW FIRST IMG
        $self.css({
            opacity: 1
        });
    }  
});

}).scroll();     

http://jsfiddle.net/mQHEs/1/