Как сделать плавную прокрутку на сайте
Как сделать плавную прокрутку для всего сайта с помощью JQuery и CSS
Приветствую, дорогие друзья. Как Вы возможно заметили, что практически во всех браузерах прокрутка на сайтах очень резкая и не красивая. И конечно же хотелось бы сделать прокрутку для своего сайта более плавной, естественно это можно сделать и к тому же сильно не напрягаться. Делается это с помощью простого JQuery плагина и нескольких правил CSS. А для того, чтобы посмотреть как это всё работает предлагаю Вам взглянуть на демо, которое находится ниже.
Демо Ι Скачать
Ну а теперь давайте перейдём прикреплению плавной прокрутки к нашему сайту.
Для начала нам нужно будет прикрепить библиотеку JQuery. Если она у Вас уже прикреплена, пропустите этот шаг:
Затем нам нужно прикрепить сам JQuery плагин, который и отвечает за нашу плавную прокрутку, и вместе с ним же идут отдельные правила CSS которые изменяют саму полосу прокрутки на сайте. Подробнее на счёт полосы прокрутки мы поговорим подробнее в следующем уроке, а пока что только плавная прокрутка. А вот и сами правила и плагин:
Всё. Теперь первый и немаловажный шаг мы уже сделали. Теперь нам нужно добавить одно простое правило в стили CSS нашего сайта.
Это нужно для того, чтобы дать понять нашему плагину, что ширина страницы растянута и является 100% в высоту. Обязательно добавьте это правило в CSS иначе прокрутка работать не будет.
Скрипт
После того как Вы всё добавили, что представлено выше, нам нужно включить сам скрипт, который мы прикрепили выше.Это делается очень просто, нужно лишь добавить желательно перед закрывающем тегом
Способы добавления плавной прокрутки страницы в CSS и JavaScript
Наверняка вы посещали страницы, которые плавно прокручивают контент при клике на ссылке к соответствующему блоку. Это красиво выглядит на лэндингах (LandingPage, или посадочная страница), в которых пространство страницы разбито на части, или в больших статьях с содержанием. Такая прокрутка называется скроллингом (от англ. scroll).
Однако, это не только красиво, но и достаточно просто с точки зрения реализации.
Прокрутка страницы с помощью CSS
Если плавная прокрутка необходима в пределах какого-то контейнера, то это свойство назначают для него.
Примечание: в каждом примере есть 5 ссылок вверху для прокрутки к блокам текста и ссылка со стрелкой в правом нижнем углу для возврата наверх страницы. Используйте их для тестов свойств и методов для плавного скроллинга страницы.
Ложкой дегтя для этого свойства будет неполная поддержка его браузерами. Вы можете посмотреть, какова она на скриншоте и на caniuse.com.
Поддержка свойства scroll-behavor браузерами
Поэтому рассмотрим, как сделать плавную прокрутку с помощью jQuery и JavaScript.
Скроллинг с помощью jQuery
Сам код будет небольшим:
Плавная прокрутка на JavaScript
Здесь тоже есть 3 решения, каждое из которых использует свой подход к созданию плавности прокрутки с помощью разных JS-методов.
Решение 1. Метод scrollIntoView()
Из документации на MDN узнаем, что
Метод Element.scrollIntoView() прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.
Этот метод имеет параметры, подобные css-свойству scroll-behavior: smooth для прокрутки контента к элементу с нужным id, указанным в виде хэш в ссылке.
К сожалению, и тут не обошлось без «ложки дегтя» в виде поддержки браузеров. Давайте обратимся к caniuse.com и увидим такую картину:
Поддержка свойства scrollIntoView браузерами
К сожалению, нужное нам значение свойства behavior: ‘smooth’ поддерживается не всеми браузерами.
Пример прокрутки контента с помощью метода scrollIntoView() (открыть в новой вкладке)).
Решение 2. Используем window.scrollBy() для плавной прокрутки.
Тут все методы и свойства и имеют хорошую поддержку браузерами.
Код JavaScript предполагает, что на вашей странице нет абсолютно позиционированной или фиксированной шапки сайта (элемент ), в котором чаще всего размещаются ссылки-якоря на разделы страницы, поэтому переменная offsetTop (смещение сверху) сначала задана как 0.
Как создается плавная прокрутка страницы с анимацией изображений
Посмотреть демонстрацию Скачать исходный код
В этой статье вы узнаете, как добавить в HTML-разметку плавную прокрутку с дополнительными эффектами анимации для изображений.
Для чего добавлять подобную плавную прокрутку на веб-страницу? При скроллинге часто возникают проблемы с отображением контента. При прокрутке изображений могут возникать резкие скачки. Чтобы избежать его появления, можно анимировать сам контент, передвигая его вверх или вниз, вместо использования «нативной» прокрутки.
Как создается плавная прокрутка страницы сайта
Раздел body веб-страницы получает высоту содержимого, чтобы отображалась полоса скроллинга. При прокрутке страницы зафиксированный контейнер останется на месте, когда его внутреннее содержимое передвигается в результате анимации. Это простой способ реализации плавной прокрутки.
В нашем примере мы будем использовать следующий HTML-код.
Основной элемент будет «закрепленным» контейнером, в то время как div data-scroll будет перемещаться.
Внутренняя анимация изображения
Установим стили для этих элементов. Мы будем использовать отступ вместо свойства высоты, чтобы сохранить правильное соотношение сторон для внутреннего блока div с изображением. Для этого мы используем медиа-функцию aspect ratio.
Зададим переменную image для фонового изображения в классе item__img-wrap, чтобы не писать слишком много кода.
При прокрутке мы будем перемещать div с фоновым изображением. Поэтому он должен иметь большую высоту, чем его родитель. Для этого определим переменную overflow, которую будем использовать при расчете высоты и верхней точки в нескольких классах. Это позволяет устанавливать разное значение свойства overflow для каждого изображения, которое изменяет визуальный эффект.
Теперь займемся JavaScript. Начнем с вспомогательных методов и переменных.
Для последующих вычислений нужно получить высоту окна.
А также пересчитать это значение при изменении размера.
Кроме этого нам нужно отслеживать то, на какое количество пикселей перемещается страница во время скроллинга.
Теперь создадим класс для функции плавной прокрутки.
У нас есть ссылка на контейнер, который должен стать «липким», и прокручиваемый элемент. Он будет перемещаться для имитации прокрутки.
Теперь нужно обновить значение translateY при прокрутке. А также и другие свойства, такие как scale или rotation. Создадим объект, который хранит эту конфигурацию. Но пока просто настроим translateY.
Мы будем использовать интерполяцию для достижения эффекта плавной прокрутки. Значения previous и current являются значениями для интерполяции. Текущее значение translationY будет значением между этими точками с определенным приращением.
ease — это сумма для интерполяции. Приведенная ниже формула вычисляет текущее значение перемещения:
Функция setValue устанавливает значение, которое будет текущей позицией прокрутки. Выполним перечисленные выше операции при загрузке страницы, чтобы установить правильное значение translationY.
Мы устанавливаем оба значения интерполяции одинаковыми. В данном случае это координаты прокрутки. Благодаря этому анимация происходит при прокрутке страницы. После этого мы вызываем функцию layout, которая применит преобразование к элементу. Обратите внимание, что значение будет отрицательным, так как элемент перемещается вверх.
Для изменения разметки нужно:
Нам также нужно сбросить увеличение высоты body при изменении размера.
После этого запускаем в цикле функцию, которая обновляет значения при прокрутке.
Вызов функции рендеринга запускается для каждого элемента, который находится внутри области просмотра. Это обновит положение элемента изображения.
Нужно предварительно загрузить изображения, чтобы они отображались, и мы могли рассчитать правильное значение высоты. Для этого используем imagesLoaded:
После загрузки изображений мы удаляем класс loading, получаем позицию прокрутки и инициализируем экземпляр SmoothScroll.
Теперь создадим класс Item для представления каждого элемента страницы (изображений).
Функция setValue работает следующим образом:
После этого нужно установить начальные значения при загрузке. Мы также вычисляем высоту и верхнюю точку элемента, которые нам понадобятся для применения функции, описанной ранее.
Когда размер окна изменяется:
После этого определим функцию рендеринга, вызываемую внутри функции SmoothScroll (requestAnimationFrame):
Этот код выполняется только для элементов, которые находятся внутри области просмотра. Для этого используем API IntersectionObserver.
Это все! Надеемся, что это руководство помогло вам реализовать плавную прокрутку изображений на собственном сайте.
Пожалуйста, оставьте свои мнения по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!
Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!
Как сделать плавную прокрутку на сайте
Привет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о скролле к якорю, при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.
Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!
Конечно, многие пользуются браузерами, у которых и так настроена плавная прокрутка, многие используют специальное расширение для браузера, но не все. Давайте же добьемся плавности на большинстве устройств, с которых будут посещать ваш сайт.
Плагин для плавной прокрутки сайта
Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin, так как у него очень много возможностей:
Конечно, для многих этот функционал может быть избыточным. Если вы просто хотите сгладить прокрутку колесиком, то в конце разберем совсем простое решение для этих целей.
Итак, самое время посмотреть демку. Автор уже приготовил отличный вариант:
Подключения плагина
Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.
Получится такая структура:
Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.
После того как все подключили, нужно инициализировать скрипт:
И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:
Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.
Обратите внимание, что на этой странице около 50 опций для тонкой настройки плагина. Например, в исходнике я использую следующие:
Вот такой интересный плагин для плавной прокрутки сайта и других его элементов, который можно полностью кастомизировать под свой дизайн, писать свои темы и т.д.
Более простое решение для плавной прокрутки, если вам не нужны навороты
Если вам не нужны никакие дополнительные функции, кроме как плавная прокрутка при скролле колесика мыши, то воспользуйтесь плагином jQuery.scrollSpeed
Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:
Похожие публикации
6 комментариев
Максим, ничего не понял. Что не работает? В каком виде? Есть же рабочий исходник, скачайте и подстройте под свои нужды. Для этого же я их и выкладываю, чтобы был пример и легче было разобраться.
Плавный скроллинг при помощи CSS
В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.
Эта статья была изначально опубликована в моем личном блоге
API scrollIntoView можно назначить анимацию прокручиваемой части, добавив свойство поведения в объект scrollIntoViewOption.
Я быстро запрыгнул на своего JavaScript-коня и написал крошечный скрипт для автоматического определения щелчков на якорях, чтобы браузер оживлял переход к элементу привязки. Этот переход действительно может дезориентировать пользователя, поэтому анимация этого процесса значительно улучшит UX.
Вот мое новое демо, где я использую только лишь CSS
Прежде чем мы начнем сходить с ума и пихать это на все сайты давайте подумаем о нескольких моментах.
Значение расстояния прокрутки
Если есть большое расстояние для перемещения, Firefox пропустит контент, чтобы ограничить время прокрутки, в то время как Chrome, прокручиваясь на максимальной скорости просто займет время, чтобы добраться до цели.
Мы могли бы использовать Smart CSS для обнаружения длинных страниц и условно применить стиль плавной прокрутки.
Легкость просмотра
Заключение
При выборе новой функциональности мы не должны сразу бежать за JavaScript. Сначала можно быстро выяснить, можно ли это сделать и с помощью CSS. Свойство scroll-behavior может быть хорошим улучшением UX, но обязательно отключите его на очень длинных страницах и дайте пользователю возможность отключить его, чтобы сохранить легкое чтение ваших страниц.