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

 

Замысел работы наших блоков состоит вот в чем, что вся анимация в данном эффекте является трансформацией CSS3. JavaScript используется только для обработки события click и устанавливает/удаляет соответствующие классы. Почему не использовался JavaScript для анимаций, чтобы получить поддержку в более широком списке браузеров? CSS3 лучше подходит для решения таких задач.

 Для начала нам необходимо создать HTML-разметку. Каждый блок имеет подзаголовок, который виден только в неактивном состоянии блока, и еще один элемент div, который содержит все, что выводится в активном состоянии.

Затем стилизуем контейнер и текст который будет находится в данных блоках с помощью CSS:

Затем определяем для плавающих блоков позиционирование и размер:

Каждый блок имеет общие свойства, обрезку выступающего контента, абсолютное позиционирование, и одинаковую скорость анимации:

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

Теперь заставляем наши блоки скользить с помощью jQuery, мы сделали функцию rotate, которая устанавливает соответствующие классы блокам в зависимости от текущего значения current.

Затем нам необходимо чтобы блоки возвращались на обратную позицию, для этого мы устанавливаем обработчик события click для каждого блока. Когда происходит нажатие, мы определяем с помощью ID номер блока и устанавливаем значение current, а затем вызываем функцию rotate.

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