¿Puede stellar.js reajustar las compensaciones de elementos en el tamaño de la ventana?

Question

¿Hay alguna forma de reinicializar stellar.js en el tamaño del navegador/ventana para que los desplazamientos de los elementos se reajusten?

Answer 1

Después de un poco de investigación, he descubierto esto. En mi caso, tengo 'diapositivas', que contienen mis elementos estelares, y están dimensionadas para el ancho/alto completo de la ventana gráfica. Necesitaba cambiar su tamaño para cambiar la orientación de la tableta.

$(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(); 
     } 
    }); 
}); 

Si no importa que los elementos consiguen el sistema a sus valores de píxeles originales para izquierda/superior, a continuación, puedes llamar a destruir & init uno tras otro:

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

Si crear instancias estelares en un elemento (es decir, $("#element").stellar(); en lugar de $.stellar();) luego reemplazar "ventana" con su selector.

Answer 2

En primer lugar, parece que podría tener un problema con la alineación horizontal (suponiendo que es un sitio vertical). Si es así, lo más probable es que sólo tiene que desactivar el desplazamiento horizontal:

$.stellar({ 
    horizontalScrolling: false 
}); 

Si esto no resuelve el problema, Stellar.js tiene una característica no documentada que le permite actualizar el plugin.

Por ejemplo, vamos a suponer que utilizó Stellar.js así:

$.stellar(); 

puede actualizar con lo siguiente:

$.stellar('refresh'); 

Así, para refrescar en cambio de tamaño, se puede hacer algo como esto:

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

Esperemos que esto debería arreglar todo para usted.

Answer 3

También noté compensaciones extrañas en los móviles que pueden ser causadas por la forma en que Firefox/Chrome cambia el tamaño de la vista web cuando se desplaza hacia abajo, cuando la barra de ubicación vuelve a ser visible?

La respuesta a su pregunta es en una sección de la documentation: "Configuración de todo":

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

Por lo tanto, esto es falso por defecto. Para habilitar esto, use .stellar({responsive:true})

La verdadera pregunta es ... ¿por qué está deshabilitado por defecto? Parecía arreglar el problema que estaba notando, excepto para iOS.