Нам всегда нравился эффект «подпрыгивания» приложения в iPhone или Android в тот момент, когда вы прокручиваете экран приложения до самого конца и пытаетесь прокрутить его еще дальше. Создается такое впечатление, будто приложение взаимодействует с вами.Сегодня мы решили рассказать вам о плагине, который позволяет вам добавлять такие эффекты на веб-сайт, и плагин этот называется FancyScroll.js. Вы можете добавить подобный эффект ко всей странице или любому div-элементу overflow:scroll на сайте, отредактировать цвета, анимацию.
Примечание: плагин на данный момент был протестирован только в Chrome, Firefox, Safari и IE10 для Windows и OS X.
Как он работает?
Этот плагин невероятно прост. Сначала планировалось использовать js-анимацию для создания эффекта встряски, но позже разработчик все-таки решил использовать CSS3 transform и transition. К тому же, таким образом разработчикам будет гораздо проще поддерживать и редактировать плагин. Что касается взаимодействия, то плагин определяет направление прокрутки и проверяет, не достигли ли вы конечной линии прокрутки. Если вы находитесь вверху и пытаетесь продвинуться еще выше, то добавляется стиль transform translate3d, который перемещает контейнер (в данном случае это body) вниз, а затем опять вверх, и тем самым создает эффект подпрыгивания.
Как применять
Прежде всего, убедитесь в том, что вы включили в код последнюю версию плагина jQuery, а также jquery.fancy-scroll.js, который можно скачать отсюда. Если все готово, то все, что вам осталось сделать, это вызвать функцию как показано ниже:
JS-код
$(window).fancy_scroll({
animation: "bounce"
});На этом все. Довольно просто, не правда ли? Теперь ко всему вашему веб-сайту будет применен такой эффект при прокрутке, который вы наверняка видели в iPhone. Конечно же, есть и дополнительные настройки, которые вы можете применять:
* animation: здесь есть две опции: bounce, которая помогает реализовать такой же эффект, как в iPhone и glow, которая дает возможность повторить эффект из Android 4.0 и выше. Стандартное значение – bounce.
* bounceDistance (только для анимации bounce) – эта опция позволяет вам определить, насколько далеко будет заходить эффект «подпрыгивания». Стандартное значение – 50. Примечание: не нужно ставить отметку px после цифры. Просто используйте целые числа.
* glowColor (только для анимации glow) позволит вам определить цвет свечения, которое будет появляться, когда вы будете достигать верха или низа страницы. Стандартное значение — #02A1FA.
* animDuration позволяет вам определить длительность анимации. Это опция из стиля CSS3 transition, а значит, вы можете использовать два разных значения – секунды и миллисекунды. Стандартное значение – 0.2s.
* animEasing позволяет вам указать, какой эффект вы хотите использовать для анимации. Опять же, здесь используется стиль CSS3 transition, поэтому у вас в распоряжении будут опции linear, ease-in, ease-out, ease-in-out, либо вы можете сгенерировать значение вручную при помощи инструмента, разработанного Matthew Lein
* innerWrapper позволит вам определить селектор внутреннего div-элемента, к которому будет применяться анимация. Вас не должен волновать этот параметр, если вы хотите применить анимацию ко всей странице. Следует обращать на него внимание только в том случае, если вам нужно применить анимацию к отдельному контейнеру. Стандартное значение — .innerWrapper.
Расширенные настройки
Fancy Scroll также можно применять к div-контейнерам, а не ко всему документу. Все что вам нужно, это подготовить HTML, CSS и JS:
HTML
...
CSS
.container {
overflow:hidden;
max-height: 400px;
}JS
$(".container").fancy_scroll({
innerWrapper: ".innerWrapper"
});Как видно, когда вы определяете innerWrapper, анимация скроллинга применяется к новому контейнеру, в котором мы запускаем функцию. Кроме того, вы можете применять эти эффекты на любом количестве div-элементов. Пример можно видеть в 5-м демо.
В завершение
И на этом все, что мы хотели вам рассказать о Fancy Scroll. Надеемся, что вам понравилось данное руководство. Предлагаем вам поделиться результатами ваших работ, если вы решите использовать этот эффект в собственных проектах.
Исходники в архиве.