Как сделать прокрутку фотографий в html
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:
Получился стандартный слайдер, который уже работает. Но он плох тем, что на мобильных устройствах его нельзя листать свайпом. Пользователям приходится перемещать элементы через весь экран. Это происходит из-за того, что прокрутка не учитывает содержимое просматриваемой области.
Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:
Простой прокручиваемый контейнер
Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.
Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.
Настройка направления и строгости привязки
Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).
С направлением всё просто:
- горизонтальная прокрутка — x или ключевое слово inline:
- вертикальная прокрутка — y или ключевое слово block;
- привязка в обоих направлениях — both.
Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:
- none — нет привязки к точке;
- mandatory — обязательное смещение прокрутки к указанной точке;
- proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.
Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.
Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.
Изменение точек привязки
Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.
Чтобы было проще понять разницу, посмотрите на этот пример:
У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.
При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.
Управление прокруткой
Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:
- normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;
- always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше.
Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.
Настройка внутреннего отступа контейнера
Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.
Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста.
Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.
Настройка внешнего отступа элемента
Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.
Например, здесь внешний отступ задан только третьему элементу. Он занимает позицию в 50px от позиции прокрутки. При этом следующие за ним элементы снова привязываются к указанной точке.
Поддержка в браузерах:
В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.
В основном вы можете использовать это на веб-сайте изображений для показа нескольких изображений в виде слайд-шоу для пользователей, а также галерею со снимками, но этот фактор прокрутка кардинально отличается от всего, что вообще может выводить изображение. Ведь здесь задействована анимация не на одну картинку, а сразу на все, что изначально похоже бесконечный двигатель, который запускает снимки.
Анимированные изображения с прокруткой на HTML и CSS
Остальные вещи вы поймете после получения кодов, где для создания этой анимированной прокрутки изображений вам необходимо создать 3 файла, где первый для HTML, второй для CSS и третий для JavaScript.
Установочный процесс:
Прежде чем устанавливать исходным кодом, то давайте поговорим об этом. Для начала устанавливаем изображение, это может быть из picsum.photos, а также выставить свои ссылки, ведь для этого в CSS поставил редактор ширины.
Также можете легко получить фиктивные и случайные фотографии, где установлено 8 разделов изображений, где идет 1 раздел, который имеет 4 изображения. Все изображение размещены в div, где в основной div прописан класс , который аналогично размещен под основу.
Дали сетку отображения тела, а главное гибкое деление, где созданы CSS-переменные для анимации и направления, теперь вам просто нужно поместить имя переменной в то место, где мы хотим получить то же значение.
Как вы можете видеть в предварительном просмотре, на слайде идет сверху вниз и еще один снизу вверх. Для создания этого был выбраны нечетные изображения div и анимированные его противоположное направление.
body <
margin: 0;
padding: 0;
min-height: 100vh;
display: grid;
place-items: center;
>
.kasnuvop-kedesamub img <
max-width: 100%;
vertical-align: middle;
border: 2px solid white;
box-sizing: border-box;
transition: opacity .2s;
width: 243px;
>
.kasnuvop-kedesamub:hover img <
opacity: 0.3;
>
.kasnuvop-kedesamub img:hover <
opacity: 1;
>
.kasnuvop-kedesamub .vepedavum-gekuladsun <
animation: var(--animation, none) 16s infinite linear;
>
.kasnuvop-kedesamub .vepedavum-gekuladsun:hover <
animation-play-state: paused;
>
.kasnuvop-kedesamub .vepedavum-gekuladsun:nth-of-type(odd) <
align-self: flex-end;
--direction: 50%;
>
@keyframes slide <
to <
-webkit-transform: translateY(var(--direction, -50%));
transform: translateY(var(--direction, -50%));
>
>
Нечетный div, используя CSS :nth-of-type(odd), используя это свойство, вы можете выбрать нечетный дочерний элемент для любого объекта. Положите границы 2 пикселя на каждое изображение.
Это также имеет эффект наведения, где можете видеть в предварительном просмотре, просто задает низкую непрозрачность 0,5 для каждого левого изображения, кроме изображения, на которое вы наводите курсор.
[. document.querySelectorAll('.vepedavum-gekuladsun')].map(column => <
column.style.setProperty('--animation', 'slide');
column.style.setProperty('height', '200%');
column.innerHTML = column.innerHTML + column.innerHTML;
>);
Предположим, у вас есть сайты о путешествиях и путешествиях, разместите слайд-шоу с вертикальными изображениями в галерее вашего сайта. Теперь пользователи могут видеть все изображения, когда пользователю нравится изображение, и нажимают на него, затем пользователь перенаправляет на этот пакет изображений.
Другими словами, слайд-шоу вертикальных изображений с эффектом наведения, где при наведении курсор на изображение происходит эффект. Как уже сказано выше, что автоматически прекращает движение и дает всем изображениям низкую непрозрачность, кроме изображения, на которое вы наводите курсор.
Считаю такой эффект прекрасный, который кардинально отличается от всего функционала, где задействована анимация, но главное, что она была создана без какой-либо внешней библиотеки.
Всем, доброго времени суток. Хочу предложить вам попробовать прокрутку для изображений на CSS. Она может пригодится в качестве фото галереи, которая позволит скроллить картинки не обрезая их. Точно заполняя область просмотра.
Нужно только задать определённый размер. Посмотрите рабочий вариант здесь.
Для начала создадим самый простой HTML код. Подготовьте несколько картинок которые будут отображаться в галерее. Они все должны быть одинакового размера, чтобы смотрелось всё аккуратно.
Картинок может быть сколько угодно. Добавляйте дополнительные строки -
И вот такой код CSS.
Синим я выделила размеры галереи, которые строго соответствуют размерам ваших изображений.
Такая простая галерея, в виде полосы прокрутки и без всяких наворотов, позволит компактно отобразить ваши изображения, сохраняя место на странице.
Это проект для тех, кто хочет показать на сайте красивую галерею с эффектом трёхмерности. Это низачем не нужно, просто симпатичный эффект. Так-то фотографии можно смотреть и без трёхмерных эффектов.
Логика проекта
Нам понадобится три компонента: HTML-страница, где будет карусель, CSS-файл, где мы настроим внешний вид карусели в целом, и скрипт на JavaScript, в котором будет вся механика работы карусели с фотографиями. Как всё будет работать:
- Готовим на странице место под картинки и оформляем их как блоки.
- Эти блоки объединяем в общий блок с каруселью.
- Задаём общие параметры внешнего вида картинок, фона и блоков в целом в CSS-файле.
- В скрипте делаем две вещи: правильно отрисовываем карусель в любом положении и учим страницу реагировать на движение мыши.
Сделаем всё по очереди.
HTML-страница
В этом проекте нам понадобятся две библиотеки, которые мы ещё не использовали: GASP и Zepto.
GSAP позволяет быстро и удобно работать с анимациями картинок и параллаксом в них. Параллакс — это когда картинка стоит как бы чуть дальше вглубь от своей рамки и при прокрутке движется чуть медленнее, открывая новые детали.
Zeppo — это аналог jQuery, который совместим с этой библиотекой в большинстве команд, но который не поддерживает старые браузеры. Основная идея Zeppo в том, чтобы создать быстрый и современный фреймворк, но без сложных конструкций внутри для поддержки старых браузеров. Поэтому наш проект будет работать только в браузерах, которые вышли после 2016 года.
Так как внутри страницы у нас будут одни блоки без содержимого, то и в браузере мы увидим только пустую белую страницу. Содержимое добавим в самом конце.
CSS-файл для настройки общего вида карусели
Так как у нас 3D-карусель, то первое, что мы сделаем, — установим свойство transform-style: preserve-3d . Это значит, что теперь нужные нам элементы будут отображаться в трёхмерном пространстве, а не на плоскости экрана. В этом же блоке запретим пользователю что-то выделять мышкой, чтобы при прокрутке карусели не выделялись никакие элементы:
/* общие настройки для всей страницы, а также для картинок
и блока с кольцом */
html, body, .stage, .ring, .img width:100%;
height: 100%;
transform-style: preserve-3d;
user-select:none;
>
Теперь настроим правила, по которым лишние объекты будут исчезать со страницы. Смысл в том, чтобы скрыть ту часть карусели, которую мы не видим, чтобы картинки не накладывались друг на друга при прокрутке:
Сделаем так, чтобы положение всех вложенных элементов зависело друг от друга, а не от размера окна браузера или других объектов. Это нужно для того, чтобы при вращении карусели мы смогли точно запрограммировать поведение картинок:
/* устанавливаем абсолютное позиционирование блоков на странице */
div position: absolute;
>
Последнее, что нам здесь осталось сделать, — задать отдельные настройки для самой карусели. Кроме высоты и ширины важный параметр в карусели — отдаление виртуального центра карусели от края экрана. Этот параметр влияет на перспективу: чем меньше это число, тем сильнее перспективные искажения.
/* отдельные настройки для карусели в целом */
.container /*на сколько центр карусели будет виртуально уедет вглубь монитора*/
perspective: 2000px;
width: 300px;
height: 400px;
left:50%;
top:50%;
/*как будут сдвигаться наши картинки*/
transform:translate(-50%,-50%);
>
Пишем скрипт
👉 Для удобства работы скрипта мы оставим оригинальные ссылки на картинки из скрипта Тома Миллера. Если вам нужно будет заменить их на свои — пронумеруйте картинки, начиная с номера 33, и положите их в одну папку.
Разделим скрипт на две части: спецэффекты с анимацией и обработку движения мыши.
Первое, что нам понадобится для работы с каруселью, — значение сдвига карусели:
// здесь будем хранить текущее значение сдвига карусели
let xPos = 0;
Чтобы ставить все картинки в карусели сразу по местам с самого начала, сделаем отдельную функцию getBgPos(i) — она будет брать элемент с номером i и возвращать нужное положение и значение трансформации картинки в карусели:
// получаем свойство background-position у элемента с номером i, чтобы отрисовать картинку в нужном месте в карусели
function getBgPos(i) return ( 100-gsap.utils.wrap(0,360,gsap.getProperty(‘.ring’, ‘rotationY’)-180-i*36)/360*500 )+’px 0px’;
>
Для анимации и обработки спецэффектов будем использовать встроенный в GSAP элемент timeline и менять его свойства на нужные для нас:
Теперь добавляем два обработчика событий: когда нажали кнопку мыши и когда отпустили. Чтобы карусель работала и с сенсорными экранами, сразу добавим поддержку тач-интерфейса:
// когда зажата левая кнопка мыши — можно крутить карусель
$(window).on(‘mousedown touchstart’, dragStart);
// отпускаем мышь — карусель останавливается
$(window).on(‘mouseup touchend’, dragEnd);
Читайте также: