Mostrar Div cuando se desplaza la posición

First of all i would like to refer to this website: http://annasafroncik.it/ I love the way the animations come into view. Is it hard to create a similar function in jquery? Are there any plugins to create such an effect?

Hope someone will help me out.

preguntado el 01 de febrero de 12 a las 14:02

3 Respuestas

Basically, you want to add a "hideme" class to every element you want hidden (then you set that class to "opacity:0";

Then, using jQuery you set a $(window).scroll() event to check the location of the bottom of every "hideme" element against the bottom edge of your visible window.

Here's the meat of it ...

/* 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);

        }

    }); 

});

Here's a full jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/

Respondido 25 Feb 15, 17:02

Wow i love this example, very clear and clean code! Problem solved - idbranding

You mentioned a plugin, so here's one I just threw together: timothyaaron.com/js/fadein.on.scroll.js It automatically hides todos elements outside the current view, and fades them in on scroll (using a "hideme" class element, so make sure you're not using that for any other reason). - Timothy Aaron

I updated your jsfiddle (jsfiddle.net/e5qaD/1151) to speed up large pages. The update turns off the scroll listener when all have been shown and only fades in the items if needed. - beingalex

I'm no expert at all here, but I get the feeling nowadays you should use .offset() más bien que .position(). Also, just on a side note, it's important to use opacity en lugar de jQuery's hide(), toggle(), etc, as the later actual mess up the element's position. - Cregox

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. So, yes, if your offset parent is anything other than the document you'd have to use .offset(). I'll adjust the code to reflect this. - Timothy Aaron

Plugins? Maybe, but you could definitely build any animation combinations you could imagine with jQuery by yourself. If you have a firm grasp on selectors and CSS, the sky's the limit! I'd suggest starting on the sitio web de jQuery y echando un vistazo algunos ejemplos.

To help get the ball rolling, and maybe give you some ideas if you're already familiar with jQuery, you could try the following...figure out how far down the page your div is, listen for scroll events, and when the div comes into focus (i.e.: the page has been scrolled past the div's position you worked out), run an animation. Something like:

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

I hope I haven't messed up my syntax!

Respondido 01 Feb 12, 19:02

Try this . It worked for me

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

and the css for this is

.showmydiv{display:block}

respondido 06 nov., 17:11

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.