tobypitman.com

CSS3 Scrolling Header Image

Here’s a cool thing you can do with the CSS3 animations behaviour. An infinitely scrollling header image!!

Take an image exactly 3 times the height of your header (make sure it tiles!! I use the ‘offset’ plugin in Photoshop ) and assign it to the background of the header. In this example my image is 450px high.

#header {

    height: 150px;

    background-image: url(cloud.png);

    background-position: 0% 0%;

}

You’ll need to assign ‘background-image’ and ‘background-position’ separately.

Now build a @-webkit-keyframes animation like so. The ‘moveIt’ is the name of the animation.

@-webkit-keyframes moveIt {

     0% {

          background-position: 0% 0%;

     }

     100% {

          background-position: 0% 150%;

     }

}

As of today Safari is the only browser that supports these types of animations so you’ll have to use it to view the demo.

Now assign the animation behaviours to the header CSS.

#header {

    height: 150px;

    background-image: url(cloud.png);

    background-position: 0% 0%;

    -webkit-animation-name: moveIt;

    -webkit-animation-duration: 20s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

}

You can see I’ve called the animation name ‘moveIt’. Then we have ‘duration’, count and timing. In the actual animation setup the image is being moved 150% of the height of the header. This seems to line up the images as it jumps back to zero. Don’t ask me how I worked this out I just got lucky!!!

View the Demo

Posted on Monday, June 14th, 2010 at 12:00 am.

Filed under CSS, Web Design.