Stellar.js può modificare gli offset degli elementi durante il ridimensionamento delle finestre?

Question

C'è un modo per reinizializzare stellar.js su ridimensionamento browser/finestra in modo che gli offset degli elementi vengano riadattati?

Answer 1

Dopo un po 'di investigazione, ho capito questo. Nel mio caso, ho "diapositive", che contengono i miei elementi stellari, e sono dimensionati in base alla larghezza/altezza della finestra. Avevo bisogno di ridimensionarli per cambiare l'orientamento della tavoletta.

$(window).resize(function(){ 
    winHeight = $(window).height(); 
    $("#scrollWrapper > div").height(winHeight); 

    // Find out all my elements that are being manipulated with stellar 
    var particles = $(window).data('plugin_stellar').particles; 

    // Temporarily stop stellar so we can move our elements around 
    // data('plugin_stellar') let's me access the instance of stellar 
    // So I can use any of its methods. See stellar's source code 
    $(window).data('plugin_stellar').destroy(); 

    $.each(particles, function(i, el){ 
     // destroy() sets the positions to their original PIXEL values. 
     // Mine were percentages, so I need to restore that. 
     this.$element.css('top', ''); 

     // Once the loop is finished, re-initialize stellar 
     if(particles.length - 1 == i){ 
      $(window).data('plugin_stellar').init(); 
     } 
    }); 
}); 

Se non importa che gli elementi vengono impostate sui valori dei pixel originali per sinistra/in alto, allora si può solo chiamare distruggere & init uno dopo l'altro:

$(window).data('plugin_stellar').destroy(); 
$(window).data('plugin_stellar').init(); 

Se istanziare stellare su un elemento (ad esempio, $("#element").stellar(); anziché $.stellar();) quindi sostituire "finestra" con il selettore.

Answer 2

Prima di tutto, sembra che potresti avere un problema con l'allineamento orizzontale (supponendo che sia un sito verticale). Se è così, è probabile che solo è necessario disabilitare lo scorrimento orizzontale:

$.stellar({ 
    horizontalScrolling: false 
}); 

Se questo non risolve il problema, Stellar.js dispone di una funzione non documentata che consente di aggiornare il plugin.

Per esempio, supponiamo che hai usato Stellar.js in questo modo:

$.stellar(); 

è possibile aggiornare con il seguente:

$.stellar('refresh'); 

Così, per aggiornarlo sul ridimensionamento, si potrebbe fare qualcosa del genere:

$(window).resize(function() { 
    $.stellar('refresh'); 
}); 

Speriamo che questo risolva tutto per te.

Answer 3

Ho notato anche dispari sui cellulari che potrebbero essere causati dal modo in cui Firefox/Chrome ridimensiona la visualizzazione Web quando si scorre verso il basso, quando la barra della posizione diventa nuovamente visibile?

La risposta alla tua domanda è in una sezione del documentation: "Configurazione di tutto":

// Refreshes parallax content on window load and resize 
responsive: false, 

Quindi, questo è falso per impostazione predefinita. Per abilitare ciò, utilizzare .stellar({responsive:true})

La vera domanda è ... perché questo è disabilitato di default? Sembrava risolvere il problema che stavo notando, tranne che per iOS.