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

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

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

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

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

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

Установка:

HTML

Код
<div class="parallaks">
  <div class="gupovka">
  <div id="background" class="nasloyene">
  <div class="img1"><img src="https://rataku.com/images/2022/01/17/img1.jpg"></div>
  </div>
  <div id="seredina" class="nasloyene">
  <div class="img2"><img src="https://rataku.com/images/2022/01/17/img2.png"></div>
  </div>
  </div>
  <div class="gupovka">
  <div id="avanscena" class="nasloyene">
  <div class="img3"><img src="https://rataku.com/images/2022/01/17/img3.png"></div>
  </div>
  </div>
</div>

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);
}

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

Демонстрация
2022-01-17 Загрузок: 2 Просмотров: 608 Комментарий: (5)

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

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

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

Комментарий: 5
Kosten
Kosten 2022-01-17 22:261
0
Как не крути, но некоторые материалы без изображение не смотрятся, и на стилистике не выехать, как пример этот параллакс на движение облаков при скроллинге.
avatar
nshewka 2022-01-18 02:022
0
Я не силен в HTML и CSS, подскажите пожалуйста, как мне засунуть это в определенный блок? Блок фиксированной высоты и чтобы внутри него вот таким же образом параллаксировали .png картинки. Сайт: Доступно только для пользователей Самый верхний блок (высотой 400пкс)
FeStemBer
FeStemBer 2022-01-18 02:583
0
Так это фон, что устанавливают на сайт или на вновь созданную страницу. А что вверх, то этот фон не для этого предназначен, так лучше слайдер установить.
avatar
nshewka 2022-01-18 03:174
0
Ну почему же, можно это все переделать и засунуть в блок, просто я попробовал и у меня не особо получилось, вот прошу помощи, может кто поможет)
Kosten
Kosten 2022-01-18 03:475
0
По идее должно получиться, ведь шапка по ширине страницы, где ширина 100%, остается выставить вертикаль, где в стилях она поставлена на всю горизонтальную ширину, это height: 100%; - попробовать меньше под шапку сделать. Не приходилось устанавливать такой формат, просто пишу, как сам бы попробовал.

width: 100%;
height: а здесь примерно 510px;
avatar