Класний ефект при прокручуванні вікна

Класний ефект при прокручуванні вікна

Можливо ви бачили такі плагіни для браузерів, які дозволяють не просто показувати сторінку статично, а й додати деякі ефекти. Наприклад, одним з таких ефектів є «відскік» сторінки, як на iOS / Android. У браузері Mozilla Firefox це можна зробити за допомогою плагіна Yet Another Smooth Scrolling. Але більшість користувачів навіть не знають про нього, тому можна зробити даний ефект у себе на сайті за допомогою біблотеки FancyScroll.js.

Реальний приклад можна побачити тут:

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

Як користуватися?

Для початку вам необхідно скачати і підключити бібліотеку jQuery (вона знаходиться тут) І Fancy Scroll (її можна завантажити тут):

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.fancy-scroll.js"gt; lt;/scriptgt;

А потім вставити код, який наведено нижче, в тіло вашої сторінки:

123
$(window).fancy_scroll({animation: "Bounce"})-

Це дійсно дуже просто. Давайте розглянемо які параметри може приймати дана функція:

  • animation - ця властивість може приймати значення Glow (підсвічування) і значення Bounce (тоді вікно буде відскакувати при прокручуванні).
  • bounceDistance - дана властивість призначене, коли ви у першому пункті вибрали значення Bounce. Воно задає дистанцію відскоку в пікселях. Значення задається без вказівки «px» в кінці і без лапок.
  • glowColor - якщо в першому пункті ви поставили значення Glow, тоді ви можете задавати колір підсвічування. Колір задається як зазвичай в шістнадцятковому вигляді.
  • animDuration - дана властивість відповідає на довжину анімації за часом. Здається в лапках із зазначенням в кінці секунд ( «0.2s») або мілісекунд ( «200ms»).
  • animEasing - за допомогою даного властивості можна задавати свої власні ефекти при прокручуванні. А створити ефекти можна за допомогою даного сервісу - CSS Easing Animation Tool.
  • innerWrapper - визначає селектор блоку до якого буде застосовано даний анімація. За замовчуванням «.innerWrapper». Не можна вибрати всю сторінку, але можна поставити загальне контейнер і йому привласнити даний клас.

висновок

Цікавий плагін, який дозволить виділити таким чином ваш сайт. Не знаю як з тим щоб застосовувати до всієї сторінці, але для прокрутки вікон усередині сторінки дуже навіть непогано виглядає.

Успіхів!

джерело: onextrapixel.com

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!