Есть ли у вас похожие проекты?

Question

[tokmaganbet1]

Всем привет! Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать? Или уже есть библиотеки для реализации такого?

Comments

[Алексей Уколов]

Видимо, к вопросу должна быть приложена картинка.

[A K]

Вам следует писать тз.

[tokmaganbet1]

Извините, выложил)

[Александр]

Реализовывать на js
Что за идиот придумал такое?

[riot26]

удобно пипец)

Answer 1

[Ivan Bogachev]

Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать?

1. Рисуете все эти дуги, точки и иконки в SVG.
2. Дуги и точки анимируете с помощью transform:rotate и keyframes (поворот от 0 до 1turn, в этом нет ничего сильно замороченного, но оставлю пример для изучения), каждой ставите свое время полного оборота по вкусу.
3. Иконки винды, ведра и айоси подвергаете извороту "туда-обратно" (как в этом примере). Обертку крутите в одну сторону, а иконку в другую - будет выглядеть, как будто они летают по кругу.

Answer 2

[xmoonlight]

Я бы сделал подобное на Crafty.js: там наследование легко делается и поворот, и всё это возможно делать с DOM-объектами без использования Canvas'а (чтобы стили задавать в CSS по-старинке).

Comments

[Максим Тимофеев]

интересная библиотека, но по моему избыточна для данной задачи

[xmoonlight]

Максим Тимофеев, в целом - да. поэтому я и написал "я бы ...". Т.к. мне проще на ней.

Answer 3

[Mikhail Osher]

Так попробуйте сами сделать это и на pure css, и на svg. Интересный опыт, по моему мнению.
Гуглим css animations, svg animations. Дальше всё сами. И технологии подтяните, и навыки поиска информации.

Comments

[tokmaganbet1]

Получилось сделать на css(костыль) - tokmaganbet.ru/sites/business