Question

Mi pregunta va relacionado con superscrollorama, ¿cómo puedo activar una animación cuando se está en un punto concreto sin que este sea los píxeles del heigth?, ya que la página al ser responsive dependiendo del tamaño del navegador este valor será distinto, necesito otro método o forma de indicarle en que punto debe comenzar la animación. Gracias.

Comments

Podrías poner el código en la pregunta o un enlace de la página funcionando para poder entender bien el problema al cambiar de tamaño?

---

No importa, seguí leyendo y he empezado a usar scroll magic aprendiendo a través de la documentación he conseguido solucionar mi problema. Gracias igualmente.

---

Hola @manuel26892,

podrías compartir tu solución al problema poniéndola como respuesta a tu propia pregunta? Seguro que le servirá a muchos!

Answer 1

Lo que uso es una librería de Jquery que se llama http://scrollmagic.io/. La he usado para crear puntos de inicio de animaciones a partir de que un indicador pase por un start(triggerElement) (sea el star la apertura de una etiqueta).

$(document).ready(function(){
    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
        triggerElement: "#productos"
    })
            .setClassToggle("#productos > aside","efecto")
            .addIndicators({name: "1"})
            .addTo(controller)
            .triggerHook(1);            
});

En este caso hago uso de setClassToggle, su función es que un indicador al pasar por el star( triggerElement etiqueta html con id productos) añadirá temporalmente una clase (efecto) que estará definida en el css que tengamos enlazado en nuestro html. En css se hará referencia a dicha clase al igual que cualquier otra y se le añadirá las propiedades css que queramos que afecten a la parte la cual hemos indicado como primer parámetro dentro del setClassToggle. TiggerHook sirve para poner la posición inicial del indicador, siendo sus valores entre 0 y 1. Indicators es un plugin que nos mostrará los indicadores y los distintos puntos, ayuda bastante para perfilar el comienzo y final de la animación, después eliminando la línea desaparecerán pero la animación seguirá produciéndose. Para saber más consultar la documentación oficial de la librería, ya que mis conocimientos sobre esto son un poco vagos y hay un mundo de posibilidades sobre la librería.