All geek questions in one place

How to create rotating cog with CSS3 and jQuery?

I have the following site which is in Flash with spinning gears in the background:

http://thedrivepartnership.com/index.html

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

+6
source share
5 answers

I suppose what you can do is create a container that fills the window, and then put the gears in that container.

For example, you can place a container containing animation at the top of the file with a very low z-index, which is suitable for the window and has a fixed position. You place your content on top and pretend css4 just came out with support for .avi backgrounds. Just kidding. The 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; }

CSS-based animation works like this, but with various vendor prefixes:

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

And then you apply the animation like this:

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

Without writing the animation inside the canvas element, I think you will be pretty limited. In particular, scaling animations according to different resolutions will be difficult (impossible) with strict css and html. It can still look cool, although perhaps it still meets your needs. Also, if the animation is not supported, you can still have a cool array of gears in the background or just go back to javascript based animation.

I put together a basic example of how you could do this with css and html. Here is the full screen . There are still questions that I think ... This is definitely incomplete ... But, I hope, a step in the right direction. You can expand the same methods to more gears to look more like your current page.

If you chose this route (and I'm not sure I recommend it), it would be better to design an animation with a resolution that would look good in the range from 800x600 to 1400x100. If you have statistics, go to the most common size of your window.

+5
source

Try this on Chrome. This is specific to webkit, Chrome and Safari browsers. Replace "-webkit" with "-moz" for Mozilla and "-o" for Opera. Or just uninstall it for newer versions of the browser.

 .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; }
+2
source

I'm afraid that before the HTML5 canvas tag you will need to use a GIF ..

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

0
source

Rotation is a two-dimensional transformation, so something like:

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

You can use the font-awesome ping cog icon if you do not want to use your own images.

The font-awesome icon can be implemented using <i class="fa fa-cog"></i> after adding the font to your project.

-1
source

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

More articles:


All Articles