Animated css3 tag cloud
My half wanted an animated tag cloud in LiveJournal. It would seem that the network is full of variations on this topic: spinning, interactive, choose any. But all this wealth is either in javascript or flash. And you can’t fasten it to the magazine (standard account, you don’t know about paid ones).
We needed a rotating tag cloud written in pure css3. I’ll make a reservation right away, it was only partially possible to solve the problem. Attempts to find something better were unsuccessful, at one time even published a question on Habré.
Actually, here's what I got:
github.com/paratrooper5730/css3AnimatedTagcloud (code)
3611.livejournal.com (magazine with an example).
To create an animation, the @keyframes rule is created, which indicates the initial, final, and, optionally, intermediate properties of the object. And for the object itself, the properties animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction are specified. Thus, it is determined which transformations occur with the object, with what speed and in which direction. There are many training resources on this subject, I used w3schools.com.
Immediately move on to the restrictions that I stumbled upon.
In the animation-name property for a single object, you can specify several @keyframes, but they will be executed simultaneously - you cannot loop one transformation with periods of 10 seconds and simultaneously another with periods of 5.
Animation-timing-function features are very limited. Theoretically, you can register any behavior of objects using a large number of intermediate states in @keyframes. But in practice, the animation was plain, jerky.
I had to simplify my task: the “far” part of the cloud is not visible, the elements appear from nonexistence, and go there too.
For this, I use 2 conversions.
Here it is responsible for moving from top to bottom: But this is for “floating out” tags from the background to the front and back
To make the cloud even and beautiful, you may need to adjust the animation-duration and animation-delay parameters for different elements. The values that are written there are man-made random. You can also get confused and use absolute positioning, which I did not do. The initial location of the Tags in the cloud gives the desired pseudo-random horizontal and vertical scatter.
That’s probably all. I will be glad to advice on how to do better
We needed a rotating tag cloud written in pure css3. I’ll make a reservation right away, it was only partially possible to solve the problem. Attempts to find something better were unsuccessful, at one time even published a question on Habré.
Actually, here's what I got:
github.com/paratrooper5730/css3AnimatedTagcloud (code)
3611.livejournal.com (magazine with an example).
To create an animation, the @keyframes rule is created, which indicates the initial, final, and, optionally, intermediate properties of the object. And for the object itself, the properties animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction are specified. Thus, it is determined which transformations occur with the object, with what speed and in which direction. There are many training resources on this subject, I used w3schools.com.
Immediately move on to the restrictions that I stumbled upon.
In the animation-name property for a single object, you can specify several @keyframes, but they will be executed simultaneously - you cannot loop one transformation with periods of 10 seconds and simultaneously another with periods of 5.
Animation-timing-function features are very limited. Theoretically, you can register any behavior of objects using a large number of intermediate states in @keyframes. But in practice, the animation was plain, jerky.
I had to simplify my task: the “far” part of the cloud is not visible, the elements appear from nonexistence, and go there too.
For this, I use 2 conversions.
Here it is responsible for moving from top to bottom: But this is for “floating out” tags from the background to the front and back
@keyframes tagmove{
from { top:-80px; }
to { top:80px; }
}
@keyframes coloring {
from { opacity: 0; }
50% { opacity: 1; }
to { opacity: 0; }
}
To make the cloud even and beautiful, you may need to adjust the animation-duration and animation-delay parameters for different elements. The values that are written there are man-made random. You can also get confused and use absolute positioning, which I did not do. The initial location of the Tags in the cloud gives the desired pseudo-random horizontal and vertical scatter.
That’s probably all. I will be glad to advice on how to do better