Лого SiteHere.ru

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

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

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

Пример можно увидеть здесь:

Посмотреть примерСкачать



Как пользоваться? — Интерактивный фон для сайта

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.


Проблемы с установкой? Посмотри видео!



Вывод

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


Успехов!

Источник: http://www.onextrapixel.com/2014/04/09/create-an-interactive-moving-backgroundobject-that-reacts-to-viewers-cursor/

11 комментариев к записи
  • Алексей

    Спасибо! А скажите, если не трудно, как сделать например красивую надпись(не шрифтами, а например как от руки, в примере 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>

       
  • Валерий

    У меня почему-то не работает, вроде все делал по инструкции, но толку нету. Хотел посмотреть видео на данном сайте, а оно тоже не грузит. Может у меня браузер нестабильно работает, может я что-то не так делаю.

     
    • Юрий

      Валерий, посмотрите видео сейчас. Я исправил.

       
      • Валерий

        А можно ли как-нибудь зафиксировать интерактивный фон, чтобы при смене масштаба или изменении пропорций сторон окна браузера не было видно белых краев?

         

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *