Iniciar funciones según la posición del SCROLL

[eduardobrutaldeath]

Hola

Por favor necesito una explicación básica de, cómo iniciar animaciones a partir de la posición del scroll. La verdad nunca le he prestado mucha atención al scroll, pero, ahora con los nuevas tendencias, me parece necesario. Me explico por si no me han entendido :

Por ejemplo en Facebook, cuando haces scroll hasta el final de un grupo de imágenes, se cargan otras, y cuando nuevamente llegas al final carga otro grupo, y así hasta que se acabe el banco de imágenes.

He visto que hay un Plugin de Jquery para hacer eso. Yo quisiera hacerlo sólo con el Framework, sin necesidad de Plugins, o sino con Java Script puro. Aquí hay unos ejemplos :

http://ddknoll.github.io/Instagram-Infinite-Scroll/
http://www.ehowenespanol.com/

En general, me gustaría controlar mi web con el SCROLL. Que se ejecuten animaciones cuando el scroll esté a un determinado porcentaje.

[Alexis88]

Básicamente tendrías que trabajar con el evento scroll e ir tomando la cantidad de píxeles desplazados verticalmente con la propiedad scrollY.

Un ejemplo de esto cuando, por ejemplo, se desplaza unos 150 a más píxeles:

Código Javascript:

window.addEventListener("scroll", function(){
    if (this.scrollY >= 150){
        console.log("Te has desplazado 150 píxeles o más desde la parte superior del documento");
    }
}, false);
 

Acá puedes ver un ejemplo que di en otro tema en el que se requería que un vídeo se reproduzca solo cuando sea visible al bajar con la barra vertical.

Y aquí puedes ver otro que hice en el que un conjunto de elementos <div> se desplazan de izquierda a derecha cuando son visibles luego de desplazarse hasta sus respectivas posiciones con la barra vertical.

Como verás, todo está en trabajar con la propiedad scrollY para saber cuánto nos hemos desplazado verticalmente y así realizar determinadas acciones.

Saludos

[eduardobrutaldeath]

Iniciado por Alexis88

Básicamente tendrías que trabajar con el evento scroll e ir tomando la cantidad de píxeles desplazados verticalmente con la propiedad scrollY.

Un ejemplo de esto cuando, por ejemplo, se desplaza unos 150 a más píxeles:

Código Javascript:

window.addEventListener("scroll", function(){
    if (this.scrollY >= 150){
        console.log("Te has desplazado 150 píxeles o más desde la parte superior del documento");
    }
}, false);
 

Acá puedes ver un ejemplo que di en otro tema en el que se requería que un vídeo se reproduzca solo cuando sea visible al bajar con la barra vertical.

Y aquí puedes ver otro que hice en el que un conjunto de elementos <div> se desplazan de izquierda a derecha cuando son visibles luego de desplazarse hasta sus respectivas posiciones con la barra vertical.

Como verás, todo está en trabajar con la propiedad scrollY para saber cuánto nos hemos desplazado verticalmente y así realizar determinadas acciones.

Saludos

Gracias.

Toda mi página está hecha con porcentajes, de alto y ancho

¿Puede funcionar con porcentajes el Scroll en lugar de pixeles?

[Alexis88]

Probando lo sabrás.

Saludos

[Panino5001]

Ojo con esa propiedad: no está ampliamente soportada.
http://help.dottoro.com/ljqklmpm.php
Es más segura esta opción:

Código:

var scrollY=self.pageYOffset || (document.body.scrollTop+document.documentElement.scrollTop);

[Alexis88]

Iniciado por Panino5001

Ojo con esa propiedad: no está ampliamente soportada...

En la documentación que le dejé, también se explica eso.

Saludos

[eduardobrutaldeath]

Iniciado por Alexis88

Probando lo sabrás.

Saludos

NO se puede T_T
Sólo con pixeles funciona

[Alexis88]

¿Y has probado con calcular el porcentaje? Es decir, aplicando la regla de tres simple, si, por ejemplo, la altura del documento fuera de 768 píxeles y quisiera que ocurra algo al bajar a la mitad (50%), simplemente multiplico ese 50 por los 768 píxeles y lo divido entre 100 pues la altura dada representa al 100%. También podrías trabajar con fracciones y simplemente dividir los 768 píxeles entre 2, tú decides.

Saludos

[eduardobrutaldeath]

Iniciado por Alexis88

¿Y has probado con calcular el porcentaje? Es decir, aplicando la regla de tres simple, si, por ejemplo, la altura del documento fuera de 768 píxeles y quisiera que ocurra algo al bajar a la mitad (50%), simplemente multiplico ese 50 por los 768 píxeles y lo divido entre 100 pues la altura dada representa al 100%. También podrías trabajar con fracciones y simplemente dividir los 768 píxeles entre 2, tú decides.

Saludos

Hola

Mi página tiene 3 secciones, cada una mide 100%

Código HTML:

<html>
 <section>
 100%
 </section>
 
<section>
 100%
 </section>
 
<section>
 100%
 </section>
</html>
 

Intenté desplazar la página 100% hacia abajo, o sea 768 pixeles (que es la resolución total de mi pantalla)

Código Javascript:

var scroll = window.screen.height; //768
 
$('span').click(function(){
 $( window ).scrollTop( 768 );
});
 

Cuando hago lo de arriba el cálculo sale mal, es decir, la sección no encaja exactamente sino que pasa por un poco a la SECTION siguiente... Cuando le resto 100 a los 768 encaja perfectamente. ¿Alguien sabe por qué pasa esto? Presumo que la barra puede medir 100 pixeles o quizá 80 y las flechitas 5px. ¿Cuánto mide la barra del scroll?

[Panino5001]

El ancho de la barra de scroll en desktop suele ser de 17px. Para calcular el alto del viewport, usando el doctype de html5, que omitiste, podés usar:

Código:

var hViewport=document.documentElement.clientHeight;

[eduardobrutaldeath]

Iniciado por Panino5001

El ancho de la barra de scroll en desktop suele ser de 17px. Para calcular el alto del viewport, usando el doctype de html5, que omitiste, podés usar:

Código:

var hViewport=document.documentElement.clientHeight;

Hola

Perdón por la ignorancia pero, ¿con viewport te refieres a toda la barra del scroll?
viewport sólo lo había escuchado como valor del atributo NAME de la etiqueta META

Probé el código que pusiste y salió la medida que saqué luego de restar los 100... Bueno en realidad salió 667 (1 menos de lo que yo calculé), o sea que, ese viewport que mencionas debe ser la barra del scroll sin contar las flechas ¿?

[Panino5001]

El viewport es la porción "visible" de la ventana. Hay un tag de html5 del mismo nombre, pero a lo que yo me refería es al rectángulo visible de la ventana, al espacio de visualización real de la pantalla.

[eduardobrutaldeath]

Iniciado por Panino5001

El viewport es la porción "visible" de la ventana. Hay un tag de html5 del mismo nombre, pero a lo que yo me refería es al rectángulo visible de la ventana, al espacio de visualización real de la pantalla.

Ah, entonces lo que antes hice fue calcular el alto de toda la pantalla, incluido el menú del navegador, por eso salían 100 pixeles más; en cambio con tu código sólo la parte visible. Bueno, gracias.