В данном уроке мы рассмотрим весьма интересную уловку, с помощью которой вы сможете сделать красивый эффект скользящего фона в тексте непосредственно средствами jQuery, так же мы будем использовать некоторые знания с области adobe photoshop. Для этого мы создадим контейнер с движущимся фоном, но он будем видимым только в наборе букв. Это будет выглядеть так, как будто в контейнере много дырок. А после этого мы заставим фон контейнера двигаться и создавать классный эффект.

Первым шагом будет использование фотошопа, для начала создаем новое изображение (ctrl+n), и заполняем фон цветом маски. (это часть будет видна посетителям. в примере используется черный цвет)

Именно эти буквы будут выполнять роль «дырок» в контейнере и через них будет виден эффект. Затем удерживая нажатой клавишу CTRL, нажмите на иконку текстового слоя:

Таким образом Вы выберете весь текст, и вот так это будет выглядеть:

Далее нажимаем  Select > Inverse

Таким образом выбрали все кроме текста.

Теперь выберите fill layer (заполнить слой) и нажмите “Add mask”:

Спрячьте текстовый слой:

Сохранять необходимо в формате png. После создания «маски» необходимо немного HTML кода. Для основы можете использовать следующий код:

Мы создали простую HTML страницу с 2-мя элементами: контейнер “scrollBg”  и изображение, которое выступает в роли «маски». Теперь немного CSS стилей:

Если Вы создадите изображение других размеров — не забудьте изменить его размеры в стилях. Также если изображение будет иметь другое имя — не забудьте его также заменить. Javascript поможет нам менять расположение фона в произвольном порядке. Для этого нам необходим плагин, так как по умолчанию jQuery не умеет такое делать.

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

Все очень просто. Оси X и Y — это количество пикселей, на которое будет сдвинуто фоновое изображение. Плагин не будет двигать на заданное количество пикселей, а будет двигать к сгенерированным координатам. Если хотите сделать, чтобы изображение двигалось еще больше, тогда Вам необходимо увеличить число в строке:

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