• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
параллакс эффект с CSS и HTML

Параллакс эффект при помощи 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(/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>

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

parallax0

Добавить комментарий