Как зафиксировать фоновое изображение относительно окна браузера для достижения эффекта параллакс

Обновлено: 04.07.2024

Цвет фона

Цвет фона задается свойством background-color и значениями:

Например, мы могли бы установить заголовок h1 с цветом фона бирюзового, следующим образом:

Фоновое изображение

Повторение фонового изображения

Расположение фонового изображения

С помощью свойства background-position вы управляете местоположением страницы, на которой будет отображаться фоновое изображение. Вы можете выбрать одно из следующих значений позиционирования фонового изображения:

Фиксация фонового изображения

Вы можете зафиксировать фоновое изображение, чтобы даже при прокрутке страницы оно оставалось в том же месте на экране. Эта фиксация фонового изображения выполняется с помощью следующей команды:

Укороченная запись свойств фонового изображения

Свойства фона, перечисленные здесь, могут быть установлены кратко с помощью свойства background. Вот пример, который устанавливает цвет фона (близкий к оранжевому), фоновое изображение с именем grass.jpg, повторение изображения, размещения его в правом верхнем углу и фиксацию изображения:

CSS позиция

То, как будет выглядеть веб-сайт, во многом определяется расположением его отдельных элементов. У CSS есть несколько опций для контроля положения элементов. Хорошее знание этих CSS-команд позволяет вам создавать веб-страницы вашего сайта именно так, как вы хотите, чтобы они выглядели.

Обтекание (float)

Элементы могут быть расположены плотно слева или справа, используя свойство float. Например, фотография, для которой назначен класс photo, может быть расположена слева, как показано ниже:

В то же время, текст будет перемещен так, чтобы изображение было плотно обернуто.

Значения, которые можно использовать с плавающей точкой:

Свойство float также часто используется для формирования столбцов на странице. Для этой цели содержимое каждого столбца в HTML заключается в теги <div> и </div>, и тогда для каждого элемента div в CSS указывается float:left и ширина (width). Таким образом, первый столбец (первый в HTML-коде div элемент) будет смещаться влево, занимая указанную для нее ширину, затем будет упорядочен второй столбец и т. д. Вот конкретный пример использования float:

Очистка (clear)

В соответствии с тем, как отображается страница, элементы можно разделить на блоки и строки. Блочные элементы (заголовки h1

h6, абзацы, div) занимают всю ширину экрана и всегда имеют символ конца строки, автоматически включаемый до и после них.

Элементы строк (например, span, em, a), в свою очередь, занимают только необходимое им пространство и не содержат обязательного символа конца строки.

Свойство display используется для изменения способа отображения элемента. Наиболее часто используемые значения (которые также лучше всего поддерживаются браузерами):

То, какой должна быть позиция элемента на странице, задает свойство position и одно из значений:

Слева, справа, сверху, снизу (left, right, top, bottom)

Эти свойства используются вместе с position, чтобы определить позицию, на которой должен быть размещен данный элемент. Для значений left, right, top и bottom можно использовать числа с единицами измерения (px, em и т. д.), проценты или ключевое слово auto.

Иногда элементы могут быть больше, чем их указанная ширина или высота. Что делать с частью элемента, выходящей за пределы указанных размеров, контролируется свойством overflow. Кроме того, overflow часто используется для добавления ползунка к элементу.

Overflow может использоваться со следующими значениями:

Используя соответствующие значения положения, вы можете накладывать элементы друг на друга. В этом случае, чем позже элемент описан в HTML-коде, тем дальше будет позиция.

Эта статья о приемах работы в 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.

В этой статье я поделюсь некоторыми полезными советами и приемами, без понимания которых я бы не смог успешно завершить свой путь по изучению 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 . Вместе они позволяют изменять размеры изображения, не влияя на соотношение его сторон.

Да, всегда есть возможность кадрировать ваше изображение в фоторедакторе, но большим преимуществом кадрирования в браузере является то, что это можно сделать при помощи анимации.

Чтобы продемонстрировать этот прием как можно проще, нижеприведенный пример запускает эффект при помощи тега <input type="checkbox"> . Таким образом, мы сможем использовать псевдокласс :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 не будет отображаться на элементах, расположенных в тегах <body> или <html , у которых не задан цвет. Проще всего в этой ситуации назначить этим тегам свойство 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-оптимизация веб-страницы для печати.

Эти приемы довольно легко изучить самостоятельно, поэтому я оставлю ссылки к моим любимым ресурсам, чтобы вы узнали о них подробнее.

CSS свойство background-attachment устанавливает поведение фонового изображения во время прокрутки страницы. По умолчанию изображение прокручивается с остальной частью страницы, но допускается также зафиксировать фон относительно уровня просмотра.

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
background-attachment	1.0	1.0	3.5	1.0	4.0	12.0

Значения свойства

Значение	Описание
scroll	Задний фон прокручивается вместе с элементом. Значение по умолчанию.
fixed	Фон фиксируется относительно уровня просмотра.
local	Фон позиционируется относительно содержимого элемента (прокручивается когда прокручивается элемент).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

В этом примере мы создали два блочных элемента <div>, к первому элементу мы применили стили, которые позволяют указать высоту блока (свойство height), фоновое изображение (background-image), указать, что оно будет статическим ( background-attachment ), спозиционировать его по центру (background-position) и отключить повторение фонового изображения по осям X и Y (background-repeat). Обращаю Ваше внимание, что вы можете указать все свойства для фона элемента в одном объявлении с использованием универсального свойства background).

Второй элемент представляет из себя пустой блок высотой 600px, он позволит нам продемонстрировать параллакс эффект за счёт прокрутки страницы. Обратите внимание, что наше изображение (первый блок) остается на одном месте и не прокручивается вместе со страницей.

Результат нашего примера (прокрутите страницу вниз для демонстрации):

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.