Parallasse personalizzata

Question

Sto cercando di creare il mio plug -in parallasse personalizzato in modo da poter scegliere la direzione in cui gli elementi passano dallo schermo e sono solo bloccato a assicurarmi che non importa come un utente scorre e indipendentemente dalle dimensioni del finestra che l'oggetto scompare nel punto corretto.

Attualmente ho:

var lastScrollTop = 0;
var logoStartPos = $('.bg-logo').position().left;
$(function(){
   $(window).scroll(function(){

       var st = $(this).scrollTop();
       if (st > lastScrollTop){
          if($('.bg-logo').is(':in-viewport'))
            $('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"});
       } else {
          if($('.bg-logo').is(':in-viewport') && logoStartPos < $('.bg-logo').position().left)
            $('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"});
       }
       lastScrollTop = st;

   }); 
});

Come puoi immaginare, questo sposta solo l'articolo fino a quando non esce dallo schermo. In questo modo ha risultati vari perché se uso la ruota a scorrimento ci vuole più tempo per scomparire se uso la barra di scorrimento. Ho anche un altro problema in quanto se uso una miscela o ho una porta di vista diversa ottengo un risultato diverso insieme.

Qualche consiglio o puntatori per ottenere il risultato che sto cercando?

Un esempio funzionante del mio codice è a http://motoring.egl.me.uk

Grazie Matt

Answer 1

Un po 'datato, ma fyi ...

Nel tuo evento jQuery inizializza o pronto, è necessario inizializzare ogni sezione, articolo, articolo o qualunque cosa sia (elemento.En) per istanziare una funzione di scorrimento, in modo che ognuno abbia la sua funzione di scorrimento.

this.each(function(index) { 

Quindi nella funzione Scroll, gestisci solo l'evento, se è la sezione "corrente". Avrai bisogno di un modo per determinare quale elemento è quello "attuale". Spesso questo viene fatto salvando le dimensioni della finestra di ciascun articolo in un array globale e quindi utilizzandolo rispetto alla posizione corrente.

Qualcosa di simile: (il modo in cui hai progettato il tuo codice sarà probabilmente molto diverso)

// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
   ( (topOffset + $self.height()) > $window.scrollTop() ) )

In questo modo, una volta che un elemento esce dallo schermo, l'elemento successivo dovrebbe diventare "corrente" e continuare a scorrere.