Как создать скроллинг на своем сайте с помощью CSS?
Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.
Если нужен плавный скроллинг
Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:
Так выглядит CSS-код на примере со вторым значением и условным селектором p:
Далее мы покажем на примере, как сделать плавный переход от одной части сайта к другой при помощи значения smooth. В этом случае пользователь увидит переход при нажатии на гиперссылку, ведущую к другой части с текстом.
Пример с HTML-кодом
Шаг 1. Создадим два блока с ссылками друг на друга:
Плавная прокрутка
Блок 1
Перейди по гиперссылке, чтобы увидеть плавный скроллинг.
Нажми сюда, чтобы перейти к Блоку 2.
Блок 2
Нажми сюда, чтобы перейти к Блоку 1.
Шаг 2. Добавим плавный скроллинг с помощью кода CSS внутри тега . Код состоит из cвойства scroll-behavior и значения smooth. Еще выберем цвета и высоту для разных частей с текстом: розовый и желтый.
Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.
Совместимость с браузерами
Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.
Если нужен параллакс
Parallax — это эффект, при котором элементы заднего плана движутся быстрее или медленнее, чем объекты на переднем плане. Например, пользователь прокручивает страницу и видит, что фоновое изображение движется с одной скоростью, а текст — с другой.
Пример с HTML-кодом
В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.
Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:
Прокрутите страницу дальше
Этот текст нужен просто для того, чтобы продемонстрировать эффект. Вам стоит прокрутить страницу вверх и вниз — текстовый блок будет двигаться, а изображение останется на месте.
Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.
В итоге получился параллакс на странице.
Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:
Совместимость с браузерами
Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.
Дополнительные примеры
Чтобы лучше разобраться с CSS-свойствами, рассмотрим другие эффекты для прокрутки на сайте .
Пример 1
По шагам рассмотрим, как добиться эффекта многоуровневого скроллинга . В этом случае несколько объектов на сайте будут двигаться с разной скоростью при прокрутке.
Шаг 1. Напишем две строки следущим образом:
Шаг 2. Добавим CSS-код внутри тега . Сначала укажем параметры и выберем фон на бесплатном фотостоке для блока 2:
Шаг 3. Там же укажем параметры заголовков:
Шаг 4 . Определим параметры других элементов:
В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:
Так выглядит многоуровневый скроллинг.
Пример 2
Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте cloud.timeweb.com есть такой закрепленный блок:
Шаг 1 . Напишем код с двумя текстовыми блоками таким образом:
Зафиксированный элемент
Элемент
Шаг 2. Напишем следующий CSS-код внутри тега :
При помощи свойства значения fixed удалось сделать так, чтобы элемент двигался вместе с прокруткой.
Пример 3
В этом случае разберемся, как сделать горизонтальный скроллинг.
Шаг 1. Создадим четыре строки текста таким образом:
Шаг 2 . Добавим CSS-код внутри тега . В коде обозначим размеры текстовых блоков и их цвета.
Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом.
Заключение
Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.
В некоторых случаях нужны длинные коды: например, для многоуровневого варианта, при котором каждый блок на странице движется с уникальной скоростью. Но это в любом случае лучше, чем создавать подобные переходы на JavaScript.
Почему не работает скролл?
Посняю — когда размеры контента будут больше чем высота твоего блока которая «ЕСТЕСВЕННО не известны заранее», то тогда «ЕСТЕСВЕННО » и появиться скролл.
не охото это говорить, но код у тебя правильный
Верстальщик Ваш, ты походу прикалываешся или я не пойму как воспринимать эту ересь. Гле там скролл появился? КОнтент выходит за пределы экрана. Скролла нет.
лол, как я тебе и сказал ты просто уменьшил высотку блока и\или увеличил контент.
Убери calc и поста overflow без Y, все равно скролл будет
гений блин
Верстальщик Ваш, точно, явные траблы с реальностью. Сначала чел утверждает что он мне якобы «как и говорил» (лолшто?). Потом говорит что скролл будет если убрать калк и overflow без Y. Это уже явные галлюцинации, потому что если я выполню эти бредовые рекомендации лично у меня никакого скролла нету. Но он есть в воображении вундеркиндов. Какой сложный мир, и как много в нем надо терпения!
wufapexef, эхх. просто почитай на досуге про css
Ты убрал высоту у блока, а в css это значит что будет height: auto
это значит — блок АВТОМАТИЧЕСКИ увеличивается от твоего контента, как может быть скролл?
скролл появляется при ПЕРЕПОЛНЕНИИ блока, но у блока АВТОМАТИЧЕСКАЯ высота, то есть он будет УВЕЛИЧИВАТЬСЯ.
в общем если ты не понял, я сдаюсь
как хочешь так и ставь, если она тебе не известна не ставь вообще, будет авто, но тогда и не будет скролла.
Скролл появляется лишь тогда, когда блоку задана явная высота И контент начинает переполнять эту высоту.
Верстальщик Ваш, еще раз: ты сказал убрать calc и vh — как тогда по твоему сделать блок во весь экран. Мне самому это решение не по душе, ибо на мобилах как известно vh это садомазо
Про калк и vh я тебе сказал убрать ради примера, что бы убедиться что скролл есть.
Короче ты может задать 1 экран, да это 100vh, а на мобилках с помощью медиазапроса поставить уже фиксированную высоту
если я правильно понял что ты хочешь
Верстальщик Ваш, судя по всему не правльно понял, потмоу что это вообще не понятно при чем тут
При чем тут медиазапросы? Откуда брать фиксированную высоту? Вообще в курсе поведения 100vh в мобильных браузерах или мы на разных языках сейчас?
wufapexef, с тобой как со стеной, тебе уже около 3 человек ответ дали, а тебя все не устраивает.
Показывай конкретный пример тогда.
.content width 100% height 100vh background-color grey overflow-y scrollВроде то, но там должен быть контент, который занимает больше пространства чем блок
P.S. Второй вариант решения без привязки к VH
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
на тебе контент
body < overflow:hidden; height:100% >.wrapper < height:100%; position: absolute; width:100%; >header < width :100%; height :5em; background-color :red ; >.content