jQuery scrollTo ma rallentare inbetween

Question

sto usando un semplice pezzo di codice (a base di 'ScrollTo Posts with jQuery', che consente di fare clic su un collegamento successivo/precedente e salterete fino alla parte superiore di ogni post.

Ho la mia struttura HTML così va post> immagine> post> immagine ecc.

Mi chiedo se è possibile che se si fa clic sul pulsante successivo/precedente, si scorre al post successivo come normale, ma esso si blocca/passa sopra le immagini/div inbetween? Quindi alla fine completa la sua scroll, ma rallenta oltre i div inbetween.

Ecco il mio codice jQuery:

$(function() { 
    function a(f) { 
     var b, e, c = [], 
      d = $(window).scrollTop(), 
      g = $('.section-slide'); 
     g.each(function() { 
      c.push(parseInt($(this).offset()['top'], 10)) 
     }); 
     for (e = 0; e < c.length; e++) { 
      if (f == 'next' && c[e] > d) { 
       b = g.get(e); 
       break 
      } 
      if (f == 'prev' && e > 0 && c[e] >= d) { 
       b = g.get(e - 1); 
       break 
      } 
     } 
     if (b) { 
      $.scrollTo(b, { 
       duration: 1400 
      }) 
     } 
     return false 
    } 
    $('#next,#prev').click(function() { 
     return a($(this).attr('id')) 
    }); 
    $('.scrolltoanchor').click(function() { 
     $.scrollTo($($(this).attr('href')), { 
      duration: 1400 
     }); 
     return false 
    }) 
}); 

Answer 1

Assumendo che la struttura rimarrà statica: post -> Immagine -> post -> immagine ecc è possibile ottenere questo risultato, trovando l'immagine precedente/successiva al post che sarà scrolling a, e lo scorrimento ad esso prima, quindi utilizzare il onAfter callback/impostazione dal plugin $.scrollTo di sparare un rotolo secondario dopo un predefinito setTimeout come questo:

$(function() { 
    function scroll(direction) { 
     var scroll, scrollImage, i, 
      positions = [], 
      here = $(window).scrollTop(), 
      collection = $('.post'); 

     collection.each(function() { 
      positions.push(parseInt($(this).offset()['top'], 10)); 
     }); 

     for (i = 0; i < positions.length; i++) { 
      if (direction == 'next' && positions[i] > here) { 
       scroll = collection.get(i); 

       // Find Image Before Post 
       scrollImage = $(scroll).prev('.image').get(0); 

       break; 
      } 
      if (direction == 'prev' && i > 0 && positions[i] >= here) { 
       scroll = collection.get(i - 1); 

       // Find Image After Post 
       scrollImage = $(scroll).next('.image').get(0); 

       break; 
      } 
     } 

     if (scroll) { 
      // Check if Scroll Image Exists 
      if (scrollImage){ 
       // Scroll with Image Delay 
       $.scrollTo(scrollImage, { 
        duration: 750, 
        onAfter: function(){ 
         setTimeout(function(){ 
          $.scrollTo(scroll, { 
           duration: 750 
          }); 
         }, 1000); // Change the Delay to Increase/Decrease the Hover 
        } 
       });     
      } else { 
       $.scrollTo(scroll, { 
        duration: 750 
       }); 
      } 
     } 

     return false; 
    } 

    $("#next,#prev").click(function() { 
     return scroll($(this).attr('id')); 
    }); 

    $(".scrolltoanchor").click(function() { 
     $.scrollTo($($(this).attr("href")), { 
      duration: 750 
     }); 
     return false; 
    }); 
}); 

È possibile trovare un violino aggiornata qui: http://jsfiddle.net/hfg2v/2/

Spero che questo aiuti.

Answer 2

Questo sta accadendo perché stai usando una libreria a scorrimento parallasse (Stellar.js), che fa scorrere diversi elementi a velocità diverse.

Una possibile soluzione sarebbe quella di scorrere ad una velocità più elevata quando nessun elemento è nella finestra corrente fino a che il bordo dell'elemento successivo è appena fuori dallo schermo, quindi scorrere immediatamente alla velocità di scorrimento originale finché non vi sono elementi a nuovamente il viewport e continua a ripeterlo finché non raggiungi l'offset di scorrimento desiderato.

Edit:

Spiacenti, si avvicinò mentre stavo scrivendo la mia risposta e non ho avuto il tempo di finire il codice.

Tuttavia, dopo aver lavorato su di esso per un po 'di tempo sto iniziando a pensare che la mia soluzione proposta non avrebbe funzionato. Stavo pensando qualcosa del genere:

$(window).scrollTo(640, {onAfter: function() { 
    var scrollRatio = 3; 
    var distance = 855 - 640; 

    $(window).scrollTo(855, { 
     easing: 'linear', 
     duration: distance * scrollRatio/speed, 
     onAfter: function() { 
      var scrollRatio = 1; 
      var distance = 1200 - 855; 
      $(window).scrollTo(1200, { 
       easing: 'linear', 
       duration: distance * scrollRatio/speed, 
       onAfter: function() { 
        var scrollRatio = 3; 
        var distance = 1280 - 1200; 
        $(window).scrollTo(1280, { 
         easing: 'linear', 
         duration: distance * scrollRatio/speed 
        }); 
       } 
      }); 
     } 
    }); 
}}); 

Se si incolla il codice precedente nel sito previsto per la questione (http://dev.du.st/field-station/), sarai portato al primo elemento, e tenterà di scorrere a il prossimo usando il metodo che ho descritto. Ho codificato i valori di offset perché stavo ancora sperimentando. Tuttavia, non penso che questo approccio funzionerebbe dal momento che non si sente ancora. Questo perché la velocità istantanea nel mezzo dell'animazione sarà sempre evidente.

In questo momento, penso che il modo migliore in cui è possibile attenuare lo scorrimento lento è che lo scorrimento di parallasse sta causando utilizzando una diversa funzione di andamento. Dopo tutto, rendere le immagini di sfondo più lente, è esattamente quello che stai usando per lo scrolling della parallasse.

Il codice seguente, quando correva nel tuo sito web, renderebbe tutte le animazioni usano 'easeOutCirc' per la loro funzione di andamento per impostazione predefinita, dopo alcuni esperimenti, ho trovato ad essere quello che fa lo scorrimento sentire almeno strano:

// Add the jQuery-easing plugin, needed for the more sophisticated easing functions. 
$.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'); 

// Set easeOutCirc as the default easing. 
jQuery.easing.def = 'easeOutCirc'; 

puoi trovare altre funzioni di andamento a this website

una volta fatto sperimentare, se si decide di utilizzare un alleggerimento (è possibile utilizzare quelli diversi per lo scorrimento su e giù), allora probabilmente si dovrebbe tenere l'attenuazione di default così com'è, e basta modificare l'andamento nell'animazione di scorrimento aggiungendo {easing: EASING_NAME} all'hash delle opzioni nella funzione scrollTo. Quindi il tuo codice sarà simile a questo:

$.scrollTo($($(this).attr("href")), { 
    duration: 750, 
    easing: 'easeOutCirc' 
});