Апрель 9, 2016 Запись была обновлена
Интерактивный фон для сайта + видео
Как вы думаете, каким способом еще можно выделить свой сайт не используя звуковые эффекты при посещении, яркие цвета и при этом не раздражать пользователя? А как вам идея с интерактивным фоном? Конечно, данный эффект подойдет далеко не всем сайтам, но всё же. Если фон будет немного перемещаться в зависимости от положения указателя мыши. Я думаю в этом определенно что-то есть. Поэтому переходите в полную новость и смотрите демо, чтобы быстрее понять о чем я здесь пишу.
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться? — Интерактивный фон для сайта
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.
Проблемы с установкой? Посмотри видео!
Вывод
Лично мне очень понравился данный плагин, потому что он может привнести что-то новое для сайта и может выделить на фоне остальных. Только не ставьте очень большую скорость, в этом случае можно лишь отпугнуть посетителя.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Спасибо! А скажите, если не трудно, как сделать например красивую надпись(не шрифтами, а например как от руки, в примере 5, где на всю страницу.
Алексей, я не совсем понял ваш вопрос. Что значит «надпись от руки»?
)))) ну шрифт какой-нибудь другой. Красивый, кириллический что-ли.
Алексей, ну как вариант, можно сделать изображение (где написать в графическом редакторе нужный текст) и заменить файл «bg.jpg».
Спасибо! Начал только все это изучать. А еще какие варианты, я имею в в виду, чтоб на страничке текст был по середине, зафиксированный.
Фон не адаптивный и это не хорошо
У меня не получилось. Все делал о инструкции и на сайт не стало. Либо для joomla 2.5 не подходит либо у меня руки кривые….. 💡
Максим, возможно у Вас конфликтуют библиотеки jQuery, если Вы подключали ту, что я привожу в уроке. Также может быть такое что Ваша версия jQuery не поддерживает некоторые свойства, которые необходимы для этого плагина.
Мои рекомендации: попробуйте отключить Ваш скрипт jQuery и оставить только этот. Либо не подключать этот:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script></code>У меня почему-то не работает, вроде все делал по инструкции, но толку нету. Хотел посмотреть видео на данном сайте, а оно тоже не грузит. Может у меня браузер нестабильно работает, может я что-то не так делаю.
Валерий, посмотрите видео сейчас. Я исправил.
А можно ли как-нибудь зафиксировать интерактивный фон, чтобы при смене масштаба или изменении пропорций сторон окна браузера не было видно белых краев?