Scrolling animation footer

Question

Currently, I see a footer when a page scrolls past a given value, but would like it to show when a user scrolls, rather than just appearing on the screen (as is currently the case).

It would be interesting to know if this can be achieved with CSS transitions or best practice.

Live example http://jsfiddle.net/robcleaton/3zh6h/

CSS

#footer { background: black; width: 100%; height: 48px; position: fixed; z-index:300; bottom: 0; display: none; } #footer ul.navigation li { float: left; margin-right: 16px; display: block; } 

Js

 $(function(){ $(window).scroll(function() { $('#footer').toggle($(document).scrollTop() > 100); }); })​ 

HTML

 <div id="footer"> <div class="content-wrap"> <ul class="navigation"> <li><a href="#about">About</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#support">Support</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- content-wrap END --> </div><!-- footer END -->​ 

Answer 1

You can do the following which will use CSS transitions

JQuery

We want to add or remove a class from the footer depending on the scroll position

 $(function(){ $(window).scroll(function(){ if($(document).scrollTop() > 100) { $('#footer').addClass("show"); } else { $('#footer').removeClass("show"); } }); })​ 

CSS

Then, using CSS, show or hide the footer based on the presence of this show class. We can use css transitions to animate changes.

 #footer { background: black; width: 100%; height: 0px; position: fixed; z-index:300; bottom: 0; overflow:none; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } #footer.show { height: 48px; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } 

As you can see above, we change the height of the footer when it is shown. overflow:none; stops the contents of the footer if the height is 0.

Using this method, you can also fade in the footer by setting opacity or change color.

JS Fiddle:

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/

Answer 2

You can animate the footer with fadeIn () and fadeOut () jQuery effects.

 $(window).scroll(function() { if($(document).scrollTop() > 100) $('#footer').fadeIn(); else $('#footer').fadeOut(); }); 

If you dig deep enough into these effects, you will find that both animate () effects are opaque.

Answer 3

I liked experimenting with your problem and I did not see anyone else trying to do this ( Fiddle ):

 $(function() { $(window).scroll(function() { $("#footer").fadeTo("500", $(document).scrollTop() / 100); }); })​ 

This solution will also cause the footer to disappear if the user scrolls.

There is one main drawback of this solution: since it uses the fadeTo() method, support in IE will be extremely limited (in fact, it will break in most versions of IE - I can’t remember what support is for 9 and 10). You can work around this using one of a dozen plugins / patches to add support in IE for animating the opacity property and change that solution accordingly (using animate() instead of fadeTo() ).

Let me know if you have any questions. Good luck! :)

Answer 4

I think it should be like this:

http://jsfiddle.net/gQqLJ/

 $(function() { $(window).scroll(function() { if ($(document).scrollTop() > 100) { $('#footer').slideDown(650); }else if($(document).scrollTop() < 100){ $('#footer').fadeOut(500); } }); })​;​ 

Answer 5

JQuery and animations

Something like this, I would suggest using a combined slide effect and fade out. This is a much more natural look, and therefore does not cause user noise.

Working script: http://jsfiddle.net/3zh6h/32/

Corresponding piece of code (not used in the script, but here to demonstrate how to do this taking into account the best coding methods):

 jQuery.fn.slideFadeToggle = function(speed, easing, callback) { return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); }; 

Best practics

As for best practices, you can find a very nice post about custom animations and how to record them repeatedly using here .

There is no “jQuery footer animation” per se, at least that I know of, but you can use popular popular websites to know what works and what doesn't. Examples of them will not be useful, as it depends on the nature and context of your website.

CSS

I would not recommend CSS transitions, since the specifications are not finalized (official projects, discussions can be found here ).

In addition, they are not compatible with multiple browsers, especially wrt older browsers. But then again, this is just my opinion.