Возможно вы видели такие плагины для браузеров, которые позволяют не просто показывать страницу статично, но и добавлять некоторые эффекты. Например, одним из таких эффектов является «отскок» страницы, как на iOS/Android. В браузере Mozilla Firefox это можно сделать с помощью плагина Yet Another Smooth Scrolling. Но большинство пользователей даже не знают о нем, поэтому можно сделать данный эффект у себя на сайте с помощью библотеки FancyScroll.js.
Реальный пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
Для начала вам необходимо скачать и подключить библиотеку jQuery(она находится здесь) и Fancy Scroll(ее можно скачать здесь):
1 2 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.fancy-scroll.js"></script> |
А затем вставить код, который приведен ниже, в тело вашей страницы:
1 2 3 | $(window).fancy_scroll({ animation: "bounce" }); |
Это действительно очень просто. Давайте рассмотрим какие параметры может принимать данная функция:
- animation — данное свойство может принимать значение Glow(подсветка) и значение Bounce(тогда окно будет отскакивать при прокрутке).
- bounceDistance — данное свойство предназначено, если вы в первом пункте выбрали значение Bounce. Оно задает дистанцию отскока в пикселях. Значение задается без указания «px» в конце и без кавычек.
- glowColor — если в первом пункте вы поставили значение Glow, тогда вы можете задавать цвет подсветки. Цвет задается как обычно в шестнадцатеричном виде.
- animDuration — данное свойство отвечает на длину анимации по времени. Задается в кавычках с указанием в конце секунд(«0.2s») или миллисекунд(«200ms»).
- animEasing — с помощью данного свойства можно задавать свои собственные эффекты при прокрутке. А создать эффекты можно с помощью данного сервиса — CSS Easing Animation Tool.
- innerWrapper — определяет селектор блока к которому будет применена данная анимация. По умолчанию «.innerWrapper». Нельзя выбрать всю страницу, но можно задать общий контейнер и ему присвоить данный класс.
Вывод
Интересный плагин, который позволит выделить таким образом ваш сайт. Не знаю как с тем чтобы применять ко всей странице, но для прокрутки окон внутри страницы очень даже неплохо смотрится.
Успехов!
Источник: www.onextrapixel.com