Класний ефект при прокручуванні вікна
Можливо ви бачили такі плагіни для браузерів, які дозволяють не просто показувати сторінку статично, а й додати деякі ефекти. Наприклад, одним з таких ефектів є «відскік» сторінки, як на 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