Текст со сменным фоном с помощью jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Демонстрация для сайта RUDEBOX</title>

</head>

<body>

</div>

</body>

</html>

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

body {

background-color: #000000;

}

.scrollBg {

background-image: url(background.jpg);

background-color: #000000;

width: 487px;

height: 83px;

}

.scrollBg img {

display: block;

}

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

1	<script type="text/javascript" src="url_to_moving_background.js"></script>

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

$(document).ready(function() {

moveBgAround();

});

function moveBgAround() {

//задайте произвольное значение от 0 до 400 для оси X и Y

var x = Math.floor(Math.random()*401);

var y = Math.floor(Math.random()*401);

//случайно сгенерированное время для того, чтобы двигать

var time = Math.floor(Math.random()*1001) + 2000;

//заставляйте изображение двигаться

$('.scrollBg').animate({

backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'

}, time, "swing", function() {

moveBgAround();

});

}

</script>

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