FancyScroll.js: придаем сайту эффект прокрутки при выходе за пределы как в iOS и Android

2013-10-16

Я всегда был восхищен эффектами прокрутки, возникающими, когда вы достигаете конца списка на IPhone и Android. Такой простой интерфейс взаимодействия, как отскакивание, может волшебным образом придать вашему приложению более отзывчивый вид.

Сегодня я решил создать плагин под названием FancyScroll.js, который позволит вам добавить такие эффекты на ваш веб-сайт. Вы можете применить эффекты при выходе за пределы, как для всей страницы, так и только к некоторым элементам overflow: scroll div, подобрав собственные цвета, анимацию или даже установив собственное смягчение анимации.

Примечание: данный плагин был протестирован только с помощью браузеров Chrome, Firefox, Safari и IE10 в операционных системах Windows и OSX.

Посмотреть Скачать

Как это работает?
- Инструкции
- Для дальнейших настроек
Заключение

Как это работает?

Плагин крайне прост в понимании. Сначала я планировал использовать JS анимацию для создания эффекта отскакивания, но на раннем этапе работы обнаружил, что этим я не смогу добиться той плавности, которая возможна с помощь трансформации и перехода стилей CSS3. Плюс, так будет легче осуществлять обслуживание и вносить изменения тем разработчикам, которым хочется поэкспериментировать с Fancy Scroll.

Что касается механизма работы, то для начала я определяю направление вашей прокрутки и проверяю, достигла ли она вершины или основания страницы. Если прокрутка достигла вершины, и направление – вверх, то добавляю стиль transform translate3d style, который передвигает контейнер (в данном случае body) вниз, и возвращаюсь назад с замедленным эффектом, чтобы создать подобие отскакивания. И наоборот.

Инструкции

В первую очередь убедитесь, что вы включили самую последнюю версию плагина jQuery (доступную здесь) и jquery.fancy-scroll.js (можно скачать здесь) в ваш документ, и тогда все, что вы должны сделать – вызвать функцию, как показано ниже:

JS:

$(window).fancy_scroll({
  animation: "bounce"
});

Вот и все. Правда, очень просто? Теперь весь ваш сайт будет иметь эффект отскакивания как в приложениях на iPhone.

Конечно, есть и дополнительные настройки, с помощью которых можно подстроиться под ваши нужды, такие как:

animation: на выбор есть 2 опции. “Bounce” (отскакивание) повторяет анимацию при выходе за пределы, которую вы можете увидеть на iPhone, а “Glow” (свечение) – эффект как в Android 4.0+. По умолчанию установлена опция “Bounce”;
bounceDistance (только для анимации Bounce) позволяет определить, насколько далеко в пикселах распространится эффект отскакивания. По умолчанию данная величина – 50. Примечание: не добавляйте «px» после числа. Используйте только целые числа для определения расстояния;
glowColor (только для анимации Glow) дает возможность задать цвет свечения, которое появится, если вы достигли вершины или основания страницы. Значение цвета по умолчанию – «02A1FA»;
animDuration позволяет определить, как долго будет выполняться анимация каждый раз. По существу, это значение передается в CSS3 transition style. Таким образом, входное значение может быть указано в секундах («0.2s») или миллисекундах («200ms»). По умолчанию установлена величина «0.2s»;
animEasing позволяет вам решить, какой эффект смягчения вы хотите воспроизводить на странице. И снова это будет передано в CSS3 transition style, так что возможны следующие варианты смягчения: 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, к скольким захотите (смотрите пример в расположенной ниже демонстрации).

Посмотреть Скачать

Заключение

Вот и все возможности, обеспечиваемые Fancy Scroll. Надеюсь, ребята, вам понравилась моя статья. С нетерпением жду ваших результатов с использованием этого скрипта. Если у вас есть вопросы, предложения или что-то для демонстрации, дайте нам знать, оставив комментарий ниже.