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.

idbranding
  • 729
  • 3
  • 10
  • 15

3 Answers3

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/

Timothy Aaron
  • 2,889
  • 17
  • 22
  • 1
    Wow i love this example, very clear and clean code! Problem solved – idbranding Feb 01 '12 at 16:24
  • 1
    You mentioned a plugin, so here's one I just threw together: http://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). – Timothy Aaron Feb 01 '12 at 16:26
  • 2
    I updated your jsfiddle (http://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 Sep 23 '13 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 Feb 24 '15 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. – Timothy Aaron Feb 25 '15 at 14:47
  • This is EXACTLY what I was looking for. This should be marked somehow :) – Gjert Feb 13 '16 at 21:50
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!

Chris Kempen
  • 9,193
  • 5
  • 36
  • 52
-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}
Shuhad zaman
  • 2,298
  • 22
  • 25