Footer to animate in on scroll

Question

I currently have the footer appearing once the page has scrolled past a set point but would like to make it reveal as the user scrolls instead of just appearing on screen (as it currently does).

Would be interested to know if it can be achieved with CSS transitions or best practise.

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

What animation did you have in mind? jQuery can probably [animate it](http://docs.jquery.com/Effects/animate) — Owlvark, Nov 17 '12 at 19:28

score 13 · Accepted Answer · answered Nov 18 '12 at 14:12

You can do the following which would make use of 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, display or hide the footer based on the presence of that show class. We can use css transitions to animate the change

#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 are changing the height of the footer when showing it. The overflow:none; stops the contents of the footer from showing when the height is 0.

With this method you can also fade in the footer by setting opacity values, or animate a change in the colour.

JS Fiddle:

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

score 0 · Answer 2 · answered Nov 06 '12 at 13:40

0

You could 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 uses animate() effect with opacity.

answered Nov 06 '12 at 13:40

a0viedo

199
1
11

This is just a fade, I was after more of a animation – Rob Nov 07 '12 at 13:25

Zachary Kniebel · Answer 3 · 2012-11-21T18:34:01.780

I had some fun experimenting with your issue and I haven't seen anyone else try this (Fiddle):

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

This solution will also fade the footer back out if the user scrolls back up.

There is one major drawback of this solution: because it uses the fadeTo() method, support in IE is going to be extremely limited (actually, it will break in most versions of IE - I can't remember what the support is for 9 and 10). You can get around this by using one of a dozen plugins/fixes to add support in IE for animating the opacity property, and modify this solution accordingly (using animate() instead of fadeTo()).

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

score 0 · Answer 4 · answered Nov 23 '12 at 20:10

I think this should be the way:

http://jsfiddle.net/gQqLJ/

$(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 100) {

            $('#footer').slideDown(650);

        }else if($(document).scrollTop() < 100){

            $('#footer').fadeOut(500);
        }
    });
});

score 0 · Answer 5 · answered Nov 24 '12 at 10:14

JQuery & Animations

For something like this, I would advise using a combination effect of slide and fade. It's far more natural looking and therefore doesn't jar the user when occurring.

The working fiddle: http://jsfiddle.net/3zh6h/32/

The relevant code snippet (not used in the fiddle, but here to demonstrate how to do this with coding best practices in mind):

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

Best Practices

With regards to best practices, you can find a very nice post about custom animations and how to write them in a re-usable way here.

There are no "jquery footer animation" best practices as such, at least that I know of, but you can draw from popular, well designed websites to know what works and what doesn't. Examples of these would be no good, since it depends on the nature and context of your website.

CSS

I wouldn't advise CSS transitions since the specs are not finalized (official drafts, discussions can be found here).

Also, they are not cross-browser compatible especially w.r.t. older browsers. But then again, that's just my opinion.

Footer to animate in on scroll

5 Answers5

jQuery

CSS

JS Fiddle: