• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Эффект прокрутки параллакса с помощью CSS (Прокрутку фона (эффект параллакса) для фонового изображения)
Эффект прокрутки параллакса с помощью CSS
Kosten
Дата: Суббота, 2019-08-10, 21:40 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25247
Награды: 58


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

CSS Involved

Где background-attachment: fixed CSS свойство является главным героем эффекта. Это свойство устанавливает, является ли фоновое изображение фиксированным в окне просмотра браузера или прокруткой внутри элемента контейнера.

Изображение изначально создается через свойство background-image. Поскольку элемент по существу пуст, вам необходимо задать ему определенную высоту.

Код
<div id="prokrutki-parallaksa"></div>

CSS

Код
#prokrutki-parallaksa {
    background-image: url("http://zornet.ru/ABVUN/Aba/robot.jpg");
    height: 817px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


Добавление эффекта параллакса на ваш сайт - это всего лишь вопрос назначения разных скоростей движения для слоев.

Демонстрация
Прикрепления: parallax.zip(4.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Эффект прокрутки параллакса с помощью CSS (Прокрутку фона (эффект параллакса) для фонового изображения)
  • Страница 1 из 1
  • 1
Поиск: