Текст со сменным фоном с помощью jQuery
В данном уроке мы рассмотрим весьма интересную уловку, с помощью которой вы сможете сделать красивый эффект скользящего фона в тексте непосредственно средствами jQuery, так же мы будем использовать некоторые знания с области adobe photoshop. Для этого мы создадим контейнер с движущимся фоном, но он будем видимым только в наборе букв. Это будет выглядеть так, как будто в контейнере много дырок. А после этого мы заставим фон контейнера двигаться и создавать классный эффект.
Первым шагом будет использование фотошопа, для начала создаем новое изображение (ctrl+n), и заполняем фон цветом маски. (это часть будет видна посетителям. в примере используется черный цвет)
Именно эти буквы будут выполнять роль «дырок» в контейнере и через них будет виден эффект. Затем удерживая нажатой клавишу CTRL, нажмите на иконку текстового слоя:
Таким образом Вы выберете весь текст, и вот так это будет выглядеть:
Далее нажимаем Select > Inverse
Таким образом выбрали все кроме текста.
Теперь выберите fill layer (заполнить слой) и нажмите “Add mask”:
Спрячьте текстовый слой:
Сохранять необходимо в формате png. После создания «маски» необходимо немного HTML кода. Для основы можете использовать следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Демонстрация для сайта RUDEBOX</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <div class='scrollBg'> <img src='overlay.png' alt='' /> </div> </body> </html> |
Мы создали простую HTML страницу с 2-мя элементами: контейнер “scrollBg” и изображение, которое выступает в роли «маски». Теперь немного CSS стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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> |
После подключения плагина, необходимо его инициализировать и задать некоторые настройки в шапке документа.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript"> $(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 — это количество пикселей, на которое будет сдвинуто фоновое изображение. Плагин не будет двигать на заданное количество пикселей, а будет двигать к сгенерированным координатам. Если хотите сделать, чтобы изображение двигалось еще больше, тогда Вам необходимо увеличить число в строке:
1 |
var x = Math.floor(Math.random()*401); |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 04.09.2011 в 01:23, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |