Как вы думаете, каким способом еще можно выделить свой сайт не используя звуковые эффекты при посещении, яркие цвета и при этом не раздражать пользователя? А как вам идея с интерактивным фоном? Конечно, данный эффект подойдет далеко не всем сайтам, но всё же. Если фон будет немного перемещаться в зависимости от положения указателя мыши. Я думаю в этом определенно что-то есть. Поэтому переходите в полную новость и смотрите демо, чтобы быстрее понять о чем я здесь пишу.
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться? — Интерактивный фон для сайта
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».
- contain — лучше один раз увидеть и вы поймете за что отвечает данное свойство. В Демо 4 данный параметр установлен в значение false, а во всех остальных случаях в true.
- wrapContent — данный элемент позволяет сделать так, что в определенном контейнере все элементы будут реагировать на перемещение курсора. По умолчанию значение false.
Проблемы с установкой? Посмотри видео!
Вывод
Лично мне очень понравился данный плагин, потому что он может привнести что-то новое для сайта и может выделить на фоне остальных. Только не ставьте очень большую скорость, в этом случае можно лишь отпугнуть посетителя.