Прокрутка изображений html css

How TO — Horizontal Scrollable Image Gallery

Learn how to create an image gallery with a horizontal scrollbar with CSS.

Image Gallery With Horizontal Scroll

Use the horizontal scrollbar to see the other images:

Create an Image Gallery with Horizontal Scroll

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

div.scroll-container <
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 10px;
>

div.scroll-container img padding: 10px;
>

Tip: Go to our HTML Images Tutorial to learn more about images.

Tip: Go to our CSS Style Images Tutorial to learn more about how to style images.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Как создать скроллинг на своем сайте с помощью 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.

Источник

Практическая часть

Для горизонтального списка используем flexbox, которому разрешим горизонтальный скроллинг. Размер элементов списка укажем явно, как и зазор между ними. Поля установим бо́льшими, чем зазор, чтобы видеть, когда мы докрутили до начала или конца списка.

Работает, но можно улучшить.

Поведение при прокрутке влево. В некоторых браузерах свайп влево повторяет действие кнопки «Назад». Такое поведение можно предотвратить, установив для overscroll-behavior значение contain .

Полосу прокрутки можно скрыть, установив overflow-x в auto . Однако при скроллинге полоса вновь появится. Чтобы скрыть полностью, можно установить scrollbar-width в none . На момент написания статьи это работало только в Firefox. Для других браузеров придется добавить трюкачества в CSS:

2. Горизонтальный список со снэппингом

Для описания этого типа списков отталкиваемся от списка со свободной прокруткой. Сначала сообщаем списку, когда нужно останавливаться:

3. Галерея в стиле Instagram

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

Но как мы поясняли в теоретической части, эти маленькие точки – полезный графический приём. Получается, что нам нужно следить за тем, какой из элементов списка сейчас виден. Наиболее простой способ – использовать IntersectionObserver.

Составим список точек, каждая из которых соответствует одной из картинок. Когда она пролистывается в списке, мы получаем индекс элемента и устанавливаем индикаторную точку с соответствующим индексом в активное положение.

Вот как это будет выглядеть:

Мы установили пороговое значение 0.6. То есть если 60% элемента находится в поле зрения, то мы считаем его «пересекающимся». Если установим значение равным 1, то пересекаемым будет считать только полностью видимый элемент.

Заключение

Мы разобрали несколько вариаций построения горизонтальных списков изображений. У приведённых решений есть и свои недостатки, и преимущества. Поскольку используется нативная прокрутка, нет возможности настроить способ движения, мы не можем контролировать «липкость» ползунка (в этом случае правильнее было бы использовать решение на JavaScript). Кроме того, в нашем решении мы использовали не самые стандартные подходы в CSS. Однако объём кода невелик, и он работает даже в старых браузерах.

Источники

Источник