Создание вращающихся лучей с помощью CSS3 анимации и JavaScript

Томас Фукс, создатель script2 (Scriptaculous «вторая итерация») и Zepto.js (мобильный JavaScript фреймворк), создает выдающиеся анимационные элементы на JavaScript. Он легенда по праву, и не зря.

Его работа вдохновила веб-разработчиков во всем мире отказаться от Flash и сделать свой выбор в пользу JavaScript. Из его проектов нам понравились вращающиеся лучи.

Позвольте вам показать, как Томас это сделал!

Пример

CSS

Лучи должны быть выполнены через background, потому что в CSS проще управлять размерами и трансформацией изображений.

JavaScript

Вращающиеся лучи выполнены с помощью JavaScript и CSS3. Первый шаг — определить браузер:

Для определения браузера была использована библиотека MooTools Browser object, но, в принципе, можно использовать и сторонние JS библиотеки.

Как только браузер определен, устанавливаем setInterval переменную, используемую, как интервал периодического обновления вращаемого элемента:

На MooTools это выглядит так:

Устанавливаем на 20 милисекунд, чтобы движение было плавным. Если хотите немного повеселится, то можно поиграть со скоростью. Например, если навести на элемент курсором мыши, то скорость вращения увеличится в 5 раз:

Также отметим, что Safari и Chrome справляются с анимацией лучше остальных браузеров.


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