ansaurus

Question

How can I create a color striped background, animated to slowly turn 360 degrees, using no raster images or js?

Answer 1

+1 A:

If you have a basic image (or text or something else), you can use CSS3 transformations to move it (this is what is used on FoWD's 404 page - a static image transformed using CSS3 transformations). They aren't well supported in many browsers, but you can use it if you know your target supports it. This page shows how to create rotation effects with CSS transformations: http://davidwalsh.name/css-transform-rotate. Also, this is the code used on FoWD's 404 page to make the image spin:

#earth {
    -webkit-animation-name: earthRotation;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 500s;
}

@-webkit-keyframes earthRotation {
from {
    -webkit-transform: rotate(0deg);
    }
to {
    -webkit-transform: rotate(360deg);
    }
}

So, with a simple HTML page like:

<html>
<head>
<meta charset="UTF-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="animation.css" />
</head>
<body>
<div id="earth" style="text-align: center;">This content will spin!</div>
<div style="text-align: center;">This will not :(</div>
</body>
</html>

If animation.css is the CSS stuff from above, the content of div#earth will spin forever! Then, you can replace the "This content will spin!" with your own stuff. If you want to use it as the background (as in FoWD's 404 page), just add the CSS position: absolute; width: 100%; z-index: -1; so it will appear as the background. Then, you could put your <canvas> stuff inside div#earth and it will spin away. Also, you can adjust -webkit-animation-duration in the CSS file to modify the speed of the animation.

If you can't use CSS3 transformations because of browser support, then it is pretty much impossible to create without animated images or javascript.

jake33 2010-07-07 05:52:16

Cool, thanks for the feedback! I was looking at the CSS and saw what you wrote here. I think that's the easy part! haha Now if I can figure out how to make striped bg using canvas, I think this would work great. I'm surprised CSS3 doesn't already have a way to reproduce some indefinite stripes already.

Micah 2010-07-07 06:18:44

Also, you could check out https://developer.mozilla.org/en/Canvas_tutorial/Transformations from the canvas tutorial (https://developer.mozilla.org/en/Canvas_tutorial) on Mozilla Developer Center.

jake33 2010-07-07 06:41:53

Cool, thanks for the links Jake. That'll get me started.

Micah 2010-07-07 08:55:54

ansaurus

tags:

views:

answers:

How can I create a color striped background, animated to slowly turn 360 degrees, using no raster images or js?

related questions