В последнее время методики разработки весьма расширились, новые приемы и подходы весьма упрощают верстку при этом возможности хорошего разработчика ограничиваются только фантазией мастера. В данном уроке мы рассмотрим возможности небольшой анимации с помощью css и jquery. Этот эффект будет работать только в браузерах поддерживающих трансформации, во всех остальные эффект будет отображаться некорректно. С помощью данного преобразования можно отлично подчеркнуть необходимую информацию на сайте.

Данный эффект полностью основан на правилах CSS. Тогда зачем тут нужен jQuery? Данная нужен для автоматизации генерации CSS кода. И так, приступим.

Шаг 1. HTML

Для начала создадим стек изображений. По умолчанию, положение каждого из изображений будет отличаться друг от друга поворотом на несколько градусов. Далее инициируем вращение изображений вокруг своей оси.

Как вы заметили код достаточно прост. В результате чего мы получаем веерную анимацию вращающихся изображений на 360 градусов за 3 секунды в одну сторону, потом в другую.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: