23 декабря 2011 г.

Падающие снежинки на css3


В канун нового года на своем сайте хочется навести красоту и украсить "по новогоднему" некоторые страницы падающими снежинками.

Выбор инструментов реализации пал на css3 анимацию. И как не трудно догадаться у такого решения есть и положительные и отрицательные стороны.
К положительным сторонам можно отнести:
  • относительную простоту реализации;
  • и отсутствие необходимости в сторонних компонентов.
К минусам:
  • Поддерживает только FireFox и Chrome(Webkit) (Opera 11.5x не поддерживает css3 анимацию).
В интернете я нашел уже готовый демонстрационный пример http://natbat.net/code/clientside/css/snowflakes/, который я взял за основу.
Переделать мне его пришлось дважды:
  • Первый пример использует в качестве снежинок символы юникод.
  • Второй пример где используются спрайтовые картинки для снежинок.
Как показало тестирование на разных компьютерах, символы юникода в качестве снежинок - не самый лучший выбор. Так как на некоторых компьютерах вместо снежинок падали квадратики или иероглифы.
Пересказывать как сделаны падающие снежинки на css3 довольно скучно, поэтому ограничусь демонстрацией исходников:
Первый пример - Рабочий пример на jsfiddle
Второй пример - исходники на Googlcode

Комментариев нет:

Отправить комментарий