Параллакс эффект при помощи CSS и HTML

Для создания параллакс эффекта на сайте wordpress не обязательно использовать скрипт – достаточно воспользоваться CSS и HTML.

Скачать исходники для статьи можно ниже

1. Добавляем CSS стили для параллакс эффекта.
Для этого заходим в файл стилей wordpress – style.css – находится в админке, пункт “Внешний вид”, подпункт “Редактор”.

Добавляем в файл стилей следующий код:

section.module.parallax {
  height: 394px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 394px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url(https://mnogoblog.ru/wp-content/uploads/2017/05/holm.jpg);
}

2. Добавляем следующий кусок HTML кода – там где хотим видеть параллакс эффект.

<section class="module parallax parallax-1">
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-md-8">
       <h1>Section 1</h1>
       Mnogoblog
    </div>
    <div class="col-xs-4 col-md-4">
      Mnogoblog
    </div>
 </div>         
</div>     
</section>

Для примера, можно создать новую страничку, выбрать “Текстовой редактор” (вкладка “Текст”) и вставить на страничку вышеуказанный код: