entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

Animacion scroll

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.

1voto

Leonardo-Tadei comentado

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?

0voto

manuel26892 comentado

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.

1voto

Leonardo-Tadei comentado

Hola @manuel26892,

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

1 Respuesta

1voto

manuel26892 Puntos1360

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.

0voto

Peter comentado

Gracias por compartir la solución!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta