Grow your CSS skills. Land your dream job.

Trouble with controlling sliding backgrounds

  • # March 27, 2013 at 12:54 pm

    Hi all,

    I’m making a website (html5/css3) and I’ve run into something I’m not sure how to do.

    I have links down the left hand side, when you hover over the links the respective page background slides into view from the right hand side of the screen. If you click the link then it loads the page and jumps to the different background image, instead of sliding.

    How do I keep the sliding animation going if a link is clicked before the hover animation is over?

    CSS:

    .container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    }

    .container img
    {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -60;
    }

    .container li img
    {
    position: absolute;
    top: 0;
    left: 2000px;
    z-index: -50;
    -webkit-transform: translateZ(0);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    }

    nav
    {
    position:absolute;
    z-index: 600;
    bottom: 40px;
    width: 100%;
    height: 100%;

    }

    nav h1
    {
    padding: 20px;
    color: #ccc;
    text-align: right;
    font: 28px Georgia, Times, serif;
    }

    ul
    {
    position:absolute;
    z-index: 30;
    width: 100%;
    height: 100%;
    list-style: none;
    }

    li a
    {
    z-index: 1;
    display: block;
    padding-left: 20px;
    padding-top: 15px;
    width: 230px;
    height: 50px;
    color: #68D;
    text-decoration: none;
    font: 22px/30px Helvetica, Verdana, sans-serif;
    font-variant:small-caps;
    }

    HTML:

    Any help would be very much appreciated! :)
    Cheers,
    Storm08

    # March 27, 2013 at 1:05 pm

    Can you post a simple version of your site on http://codepen.io?

    # March 27, 2013 at 1:26 pm

    >Can you post a simple version of your site on http://codepen.io?

    With working images.

    However, I’m pretty sure the answer will be javascript to handle the whole thing.

    # March 28, 2013 at 11:06 am

    Sorry about wait, thanks very much for the replies!

    here you go:

    http://cdpn.io/IfjDk

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

You must be logged in to reply to this topic.

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