Show Div at scroll position

Question

First of all, I would like to refer to this site: http://annasafroncik.it/ I like how animations appear. Is it difficult to create a similar function in jquery? Are there any plugins to create this effect?

Hope someone helps me.

Answer 1

Basically, you want to add a "hideme" class for each element that you want to hide (then you set this class to "opacity: 0";

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

Here is his meat ...

/* 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 the full jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/

Answer 2

Plugins? Perhaps, but you could create any combination of animations that you could imagine using jQuery. If you have a firm grip on selectors and CSS, heaven is the limit! I suggest starting with the jQuery website and checking out a few examples .

To help get the ball, and maybe you will get some ideas if you are already familiar with jQuery, you can try the following ... figure out how far down your div page is, listen to scroll events, and when the div gets into focus (t .e. the page scrolls past the div position you designed), start the 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 have not ruined my syntax!

Answer 3

Try it. It worked for me

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

and css for this is

 .showmydiv{display:block}