ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект параллакс фона на чистом CSS

Эффект параллакс фона на чистом CSS

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

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

Так выглядит фон, когда не пользуются прокруткой:

Красивый Эффект параллакс фона с использованием CSS

Установка:

HTML

Код

CSS

Код

body, html {
  overflow: hidden;
  margin:0;
  padding:0;
}
.parallaks {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 180px;
  perspective: 180px;
}
.gupovka {
  position: relative;
  height: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.nasloyene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.img1, .img2, .img3{
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.img1 {
  left: 50%;
  top: 50%;
}
.img2 {
  left: 60%;
  top: 150%;
}
.img3 {
  left: 50%;
  top: 50%;
}
#avanscena {
  z-index: 1;
  -webkit-transform: translateZ(100px) scale(.7);
  transform: translateZ(90px) scale(.7);
}
#seredina{
  z-index: 3
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#background{
  z-index: 2;
  -webkit-transform: translateZ(-400px) scale(2);
  transform: translateZ(-300px) scale(2);
}

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

Демонстрация

17 Января 2022 Загрузок: 2 Просмотров: 1177 Комментариев: (5)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 5
Порядок вывода комментариев: Kosten 17 Января 2022 22:26¹ 0 Как не крути, но некоторые материалы без изображение не смотрятся, и на стилистике не выехать, как пример этот параллакс на движение облаков при скроллинге. nshewka 18 Января 2022 02:02² 0 Я не силен в HTML и CSS, подскажите пожалуйста, как мне засунуть это в определенный блок? Блок фиксированной высоты и чтобы внутри него вот таким же образом параллаксировали .png картинки. Сайт: Доступно только для пользователей Самый верхний блок (высотой 400пкс) FeStemBer 18 Января 2022 02:58³ 0 Так это фон, что устанавливают на сайт или на вновь созданную страницу. А что вверх, то этот фон не для этого предназначен, так лучше слайдер установить. nshewka 18 Января 2022 03:17⁴ 0 Ну почему же, можно это все переделать и засунуть в блок, просто я попробовал и у меня не особо получилось, вот прошу помощи, может кто поможет) Kosten 18 Января 2022 03:47⁵ 0 По идее должно получиться, ведь шапка по ширине страницы, где ширина 100%, остается выставить вертикаль, где в стилях она поставлена на всю горизонтальную ширину, это height: 100%; - попробовать меньше под шапку сделать. Не приходилось устанавливать такой формат, просто пишу, как сам бы попробовал. width: 100%; height: а здесь примерно 510px;