clouds

Создание эффекта движения фонового изображения на jQuery

В этой статье мы разберем не только, как создавать эффекты движения фоновых изображений, но и расскажем, как их настраивать (вертикальное, горизонтальное или диагональное движение).

Хотя, концепция анимации и выглядит очень просто, но зато она занимательна для новичков...

HTML

Ничего лишнего в HTML коде. Мы поместим фоновое изображение в элемент div с классом cloud и анимируем его.

CSS

CSS код такой же короткий.

Javascript

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

Плагин

Использование

И так, поехали! Убедитесь, что у вас подключены плагины jQuery и bgscroll. Все настраивается двумя свойствами:

  • scrollSpeed : скорость перемещения
  • direction : направление движения может принимать следующие значения: «v», «h» или «d» (вертикаль, горизонталь или диагональ)

Заключение

Мы надеемся, что плагин будет для вас полезен. Спасибо.

Пример 1Пример 2Скачать исходники


2 комментарий на “Создание эффекта движения фонового изображения на jQuery

  1. Эээ... чот не работает( Я код плагина запихнул в отдельный файл js, который подключил к основному документу, а первый блок с кодом JS просто вставил перед закрывающим body в теге ... консоль выдаёт, что bgscroll undefined. Причём очень много раз — видимо, каждый раз, когда значение бэкграунд-позишна пытается измениться на один пиксель...

    Thumb up 0 Thumb down 0

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