All geek questions in one place

How to create a colored striped background animated to slowly rotate 360 ​​degrees, without bitmaps or js?

I had the idea to create a cleanly striped background with a code image when I saw the Katy Perry website: http://www.katyperry.com/

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

I believe the same concept should be possible using html5, css3 and canvas. Here's what I think: let the text of the static content read slowly, and the strips (similar to the bg image on the Katy website) rotate endlessly (like the FoWD graphic), but all without the use of images or additional graphics. Obviously, Firefox, Chrome, and Safari will be the target browsers due to limitations otherwise.

Can this be done without bitmaps or javascript? I am a complete noob with canvas and javascript, but I understand the concepts used by these technologies, but don't know where to start. This is more of a proof of concept right now, but I would like to use it for the upcoming project.

+3
source share
1 answer

If you have a main image (or text or something else), you can use CSS3 transforms to move it (this is what is used on the FoWD 404 page - a static image converted using CSS3 transforms). They are not well supported in many browsers, but you can use them if you know that 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 the FoWD 404 page to make the image rotate:

#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, for example:

<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>

animation.css - CSS , div # earth ! " !" . ( FoWD 404), CSS position: absolute; width: 100%; z-index: -1;, . <canvas> div # earth, . , -webkit-animation-duration CSS, .



CSS3 - , javascript.

+2

Source: https://habr.com/ru/post/1753470/

More articles:


All Articles