Как зафиксировать фоновое изображение относительно окна браузера для достижения эффекта параллакс
Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.
CSS — специфическая технология. На первый взгляд она кажется очень простой. Но некоторые эффекты, которые в теории кажутся простыми, не являются таковыми на практике.
Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
1. «Липкий» футер
Несмотря на простоту реализации, он может стать камнем преткновения для начинающих разработчиков.
В большинстве проектов вы захотите, чтобы футер оставался в нижней части экрана вне зависимости от объема контента и адаптировался под различные условия просмотра.
До появления CSS3 этого эффекта было сложно добиться, не зная точную высоту футера. Но сейчас это не проблема, для создания «липкого» футера лучше всего использовать Flexbox. А именно — взять свойство flex-shrink, так вы будете уверены в том, что нижний колонтитул сохранит свои размеры.
При размере 0 он не будет сжиматься вообще.
2. Увеличение при наведении
Такой эффект — отличный способ привлечь внимание пользователя к кликабельному изображению. Когда тот наводит курсор на картинку, она слегка «приподнимается» с сохранением прежних размеров.
Для того, чтобы сделать такой эффект, нам понадобится враппер div, им нужно обернуть тэг image в HTML.
Кроме того, чтобы эффект заработал, нужно установить width и height элемента, а также убедиться, что его overflow установлен как hidden. После этого вы сможете применять любые типы трансформаций.
3. Постоянный режим Night Mode
Если вам необходим быстрый способ установить ночной режим для вашего сайта, то используйте фильтры invert и hue-rotate.
filter: invert() может принимать значения от 0 до 1. 1 — это инверсия, белое становится черным.
filter: hue-rotate () изменяет цветовое содержимое ваших элементов таким образом, что они сохраняют более-менее одинаковый уровень отделения друг от друга. Значения варьируются от 0 до 360 градусов.
Если объединить эти эффекты внутри тега body, вы можете быстро добиться получения ночного скина для сайта (фону в этом случае нужно задать цвет).
Используя эти настройки можно превратить стартовую страницу Google вот в это.
4. Кастомные буллиты
Для создания кастомных буллитов для списка можно использовать content вместе с псевдоэлементом ::before
Бонус: хлебные крошки в навигации
Есть много способов получать интересные эффекты с помощью свойства content, но я не удержался и добавил еще один.
Поскольку слеши и другие символы, используемые для разделения хлебных крошек, это стилистика, имеет смысл определить их в CSS. Как и во многих других примерах в этой статье, эффект основан на псевдоклассе — last-child. Он доступен только в CSS3:
5. Параллакс-изображения
Этот популярный эффект привлекает внимание пользователей. Его стоит использовать, если вы хотите оживить страницу во время скроллинга.
В то время, как обычные изображения изменяют местоположение при прокручивании, параллакс-изображения остаются на месте.
CSS-пример (только CSS)
Здесь неотъемлемым элементом является background-attachment: fixed, он привязывает положение фонового изображения к определенной позиции. Картинка остается на месте, в то время, как окно, из которого она видна, прокручивается. Создается впечатление, что картинка находится позади всего сайта. Для того, чтобы заменить этот эффект на противоположный, указываем background-attachment: scroll.
Нравится вам это или нет, но параллакс остается. При разумном использовании он может придавать глубину и изящество веб-приложению. Проблема, однако, заключается в том, что эффективно реализовать параллакс не всегда удается. В этой статье мы рассмотрим решение, которое является одновременно эффективным и, что не менее важно, кроссбраузерным.
Коротко
Не используйте для создания параллакс-анимации прокрутку событий или background-position.
Для создания более четкого параллакс-эффекта используйте 3D-трансформации средствами CSS.
Для Mobile Safari используйте position: sticky, чтобы обеспечить распространение эффекта параллакса.
Проблемы с параллаксами
Для начала давайте рассмотрим два распространенных способа достижения эффекта параллакса и, в частности, почему они не подходят для наших целей.
Плохой вариант: использование событий при прокрутке
Ключевым требованием параллакса является то, что он должен быть связан со скроллингом; при каждом изменении положения прокрутки страницы позиция параллакс-элемента должна обновляться. Звучит просто, но важным механизмом современных браузеров является их способность работать асинхронно. В нашем конкретном случае это относится к событиям прокрутки. В большинстве браузеров события прокрутки передаются по принципу "best-effort" ("наилучшая попытка") и не гарантируется, что они будут выполнены для каждого кадра анимации скроллинга!
Эта важная деталь информирует нас о том, почему мы должны избегать JavaScript-решений, перемещающих элементы на основе событий прокрутки: JavaScript не гарантирует, что параллакс будет соответствовать положению прокручиваемой страницы. В ранних версиях Mobile Safari события прокрутки доставлялись фактически в конце скроллинга, что делало невозможным создание скролл-эффекта на основе JavaScript. Более поздние версии действительно передают события прокрутки во время анимации, но, как и в Chrome, по принципу - "наилучшая попытка". Если основной поток занят какой-либо другой работой, события прокрутки сразу не будут доставлены, а значит, эффект параллакса будет потерян.
Плохой вариант: обновление background-position
Еще одна ситуация, которой мы хотели бы избежать, — это прорисовка на каждом кадре. Многие решения пытаются изменить background-position для обеспечения параллакс-вида, что заставляет браузер перерисовывать затрагиваемые части страницы при прокрутке, а это может быть достаточно затратным, что значительно ухудшает анимацию.
Если мы хотим воплотить в жизнь идею создания параллакс-движения, то необходимо что-то, применяемое в качестве ускоренного свойства (что сегодня означает придерживаться трансформаций и непрозрачности), и которое не зависит от событий прокрутки.
CSS в 3D
Scott Kellum и Keith Clark проделали значительную работу в области использования CSS 3D для обеспечения параллакс-движения, и техника, которую они применяют, заключается в следующем:
Настройте содержащийся элемент на прокрутку с overflow-y: scroll (и, возможно, overflow-x: hidden ).
К этому же элементу примените значение perspective , а для perspective-origin установите значение top left или 0 0 .
К его дочерним элементам примените сдвиг в Z и масштабируйте их обратно, чтобы обеспечить параллакс-движение без изменения их размера на экране.
CSS для этого подхода выглядит следующим образом:
Что предполагает наличие HTML-сниппета, подобного этому:
Настройка масштаба для перспективы
Отодвигая дочерний элемент назад, вы уменьшите его размер пропорционально значению перспективы. Можно рассчитать, насколько его нужно масштабировать, с помощью следующего уравнения: (перспектива — расстояние) / перспектива. Поскольку мы, скорее всего, хотим, чтобы параллакс-элемент отображался с эффектом параллакса, но в том размере, в котором мы его создали, его нужно было бы масштабировать таким образом, а не оставлять как есть.
В приведенном выше коде перспектива равна 1px, а расстояние по Z у parallax-child равно -2px. Это означает, что элемент должен быть увеличен в 3 pаза, что видно из значения, введенного в код: scale(3) .
Для любого содержимого, к которому не применяется значение translateZ , можно подставить нулевое значение. Это означает, что масштаб равен (переспектива — 0) / перспектива, и в итоге дает значение 1, то есть масштаб не увеличивается и не уменьшается. Достаточно удобно, на самом деле.
Как работает этот подход
Важно понять, почему это работает, поскольку мы собираемся использовать эти знания в ближайшее время. Прокрутка — это фактически преобразование, поэтому ее можно ускорить; в основном она включает в себя перемещение слоев с помощью GPU. В обычном скролле, который не имеет понятия перспективы, прокрутка происходит в пропорции 1:1 при сравнении прокручиваемого и его дочерних элементов. Если вы прокручиваете элемент вниз на 300px, то его дочерние элементы трансформируются вверх на ту же величину: 300px.
Однако применение значения перспективы к прокручиваемому элементу нарушает этот процесс; оно изменяет матрицы, лежащие в основе трансформации прокрутки. Теперь прокрутка на 300px может переместить дочерние элементы только на 150px, в зависимости от выбранных значений perspective и translateZ . Если у элемента значение translateZ равно 0, он будет прокручиваться со скоростью 1:1 (как и раньше), но дочерний элемент, сдвинутый по Z от начала перспективы, будет прокручиваться с другой скоростью! В итоге: параллакс-движение. И, что очень важно, это обрабатывается как часть внутреннего механизма прокрутки браузера автоматически, то есть нет необходимости слушать scroll события или изменять background-position .
Ложка дегтя в бочке меда: Mobile Safari
У каждого эффекта есть свои оговорки, и одна из них касается трансформаций — сохранение 3D-эффектов для дочерних элементов. Если в иерархии между элементом с перспективой и его дочерними элементами с параллаксом существуют еще какие-нибудь элементы, 3D перспектива "сплющивается", то есть эффект теряется.
В приведенном выше HTML, .parallax-container будет новым, он фактически сплющит значение perspective , и мы потеряем эффект параллакса. Решение, в большинстве случаев, довольно простое: добавьте transform-style: preserve-3d к элементу, что заставит его распространять любые 3D-эффекты (например, наше значение перспективы), которые были применены дальше по дереву.
Однако в случае с Mobile Safari все немного сложнее. Применение overflow-y: scroll к элементу-контейнеру технически работает, но ценой отсутствия способности прокрутки скролл-элемента. Решением является добавление -webkit-overflow-scrolling: touch , но это также приведёт к сплющиванию perspective , и мы не получим никакого параллакса.
С точки зрения прогрессивного улучшения, это, вероятно, не слишком большая проблема. Даже если мы не можем использовать параллакс в любой ситуации, наше приложение все равно будет работать, но было бы неплохо найти обходной путь.
position: sticky на помощь!
На самом деле, есть некоторая помощь в виде position: sticky , которая существует, чтобы позволить элементам "прилипать" к верхней части области просмотра или заданному родительскому элементу во время прокрутки. Спецификация, как и большинство других, довольно объемная, но в ней есть одна жемчужинка:
Липко позиционированный блок размещается аналогично относительно позиционированному блоку, но смещение рассчитывается применительно к ближайшему предку с прокручиваемым блоком или к области просмотра, если у предка нет прокручиваемого блока. — Модуль позиционированного макета CSS Уровень 3
На первый взгляд это может показаться не очень важным, но ключевым моментом в этом предложении является указание на то, как именно рассчитывается прилипание элемента: "смещение вычисляется по отношению к ближайшему предку с прокручиваемым полем". Другими словами, расстояние, на которое нужно переместить прилипший элемент (чтобы он оказался прикрепленным к другому элементу или к области просмотра), рассчитывается до применения любых других преобразований, а не после. Это означает, что, как и в предыдущем примере с прокруткой, если смещение было рассчитано на 300px, появляется новая возможность использовать перспективы (или любое другое преобразование) для манипулирования значением смещения на 300px до того, как оно будет применено к любым прилипшим элементам.
Применяя position: -webkit-sticky к параллакс-элементу, мы можем эффективно "отменить" эффект сплющивания от -webkit-overflow-scrolling: touch . Это гарантирует, что параллакс-элемент ссылается на ближайшего предка с прокручиваемым полем, которым в данном случае является .container . Затем, как и раньше, к .parallax-container применяется значение perspective, которое изменяет рассчитанное смещение прокрутки и создает эффект параллакса.
Это позволяет восстановить эффект параллакса для Mobile Safari, что является отличной новостью для всех!
Предостережения по позиционированию "липких" элементов
Однако здесь есть разница: position: sticky действительно изменяет механику параллакса. Липкое позиционирование пытается прикрепить элемент к прокручиваемому контейнеру, в то время как нелипкая версия этого не делает. Это означает, что параллакс с липким позиционированием становится обратным параллаксу без него:
С position: sticky , чем ближе элемент к z=0, тем меньше он перемещается.
Без position: sticky , чем ближе элемент к z=0, тем больше он движется.
Если все это представляется немного абстрактным, посмотрите на демонстрацию от Robert Flack, которая показывает, как по-разному ведут себя элементы с липким (sticky) позиционированием и без него. Чтобы увидеть разницу, вам понадобится Chrome Canary (на момент написания статьи это версия 56) или Safari.
Это параллакс с использованием перспективы на элементе переполнения (overflow). Начало перспективы находится за пределами скроллера. Это означает, что для того, чтобы элемент параллакса не двигался, он должен находиться бесконечно далеко.
начало перспективы (элемент прокрутки).
Это параллакс с использованием позиционного прилипания. Начало перспективы находится внутри скроллера, поэтому он перемещается вверх по мере прокрутки.
Чтобы элемент параллакса двигался в пропорции 1:1 с прокручиваемым содержимым, он должен быть бесконечно далеко.
Демонстрация от Robert Flack, показывающая, как position: sticky влияет на параллакс-прокрутку.
Различные ошибки и обходные пути
Однако, как и везде, здесь все еще есть неровности, которые нужно сгладить:
Поддержка технологии прилипания непостоянна. В Chrome она все еще реализуется, в Edge отсутствует полностью, а в Firefox есть ошибки рисования, когда липкость сочетается с трансформациями перспективы. В таких случаях стоит внести небольшой код, чтобы добавлять position: sticky (версия с префиксом -webkit- ) при необходимости, и это только для Mobile Safari.
"Содержимое страницы только что стало огромным!". Многие браузеры учитывают масштаб при определении размера содержимого страницы, но, к сожалению, Chrome и Safari не учитывают перспективу. Поэтому если к элементу применен масштаб, скажем, 3x, вы вполне можете увидеть полосы прокрутки и тому подобное, даже если после применения perspective элемент будет иметь размер 1x. Эту проблему можно обойти, масштабируя элементы из правого нижнего угла (с помощью transform-origin: bottom right ), и это работает, поскольку приводит к тому, что элементы больших размеров вырастают в "отрицательную область" (обычно левую верхнюю) прокручиваемой области; прокручиваемые области никогда не позволяют видеть или прокручивать содержимое в отрицательной области.
Заключение
Параллакс — интересный эффект в случае продуманного использования. Как вы видите, его можно реализовать таким образом, чтобы он был высокопроизводительным, связанным с прокруткой и кроссбраузерным. Поскольку для получения желаемого эффекта потребуется немного математических выкладок и небольшое количество бойлерплейта, мы подготовили небольшую библиотеку-хелпер и пример, которые вы можете найти в нашем GitHub-репозитории UI Element Samples.
Всем привет! Буквально за 5 минут расскажу, как сделать parallax-эффект, который помог нам наглядно показать стилистические различия между светлой и темной темами на сайте «Дизайн-система НЛМК».
Parallax-эффект позволяет пользователю увидеть изменения темы у компонентов при скролле страницы, причем сами компоненты зафиксированы, а линия смены темы двигается синхронно со скроллом.
Но для начала мне следует представиться. Я - frontend-разработчик “НЛМК - Информационные технологии”, занимаюсь созданием различных решений для упрощения работы промышленных цехов. Один из моих проектов - «Дизайн-система НЛМК», которая является основой для других, более сложных решений в других проектах.
Разработка структуры сайта, который является своеобразной "визитной карточкой" «Дизайн-системы», дала простор для интересных фич по его стилизации.
Какой смысл parallax-эффекта в данном проекте? В “Дизайн-системе” присутствуют различные компоненты с вариациями для темной и светлой тем: от простых всплывающих подсказок до сложных элементов навигации. Как всё это изящно показать пользователям и, возможно, помочь выбрать тему интерфейса? Как раз с помощью parallax-эффекта. Сделать его быстро и просто.
Приступим к реализации. Для этого нам потребуются старые-добрые HTML и CSS, а также препроцессор SCSS. Ну и базовое знание БЭМ также не повредит :)
Создадим блок экрана, содержащий в себе два дочерних элемента, которые будут содержать две картинки с компонентами светлой и темной тем:
Класс .screen__part объединяет в себе общие стили дочерних элементов, а модификаторы --light и --dark его расширяют.
Начнем написание стилей блоков. Создадим общий класс блока .screen, который содержит в себе элемент .screen__part:
Предполагается, что высота каждого элемента с картинками будет равна высоте экрана (оно же 100vh), чтобы пользователь мог рассмотреть все компоненты. Далее добавим свойства модификаторов .screen__part--light и .screen__part--dark:
Здесь используются более комплексные стили, поэтому давайте разберемся подробнее. Свойство .background у обоих элементов может заменить десяток аналогичных свойств для стилизации фоновых картинок. Но для наглядности разобьем его на части (возьмем значения из “светлого” блока):
Первое и второе свойства вполне понятны - они содержат фоновый цвет и путь к фоновой картинке. Третьим свойством мы размещаем изображение один раз и больше его не повторяем. Свойство background-position указывает начальное положение фона, в нашем случае мы располагаем его по центру как по горизонтали, так и по вертикали. Свойством background-size мы указываем размер фонового изображения, причем значением cover мы сохраняем пропорции изображения так, чтобы его высота равнялась высоте элемента. Свойством background-attachment и значением fixed мы фиксируем фоновое изображение и предотвращаем его перемещение (или фиксируем его “на заднем плане”, кому как удобнее)
Теперь рассмотрим свойство clip-path. С его помощью можно создавать блоки в форме разных геометрических фигур. Если в качестве значения использовать функцию polygon , то можно получить блок в форме четырехугольника. В нашем примере мы передаем в функцию четыре пары значений, четыре пары координат углов четырехугольника (левый верхний, правый верхний, правый нижний, левый нижний):
Но если оставить все как есть, то окажется, что то, что было обрезано при помощи clip-path, оставит под собой пустое пространство или “зазор”. Поэтому при помощи свойств position и top мы поднимаем “темный” блок ровно на столько, сколько по высоте было обрезано, а именно на 12vh (главное помнить, что система координат начинается в левом верхнем углу, и поэтому в свойстве надо поставить знак “минус”, иначе “темный” блок окажется еще ниже).
Ниже представлен демо-результат проделанной работы:
На этом, в принципе, все! Используя несколько несложных свойств css, мы реализовали интересный parallax-эффект, который смог в полной мере раскрыть темизацию используемых компонентов.
В этой статье я поделюсь некоторыми полезными советами и приемами, без понимания которых я бы не смог успешно завершить свой путь по изучению CSS. Кроме того, вы вряд ли найдете данные приемы в большинстве учебных пособий по CSS
Для большинства проектов вам потребуется футер, который должен оставаться в нижней части экрана, независимо от размера контента, но, если контент страницы проходит через окно просмотра (viewport) — футер должен адаптироваться вместе с остальным контентом.
До CSS3, не зная точную высоту своего футера, добиться этого эффекта было очень трудно. И хотя мы и называем его “прилипающий футер”, вы не можете просто прописать ему свойство position: sticky , так как это может блокировать контент.
На сегодняшний день, наиболее подходящим решением является использование Flexbox. Суть в том, чтобы использовать свойство flex-grow в div , содержащем основной контент страницы. В приведенном ниже примере я использую тег main .
flex-grow определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами. При значении 0 вы вообще ничего не увидите, поэтому нужно установить значение 1 или выше. В приведенном ниже примере я использовал свойство flex: auto , которое по умолчанию устанавливает значение flex-grow равное 1 .
Чтобы избежать “нежелательного поведения”, мы добавим свойство flex-shrink: 0 в тег footer . flex-shrink определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink , когда стандартная ширина flex-элементов шире, чем flex-контейнер.
Обновление: Вышеупомянутое решение может некорректно работать в Internet Explorer 11. Я протестировал свой код в IE11, но он работал вполне нормально.
Эффект увеличения изображения при наведении — это отличный способ привлечь внимание пользователя к кликабельной картинке. Когда пользователь наводит курсор на изображение, оно немного увеличивается, но его размер остается прежним.
Для достижения данного эффекта, нам потребуется обернуть обычный тег img в тег div в HTML-коде.
Затем в CSS нам нужно установить значения width и height для родительского элемента и убедиться, что значение свойства overflow установлено на hidden . Далее вы сможете применить любой вид анимации, посредством свойства transform , к img в теге div .
Если вы ищите быстрый способ, как применить “темный режим” к своему веб-сайту, попробуйте использовать фильтры invert и hue-rotate .
Значения свойства filter: invert() могут варьироваться от 0 до 1 , где 1 меняет белый цвет на черный.
filter: hue-rotate() меняет цвет изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg .
Соединив эти свойства в теге body , вы сможете быстро опробовать темную версию своего сайта (Чтобы фильтры подействовали на фон, вы должны задать ему цвет).
Используя эти настройки, мы можем мгновенно преобразить домашнюю страницу Google:
В Chrome или Firefox нажмите F12, чтобы открыть инструменты разработчика. Оттуда вы можете редактировать CSS любого сайта.
Чтобы создать пользовательские маркеры для неупорядоченного списка, вы можете использовать свойство content вместе с псевдоэлементом ::before .
Бонус: Навигационная цепочка или “хлебные крошки”
Существует множество полезных способов использовать свойство content , и я не удержался, добавив еще один.
Поскольку слэш и другие символы, используемые для разделения “хлебных крошек”, являются чисто стилистическими, имеет смысл определить их в CSS. Как и многие примеры в этой статье, этот эффект опирается на псевдокласс last-child — доступный только в CSS3:
Этот запоминающийся эффект становится все популярнее день ото дня. Мы тоже не будем стоять в сторонке и воспользуемся им, чтобы оживить страницу.
В то время как обычные изображения на странице перемещаются в зависимости от того, куда скроллит пользователь, изображения с эффектом параллакса остаются в зафиксированном положении — перемещается только окно, через которое его видно.
Пример с использованием только CSS
Обязательным свойством для простейшей версии этого эффекта является background-attachment: fixed , фиксирующее расположение фонового изображения внутри окна просмотра (viewport). (Противоположный эффект достигается с помощью background-attachment: scroll ).
Как и в случае с “прилипающим футером”, до CSS3 было очень сложно кадрировать изображение. Сейчас же у нас есть два свойства, которые упрощают этот процесс: object-fit и object-position . Вместе они позволяют изменять размеры изображения, не влияя на соотношение его сторон.
Да, всегда есть возможность кадрировать ваше изображение в фоторедакторе, но большим преимуществом кадрирования в браузере является то, что это можно сделать при помощи анимации.
Чтобы продемонстрировать этот прием как можно проще, нижеприведенный пример запускает эффект при помощи тега . Таким образом, мы сможем использовать псевдокласс :checked в CSS и нам не потребуется никакой JavaScript:
Если у вас есть опыт использования Adobe Photoshop, тогда вы, вероятно, знаете, насколько разнообразными могут быть режимы наложения для создания неповторимых и интересных эффектов. Но знаете ли вы, что большинство из этих режимов наложения также доступны в CSS?
Вот так выглядит домашняя страница Medium, если у изображений выставлено свойство background-color на светло-голубой (lightblue) и blend-mode на difference :
Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижележащими слоями. Так, например, вы можете создавать подобные эффекты, используя mix-blend-mode с color-dodge и цвет фона lightsalmon .
Примечание: В настоящее время в Chrome 58+ имеется ошибка, из-за которой mix-blend-mode не будет отображаться на элементах, расположенных в тегах или , у которых не задан цвет. Проще всего в этой ситуации назначить этим тегам свойство background-color: white .
CSS Grid и Flexbox значительно упростили процесс создания различных типов адаптивных макетов, а также позволили нам легко центрировать элементы по вертикали, что прежде было очень сложно.
Тем не менее, есть тип макета, к которому эти инструменты плохо подходят. Данный макет используется Pinterest — в нем вертикальное расположение каждого элемента изменяется в зависимости от высоты элемента над ним.
Самый лучший способ добиться такого же результата — использовать в CSS свойства колонок. Чаще всего они используются для создания нескольких колонок текста в газетном стиле, но есть и другой отличный пример использования.
Чтобы это сработало, вам нужно обернуть свои элементы в div и присвоить этому блоку свойства column-width и column-gap .
Затем, чтобы предотвратить разделение элементов между двумя колонками, добавьте column-break-inside: avoid отдельным элементам.
Приведенный выше пример также отлично иллюстрирует псевдокласс :not() . Он идет вместе с псевдоклассом :hover , поэтому все элементы, кроме того, на который наведен курсор, угасают.
Я надеюсь, что вышеприведенные примеры прояснили некоторые полезные CSS эффекты и, возможно, даже привлекли ваше внимание к функциям, о которых вы до этого не знали.
Было трудно составить список из 8 CSS приемов, так как были и другие пункты, которые я бы хотел добавить. К ним относятся такие функции, как keyframe анимация, scroll-snapping (умная прокрутка), более сложная панель навигации, 3D-эффекты, CSS-оптимизация веб-страницы для печати.
Эти приемы довольно легко изучить самостоятельно, поэтому я оставлю ссылки к моим любимым ресурсам, чтобы вы узнали о них подробнее.
От автора: бесконечная прокрутка изображений по-разному применяется в приложениях и на веб-сайтах, которыми мы пользуемся ежедневно. Например, мы часто видим на веб-сайтах движущийся фон, как показано в примере ниже.
В этом посте мы познакомимся с двумя способами создания эффекта бесконечной прокрутки используя фоновые изображения с базовой HTML-разметкой и CSS, в том числе:
изображение с бесконечной горизонтальной прокруткой с использованием анимации для зацикливания изображения;
эффект прокрутки изображения параллакса, создающий иллюзию бесконечной прокрутки изображения.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Для обоих методов нам нужно изображение в качестве фона. Для первого эффекта в идеале требуется изображение с одинаковыми левой и правой сторонами; изображение для второго эффекта не нуждается в особых спецификациях.
Обе стороны изображения должны быть сплошного цвета, идентичного (или очень близкого) друг к другу. Это позволяет циклу продолжаться незаметно для пользователя, создавая впечатление, что изображение продолжается бесконечно.
Если у вас нет изображения и вы не хотите создавать собственное, я настоятельно рекомендую использовать веб-сайт Unsplash. Unsplash предоставляет изображения в высоком разрешении без лицензионных отчислений, все, что они просят, — это предоставить кредит автору. Вот изображение, которое я буду использовать для этого урока:
Теперь, когда источник изображения выбран, давайте перейдем к созданию эффектов в CSS.
Способ 1: Создание изображения с бесконечной горизонтальной прокруткой
Давайте рассмотрим первый сценарий. Во-первых, нам нужен контейнер для размещения изображения, который должен быть больше, чем само изображение; он может быть больше в два раза или еще больше, если ширина контейнера равномерно делится на ширину изображения, чтобы создать бесшовный эффект.
Этот контейнер позволяет нам повторять изображение с помощью CSS, чтобы создать эффект зацикливания, который нам нужен.
HTML-разметка и базовые стили
Давайте начнем с создания базовой HTML-разметки для нашего прокручиваемого изображения. Как упоминалось ранее, сначала нам нужен контейнер, а затем изображение внутри него:
Читайте также: