How do I create a rotating cog with CSS3 and jQuery?

StackOverflow https://stackoverflow.com/questions/8256765

Question

I have the following site which is in Flash with rotating cogs in the background:

http://thedrivepartnership.com/index.html

I would like to create something similar using CSS and JavaScript - does any one know of any examples out there?

Was it helpful?

Solution

I suppose what you could do is create a container which fills the window, then place your gears in that container.

For example, you might place a container holding the animation in the top of the file with a very low z-index which fits the window and has a fixed position. You'd place your content on top and pretend css4 just came out with support for .avi backgrounds. Just kidding. Code:

<body>
    <div id="cogs">
        // Your awesome cog pictures
    </div>
    <div id="content">
        // Your awesome content
    </div>
</body>

The css for the animation container might look like this:

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

The css based animation works like this, but with varied vendor prefixes:

@keyframes rotateCogOne {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

And then you apply the animation like so:

#cogOne {
    animation: rotateCogOne 60s infinite linear;'
    // which means...
    animation: [name], [duration], [repeat], [easing]
}

Without scripting an animation within a canvas element, I think you're going to be pretty limited. Particularly, scaling the animation to fit different resolutions will be difficult (Impossible?) with strict css and html. It can still look cool though, so maybe it still meets your needs. Also, where animation isn't supported, you can still have a cool array of gears in the background, or simply fall back to javascript-based animation.

I've thrown together a basic example of how you could do it with css and html. Here it is full screen. There are further issues I think... This is definitely incomplete... But hopefully a step in the right direction. You could extend the same methods to more gears to further resemble your current page.

If you were to take this route (And I'm not sure I recommend it), it would be best to design the animation at a resolution that looked good in a range around 800x600 up to perhaps 1400x100. If you have stats, go by your users' most common window size.

OTHER TIPS

Try this in Chrome. This is specific for webkit browsers, Chrome and Safari. Replace "-webkit" with "-moz" for Mozilla and "-o" for Opera. Or just remove it for newest browser versions.

.cog{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}

or

 .cog{
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}

I'm afraid that before HTML5's canvas-tag you'll need to use GIF's..

EDIT: Scratch the last one.. See: http://css-tricks.com/examples/CSS3Clock/ This will most probably help you.

Rotating is a 2D transform, so something like:

.cog {
    height: 100px; width: 100px;
    transform: rotate(180deg);
    animation-duration: 10s;
}

You could use font-awesome's spinning cog icon, unless you want to use your own images.

The font-awesome icon can be implemented with <i class="fa fa-cog"></i> after you have added font-awesome to your project.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top