27

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.

0

3 Answers 3

62

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/

6
  • 1
    Wow i love this example, very clear and clean code! Problem solved
    – idbranding
    Commented Feb 1, 2012 at 16:24
  • 1
    You mentioned a plugin, so here's one I just threw together: timothyaaron.com/js/fadein.on.scroll.js It automatically hides all 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). Commented Feb 1, 2012 at 16:26
  • 2
    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
    Commented Sep 23, 2013 at 10:30
  • 1
    I'm no expert at all here, but I get the feeling nowadays you should use .offset() rather than .position(). Also, just on a side note, it's important to use opacity instead of jQuery's hide(), toggle(), etc, as the later actual mess up the element's position.
    – cregox
    Commented Feb 24, 2015 at 13:27
  • 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. Commented Feb 25, 2015 at 14:47
7

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 jQuery website and checking out some examples.

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!

0
-1

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}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.