Інтерактивний фон для сайту + відео

Як ви думаєте, яким способом ще можна виділити свій сайт не використовуючи звукові ефекти при відвідуванні, яскраві кольори і при цьому не дратувати користувача? А як вам ідея з інтерактивним фоном? Звичайно, даний ефект підійде далеко не всім сайтам, але все ж. Якщо фон буде трохи переміщатися в залежності від положення покажчика миші. Я думаю в цьому безумовно щось є. Тому переходите в повну новину і дивіться демо, щоб швидше зрозуміти про що я тут пишу.

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися? - Інтерактивний фон для сайту

HTML частина

Викачуємо бібліотеку jQuery (тут) І плагін jQuery.interactive_bg.js (тут), Потім підключаємо:

12

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.interactive_bg.js"gt; lt;/scriptgt;

Розміщуємо блок з атрибутом data-ibg, в якому задаємо шлях до фонового зображення:

12345

lt;bodygt; ..lt;div class="Bg" data-ibg-bg="Bg.jpg"gt; lt;/divgt; ..lt;/bodygt;

jQuery частина

А перед закриває тегом вставляємо функцію для роботи цього плагіна:

1234567

$(".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.

Проблеми зі встановленням? Подивися відео!

висновок

Особисто мені дуже сподобався цей плагін, тому що він може привнести щось нове для сайту і може виділити на тлі інших. Тільки не ставте дуже велику швидкість, в цьому випадку можна лише відлякати відвідувача.

Успіхів!

джерело: https://onextrapixel.com/2014/04/09/create-an-interactive-moving-backgroundobject-that-reacts-to-viewers-cursor/