Путешествия – это одна из самых основных задач, которую мы просим пользователей сделать. Судя по количеству страниц и приложений, развернутых сегодня, мы много просим.
Добавление эффектов на основе прокрутки может стать отличным способом улучшения вашего пользовательского опыта. Это означает, что до тех пор, пока они не мешают возможности просматривать длинные разделы контента. Эффекты должны упростить и добавить нотку элегантности.
Вот коллекция эффектов прокрутки и инструментов, которые порадуют посетителей и (мы надеемся) уберут вас с дороги.
Раздел за разделом
Современные веб-сайты обычно делятся на несколько разделов контента, каждый из которых имеет отдельные элементы. Этот удобный элемент добавляет кнопку (доступную в разных стилях) внизу экрана, которая позволяет пользователям щелкать и переходить к следующему разделу. Используйте CSS ID вместе с jQuery, чтобы навигация работала.
Посмотрите демонстрационную ручку: кнопка прокрутки CSS от Naoy
Все знаки говорят, что ты двигаешься
Датчики прокрутки стали очень популярными на сайтах с большим содержанием. Через легко усваиваемые методы, он сообщает о расстоянии пользователя от истории. Преимуществом этого решения является только CSS.
См. Индикаторную ручку прокрутки CSS только от Майка
Вы можете прокрутить, если хотите
Этот кусок кода не обязательно сам по себе является эффектом. Но у этого есть цель. Дизайнеры часто используют полноэкранные фоновые изображения и другие элементы, которые могут сделать прокрутку неоднозначной для пользователя. Благодаря этому небольшие элементы, такие как анимированный значок прокрутки, информируют пользователей о том, что да, контента будет больше. Это не подходит для всех ситуаций, но бывают моменты, когда это имеет смысл.
Посмотрите на анимационную ручку Micro CSS с сайта прокрутки Райан Маллиган
Невероятное сокращение заголовка
Эти самоклеющиеся заголовки со временем стали основой. Почему они могут добавить много комфорта для пользователя. Возможность перехода в другие разделы сайта без необходимости прокрутки вверх страницы просто облегчает жизнь. Как обычно, этот пример сжимается до более компактного элемента при прокрутке страницы.
Смотрите заголовок свитка Блейка Боуэна
Проведите вправо
Вот еще одна версия заголовка стикера. На этот раз он настроен для одностраничного сайта. Навигация сверху автоматически выделяет текущий раздел контента и позволяет пользователям быстро переключаться между ними.
Просмотреть навигационную ручку Ettrics Adhesive Slider Pen (Отзывчивый)
Летающие цвета
Давайте посмотрим на другую часть, которая идеально подходит для одностраничных сайтов или длинных страниц с несколькими разделами контента. Используйте CSS и некоторые jQuery, чтобы изменить цвет фона, прокручивая вниз (и да, это работает наоборот). Вы также можете отправить запрос в скрипт, который делает то же самое, но с градиентами.
Посмотреть перо Изменить цвет фона при прокрутке версии 2 автор: JP Nothard
Преобразовать вертикальный в горизонтальный
Вы когда-нибудь хотели, чтобы ваша страница прокручивалась горизонтально, а не вертикально? Конечно, вы можете сделать это без какого-либо причудливого сценария. Но что, если вам не нужна горизонтальная полоса прокрутки? В этом случае вам нужно что-то вроде этого примера. Используйте скрипт jInvertScroll, который преобразует вашу страницу в боковую прокрутку вместе с эффектами параллакса.
Показать ручку боковой прокрутки с помощью SitePoint jInvertScroll
Анимировать во время прокрутки
Одной из самых важных тенденций сегодня является анимация контента, который появляется в графическом окне. Делая это с хорошим вкусом, обратите внимание на каждый раздел. Но зайти слишком далеко и больше похоже на онлайн-цирковое представление. Если вы решили пропустить, рассмотрите этот код. Он поддерживает библиотеку AOS (анимированная прокрутка).
См. AOS карандаш – Snik анимации
Прокрутка, пользователь сети
В прошлом идея состояла в том, чтобы избежать смещения любой ценой. Теперь социальные сети и смартфоны позволяют нам покрывать длинные участки большими пальцами (и курсорами). Мы также могли бы сделать это забавным и полезным.
Это то, что намерены сделать предыдущие фрагменты. Они охватывают несколько вариантов использования и, в большинстве случаев, позволяют избежать дискомфорта. Это создает прочный пользовательский опыт.
Вы ищете больше идей? Проверьте нашу коллекцию CodePen для большего количества фрагментов прокрутки!
