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

 

Для начала необходимо подключить фреймворк в шапку документа HTML:

После этого создаем разметку самого ротатора. Надо заметить, что изображение разделено на 22 кусочка,  по 35 пикселей каждый, у нас получится одно 770 пикселей на 340.

Теперь рассмотрим стили CSS нашего билборда:

Для позиционирования на странице мы придадим значение left на 50% и left margin на негативное значение половины ширины элемента.

Контейнер билборда будет иметь такие же стили, как и сам билборд, кроме фонового изображения, смотрим:

Кусочки нашего изображения имеют ширину 35 пикселей. Кусочки второй рекламы также, но нам необходимо задать им ширину 0. Нам также необходимо задать left margin вторых кусочков на 18 пикселей, поскольку хотим создать вращающийся эффект.

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

Теперь оживляем наш билборд с помощью JavaScript, создав простую функцию. Она будет заставлять первые кусочки исчезнуть (менять ширину на 0). Для эффекта вращения добавляем значение left margin = 18 пикселей:

Если Вы хотите изменить скорость прокрутки, то необходимо заменить значения в строке со словом rotate (500 и 3000)

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