Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
←   Май 2014   →
 1
 2
 3
03.05.2014
09:05:44
11:05:56
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery Интерактивный фон для сайта


Интерактивный фон для сайта

Как вы думаете, каким способом еще можно выделить свой сайт не используя звуковые эффекты при посещении, яркие цвета и при этом не раздражать пользователя? А как вам идея с интерактивным фоном? Конечно, данный эффект подойдет далеко не всем сайтам, но всё же. Если фон будет немного перемещаться в зависимости от положения указателя мыши. Я думаю в этом определенно что-то есть.

Как пользоваться?

HTML часть

Скачиваем библиотеку jQuery(здесь) и плагин jQuery.interactive_bg.js(здесь), затем подключаем:

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.interactive_bg.js"></script>

Размещаем блок <div> с атрибутом data-ibg, в котором задаем путь до фонового изображения:

1
2
3
4
5

<body>
  ..
  <div class="bg" data-ibg-bg="bg.jpg"></div>
  ..
</body>

jQuery часть

А перед закрывающим тегом </body> вставляем функцию для работы этого плагина:

1
2
3
4
5
6
7

$(".bg").interactive_bg({
   strength: 25,
   scale: 1.05,
   animationSpeed: "100ms",
   contain: true,
   wrapContent: false
 });

Более подробное описание каждого свойства:

  • strength — это свойство отвечает за скорость движения фона в зависимости от перемещения курсора. По умолчанию равно 25.
  • scale — задает насколько сильно увеличится фоновое изображение при наведении курсора мыши.
  • animationSpeed — скорость увеличение/уменьшения фонового изображения наведении курсора. Задается в миллисекундах. По умолчанию равно «100ms».
  • wrapContent — данный элемент позволяет сделать так, что в определенном контейнере все элементы будут реагировать на перемещение курсора. По умолчанию значение false.

Вывод

Лично мне очень понравился данный плагин, потому что он может привнести что-то новое для сайта и может выделить на фоне остальных. Только не ставьте очень большую скорость, в этом случае можно лишь отпугнуть посетителя.
В избранное