—»     —»   FancyScroll.js: добавляем эффект наложения/подпрыгивания как в iOS/Android
  Раздел: Руководства   Нет комментариев  

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. Надеемся, что вам понравилось данное руководство. Предлагаем вам поделиться результатами ваших работ, если вы решите использовать этот эффект в собственных проектах.


Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 4335   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930