How to make flying letters gathering into a word?

Question

css

Hello.
The task is approximately the following: letters fly on the page (chaotically, they can be repeated), and on an event (for example, a click) they must line up in a word (obviously known). I didn't find any solutions. Advise on which technologies (css animations, canvas, dom) it will be easier to do this and, maybe, does anyone have a few successful examples?

Answer 1

You can wrap each letter in a tag and calculate the position where each letter should be in the word. And then run the animation on js. The essence of animation is to change position. When clicking, set the calculated position to get the word.

Answer 2

1. We generate as many layers (DIV) with the desired letters in the center as there are letters in the word.
2. Randomly fill around with others through non-breaking gaps (you can even place them in another container to be able to manipulate) and start rotating these layers (you can relative to the point, but you can also relative to the center, both rotations are possible at once): the appearance of literal chaos is created.
3. By clicking - we collect through the absolute position of each layer, composing the desired word, if others are not needed - we extinguish them.
In this way, you can collect entire stories and poems, and when rotating, you can change the text to whatever you like.
The main thing is the exact coordinates of the absolute positioning.

Answer 3

Have a look at this - codepen.io/netgfx/pen/DpbIy
The "Split letters" and "Reverse" buttons seem to be very similar.
Could be improved a bit.
PS. Used by jQuery.js and TweenMax.js
PPS. More text animations - maybe you will find something more suitable - blog.bassta.bg/2013/05/text-animation-with-tweenmax