Home/ Questions/Q 891995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:58:47+00:00

I got the idea to create a purely code-driven striped image background when I

  • 0

I got the idea to create a purely code-driven striped image background when I saw Katy Perry’s website:
http://www.katyperry.com/

Then I saw the animation of the rotating earth on FoWD’s 404 page:
http://futureofwebdesign.com/404

I believe this same concept should be possible using html5, css3 and canvas. Here’s what I’m thinking: Have static content text to read while slowly in the bg the stripes (similar to the bg image on Katy’s site) will rotate indefinitely (similarly to FoWD’s graphic) but all without the use of images or additional graphics. Obviously, the target browsers would be Firefox, Chrome and Safari due to limitations in the rest.

Can this be done using no raster images or javascript? I’m a total noob with canvas and javascript but I do understand the concepts used by these technologies but have no clue where to begin with this. It’s more of a proof of concept right now but I’d like to use it for an upcoming project.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0