13.11.13, 19:45
0 комментарий
  Уроки

FancyScroll.js: добавляем эффект наложения/подпрыгивания как в iOS/Android

Нам всегда нравился эффект «подпрыгивания» приложения в 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

<div class="container">
  <div class="innerWrapper">
    ...
  </div>
</div>


CSS

.container {
  overflow:hidden;
  max-height: 400px;
}


JS

$(".container").fancy_scroll({
  innerWrapper: ".innerWrapper"
});


Как видно, когда вы определяете innerWrapper, анимация скроллинга применяется к новому контейнеру, в котором мы запускаем функцию. Кроме того, вы можете применять эти эффекты на любом количестве div-элементов. Пример можно видеть в 5-м демо.

В завершение

И на этом все, что мы хотели вам рассказать о Fancy Scroll. Надеемся, что вам понравилось данное руководство. Предлагаем вам поделиться результатами ваших работ, если вы решите использовать этот эффект в собственных проектах.

Исходники в архиве.

СКАЧАТЬ

Вес файла
236.54 Kb

Напишите своё мнение