Mostrar div cuando la posición de desplazamiento

Question

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

Espero que alguien me ayude.

Answer 1

Básicamente, desea agregar una clase "HideMe" para cada elemento que desee oculta (a continuación, establece que la clase a la "opacidad: 0";

Luego, usando jQuery establece un $ (ventana). de desplazamiento() evento para comprobar la ubicación de la parte inferior de cada elemento "HideMe" contra el borde inferior de la ventana visible

Aquí está la carne de ella ...

/* 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 una jsFiddle completa.: 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 jQuery website y consultar some examples.

Para ayudar a que funcione, y tal vez darle algunas ideas si ya está familiarizado con jQuery, podría intentar lo siguiente ... averiguar qué tan abajo en la página está su div, escuchar 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 div que ha calculado), ejecute 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

Pruebe 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}