Захотелось моей половинке анимированное облако тегов в ЖЖ. Казалось бы, в сети полным-полно вариаций на эту тему: крутящихся, интерактивных, выбирай любое. Но всё это богатство либо на javascript, либо на flash. И прикрутить это к журналу нельзя (стандартный аккаунт, про платные не в курсе).
Нужно было вращающееся облако тегов, написанное на чистом css3. Сразу оговорюсь, решить задачу удалось лишь частично. Попытки что-то лучшее найти не увенчались успехом, в свое время даже публиковал вопрос на Хабре.
Собственно, вот что у меня получилось:
github.com/paratrooper5730/css3AnimatedTagcloud (код)
3611.livejournal.com/ (журнал с примером).
Для создания анимации, создается правило @keyframes, в котором указаны начальное, конечное, и, опционально, промежуточные свойства объекта. А для самого объекта указываются свойства animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction. Таким образом оперделяется, какие преобразования происходят с объектом, с какой скоростью и в каком направлении. Есть много учебных ресурсов на эту тему, я пользовался w3schools.com.
Сразу перейду к ограничениям, на которые я наткнулся.
В свойстве animation-name для одного объекта можно указать несколько @keyframes, но они будут выполняться одновременно — нельзя зациклить одно преобразование с периодами в 10 секунд и параллельно другое с периодами в 5.
Возможности animation-timing-function очень ограничены. Теоретически, можно прописать какое угодно поведение объектов, с помощию большого количества промежуточных состояний в @keyframes. Но на практике, анимация шла неказисто, с рывками.
Пришлось упростить самому себе задачу: «дальняя» часть облака не видна, элементы появляются из небытия, и туда же уходят.
Для этого я использую 2 преобразования.
Вот это отвечает за движение сверху вниз:
@keyframes tagmove{
from { top:-80px; }
to { top:80px; }
}
А вот это — за «выплывание» тегов с заднего плана на передний и обратно from { opacity: 0; }
@keyframes coloring {
50% { opacity: 1; }
to { opacity: 0; }
}
Чтобы облако было равномерным и красивым, может потребоваться подогнать параметры animation-duration и animation-delay для разных эелементов. Значения, которые там прописаны — это рукотворный рандом. Также можно заморочиться и использовать абсолютное позиционирование, чего я делать не стал. Исходное расположение Тегов в облаке дает нужный псевдослучайный разброс по горизонтали и вертикали.
Вот, пожалуй, и всё. Буду рад советам, как сделать лучше
Автор: paratrooper5730
