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}