Grow your CSS skills. Land your dream job.

jQuery Bouncing Hidden Footer

  • # September 12, 2012 at 9:03 pm

    I just came up with this footer idea where the top of the background image/navigation should stay fixed just above the bottom of the page. When you hover over this the rest of the footer, which is hidden, will slide up. When you mouse out, it will fall again and bounce ever so slightly at the bottom.

    Trouble is, I’m having trouble getting it to actually work.

    Here’s the HTML:

    body

    div class=”container”

    p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p

    img src=”beer.jpeg”

    div id=”sliding-footer”
    ul
    li Events li
    li Beer li
    li Contact li
    li Social li
    ul

    p And the rest of the footer…p

    div !– end container –

    body

    And the CSS:

    body {
    margin: 0 50px;
    background: url(‘backing.jpg’) repeat scroll bottom left !important;
    line-height: 1;
    }

    .container {
    margin: 25px auto;
    width: 1000px;
    }

    .container img {
    margin: 25px 50px;
    }

    #sliding-footer {
    position: fixed;
    bottom: -330px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    background-image:url(‘bg-slider.png’);
    }

    #sliding-footer ul {
    margin: 30px 0 0 70px;
    float: left;
    width: 100%;
    list-style-type:none;
    z-index: 9999;
    }

    #sliding-footer ul li {
    float: left;
    margin: 15px 20px;
    padding: 0;
    display:inline;
    }

    And the jQUERY: Which I put in the head.

    $(document).ready(function () {
    $(‘#sliding-footer’).bind(‘mouseenter’, function () {
    $(this).stop().animate({bottom: 0}, 750, ‘easeInExpo’);
    }).bind(‘mouseleave’, function () {
    $(this).stop().animate({bottom: ‘-330px’}, 750, ‘easeOutBounce’);
    });
    });

    Thanks for your help! I’m very grateful.

    # September 12, 2012 at 9:10 pm

    Not unlike this: http://jsfiddle.net/Xbak7/314/

    But I want a whole div with background image to do it.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".