Aid in web development

Asked

Viewed 76 times

-3

Hello, everybody!

I am learning how to develop websites and would like a help, on the website of the editor I use, Tom, has an "animation" that I found fantastic. Follow the website link: https://atom.io. On the website you can see the animation.

What I would like to know is how to make an animation like this and what I should study to learn how to make this kind of animation. Some API, Framework ???

javascript html css
  • 1

    Hello @Gratefullydead, This effect is done with CSS. You should study CSS Animation: W3C link, talking about, the effect is done using 10 images (SVG) at different rotation speed.

1 answer

2


I took a look at the website you gave us and visualized how this animation is performed.

Explanation about the animation

Although it is very beautiful, it is quite simple to be accomplished. We have apparently two images. Being one of them (the circle) formed by several SVG images together.

  • For the "animal astronaut" to move up and down, the following CSS command was used:
animation: hero-octonaut 2s alternate ease-in-out infinite;
  • For the circles that keep spinning, they are a set of SVG files, where each one is running at apparently a different speed. The CSS command for this is:
animation: hero-logo-circle 1s linear infinite;
  • It was also used, to differentiate the speed, the property animation-duration.

Studies

Well, I believe you already know HTML5, but if you don’t know start there. Then CSS3 and then the Javascript.

To achieve a similar effect in any application, you will achieve only with HTML5 and CSS3.

Search for CSS Animation, Keyframes and for Using SVG with HTML5 and CSS3.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.