Параллакс с фиксированным фоном

Параллакс с фиксированным фоном

Возможно, самый простой тип эффекта параллакса — это эффект с фиксированным фоном. Вы, наверное, уже заметили это на этом сайте. Просто посмотрите немного выше, где находится заголовок статьи. Фон там статичен даже при прокрутке вниз.

Эффект лучше всего работает в сочетании с растяжкой фонового изображения на весь экран..

Чтобы добиться этого эффекта, создайте новый контейнер, который будет служить вашим изображением параллакса. Установите его фон с помощью background-url ().

Чтобы стать параллаксом, добавьте:

.контейнер {background-attachment: fixed; размер фона: обложка; }

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

Вы можете увидеть пример на https://magadanski.com/demo/parallax-fixed-background/. Не стесняйтесь также проверять код.

размер фона

background-size — это стиль, для которого большинство браузеров добавили поддержку в 2011 году. Он позволяет загружать фоновое изображение элемента с размерами, отличными от исходного..

Читать также:  Бандлеры

Поддерживает значения в пикселях или%, добавляя 2 числа — для ширины и высоты..

Пример:

.контейнер {размер фона: 100 пикселей 50 пикселей; }

Сетчатка

Часто используется в изображениях сетчатки.

Чтобы не сломать сайты, которые не оптимизированы для устройств Retina, они увеличивают все в два, три или столько же, сколько пикселей устройства. Таким образом, если у вас есть элемент размером 100 на 50 пикселей и вы установили фоновое изображение с таким же разрешением, изображение будет выглядеть слегка размытым на устройстве Retina..

Чтобы исправить это на устройстве с коэффициентом увеличения 2, вам нужно использовать увеличенное изображение. Ширина и высота должны быть двойными — 200 на 100 пикселей. Однако, если вы установите такой фон, будет видна только его часть, так как он слишком велик, чтобы уместиться.

Читать также:  Установите Apache 2 4 в Windows

Здесь идет место для приведенного выше кода, который указывает, хотя фоновое изображение больше, уменьшить его до 100–50 пикселей (размер устройства). Пикселей на дюйм в этом случае становится больше. Обычные устройства просто пропускают 1 каждые 2 пикселя, и никакой разницы не будет. Однако устройства Retina будут использовать эти дополнительные пиксели для отображения более подробного фона..

крышка

Помимо разрешения, background-size также поддерживает 2 ключевых слова:

  • крышка
  • содержать

Первый означает, что изображение увеличивается (пропорционально), чтобы покрыть весь фон контейнера..

Обратите внимание, что если контейнер, например, очень широкий, но низкий, при расширении изображения, вероятно, останутся ненужные части внизу и вверху, которые не будут видны..

Параллакс с фиксированным фономИзображение увеличено, чтобы покрыть высоту и ширину контейнера. Если есть избыток каринки (отмечен полупрозрачным цветом), его не будет видно.

Читать также:  Начало работы в HTML атрибуты

Когда у вас есть background-size: cover вместе с background-attachment: fixed, фоновое изображение будет растянуто еще больше. Поскольку в зависимости от положения прокрутки могут отображаться разные части изображения, браузеры растягивают его, чтобы закрыть весь экран. Обратите внимание на это в примере выше.

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

Таким образом, с очень широким и низким контейнером изображение будет увеличено до высоты контейнера, оставляя пустое пространство сбоку..

Параллакс с фиксированным фономИзображение максимально увеличено, но все еще содержит целое в контейнере..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?