jquery - content - Mostrar div cuando la posición de desplazamiento

scroll fade content

Question

Antes que nada me gustaría referirme a este sitio web: http://annasafroncik.it/ Me encanta la forma en que las animaciones salen a la luz. ¿Es difícil crear una función similar en jquery? ¿Hay algún complemento para crear tal efecto?

Espero que alguien me ayude.

Answer 1

Básicamente, desea agregar una clase "hideme" a cada elemento que desea ocultar (luego establece esa clase a "opacity: 0";

Luego, usando jQuery, configura un evento $ (ventana) .scroll () para verificar la ubicación de la parte inferior de cada elemento "hideme" en el borde inferior de la ventana visible.

Aquí está la carne de eso ...

/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$(''.hideme'').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it in */
if( bottom_of_window > bottom_of_object ){
$(this).animate({''opacity'':''1''},500);
}
});
});

Aquí hay un jsfiddle completo: http://jsfiddle.net/tcloninger/e5qaD/

Answer 2

Complementos? Quizás, pero definitivamente podrías construir cualquier combinación de animación que puedas imaginar con jQuery por ti mismo. Si tiene una comprensión firme de selectores y CSS, ¡el cielo es el límite! Sugiero comenzar en el sitio web de jQuery y ver algunos ejemplos .

Para ayudar a poner el juego en marcha, y tal vez darte algunas ideas si ya estás familiarizado con jQuery, podrías intentar lo siguiente ... averiguar qué tan abajo en la página está tu div , escuchar los eventos de desplazamiento, y cuando el div entra en foco (es decir: la página se ha desplazado más allá de la posición del div usted resolvió), ejecuta una animación. Algo como:

<div id="my_div">Some content</div>
<script type="text/javascript">
$(document).ready(function() {
var my_div = $("#my_div");
var div_top = my_div.offset().top;
$(document).scroll(function() {
if (div_top <= $(document).scrollTop()) {
// do some cool animations...
}
});
});
</script>

¡Espero no haber estropeado mi sintaxis!

Answer 3

Prueba esto . Funcionó para mí

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$("body").addClass("allowshow");
} else {
$("body").removeClass("allowshow");
}
});

y el CSS para esto es

.showmydiv{display:block}