Эффект прыгающей прокрутки для сайта | RUDEBOXПрокрутка на сайте является неотъемлемой его частью, на продвинутых сайтах можно встретить видоизмененную прокрутку, добавляют цветовую палитру и максимально стараются ее интегрировать визуально с сайтом, но если необходимо ее изменить, но и добавить эффект при прокрутке. В данном уроке мы рассмотрим как реализовать эффект «прыгающей» прокрутки для сайта, идея состоит в том-когда пользователь листает страницу, в конце она немного отскакивает, смотрится достаточно эффектно, при этом мы закладываем минимум усилий.

 

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

Такой эффект станет отличным дополнением для любого сайта, простота в подключении и удобность использования, и так, давайте приступим.

Шаг 1. HTML

Разметка достаточно простая, у нас есть контейнер, в котором заключен ID с артикулом, в содержании артикула должен содержаться текст, если Вы, конечно, хотите прокрутку для текста.

 Если Вам необходима прокрутка для страницы, то для этого необходимо присвоить к желаемой странице параметры контейнера с демонстрации.

Эффект прыгающей прокрутки для сайта | RUDEBOX

Шаг 2. СSS

При подпрыгивании страницы у нас будет отображаться небольшая полоса, заштрихованная серым градиентом, за это у нас будет отвечать следующий фрагмент стиля:

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

Шаг 3. JS

Вся магия будет сосредоточена у нас на функции javascript которые будут рассчитывать процентное соотношение пространства отскока, кроме этого нам необходима небольшая плавность:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.