likerRr
@likerRr
front-end developer

Как сделать летающие буквы, собирающиеся в слово?

Всем привет.

Стоит задача примерно следующая: на странице летают буквы (хаотично, могут повторяться), а по событию (например, клик) должны выстроиться в слово (заведомо известное). Готовых решений не нашел. Посоветуйте, на каких технологиях (css анимации, canvas, dom) будет проще это сделать и, может, несколько примеров удачных есть у кого?
  • Вопрос задан
  • 1771 просмотр
Пригласить эксперта
Ответы на вопрос 3
@kirill-93
Можно обернуть каждую букву в тег и просчитать позицию, где каждая буква должна находиться в слове. А затем запустить анимацию на js. Суть анимации в смене позиции. При клике выставлять просчитанную позицию, чтобы получить слово.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. Генерируем столько слоёв (DIV) с нужными буквами в центре, сколько букв в слове.
2. Вокруг хаотично заполняем другими через неразрывные пробелы (можно даже поместить в другой контейнер, чтобы иметь возможность манипуляции) и начинаем вращать эти слои (можно относительно точки, а можно и относительно центра, можно сразу оба вращения): создаётся видимость буквенного хаоса.
3. По клику - собираем через абсолютную позицию каждого слоя, составляя нужное слово, если другие не нужны - гасим их.

Этим способом можно собирать целые рассказы и стихи, а при вращении - менять текст на любой, какой угодно.
Главное - это точные координаты абсолютного позиционирования.
Ответ написан
alsopub
@alsopub
Посмотрите это - codepen.io/netgfx/pen/DpbIy
Кнопки "Split letters" и "Reverse", вроде очень похоже на то что нужно.
Может быть немного доработать.
PS. Используется jQuery.js и TweenMax.js
PPS. Еще текстовые анимации - может найдете что-то более подходящее - blog.bassta.bg/2013/05/text-animation-with-tweenmax
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы