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

Красивый эффект параллакса на чистом CSS

В этой статье представлен материал по созданию эффекта параллакса, где при помощи чистого CSS3 происходит трансформации страницы при прокрутки. Если говорить точнее, то здесь вы узнаете, как создать параллакс прокрутку для сайтов, где только задействуем CSS. Во-первых, вы должны знать, что такое параллакс, и здесь немного кратко поясним. Так как этот эффект параллакса изначально производит объекты переднего плана, которые движутся быстрее, чем их аналоги на заднем плане.

Основном можно встретить встроенные эффекты параллакса, которые работают с помощью JavaScript или любой другой javascript-фреймворк. Но есть и другие варианты, где задействуем Parallax с помощью CSS. Вы можете увидеть этот эффект при прокрутке веб-страницы вверх или вниз. Но главное, что эту прокрутки с параллаксом, которая воспроизводиться на чистом CSS легко понять новичкам. Где при помощи Parallax можно создать потрясающий одностраничный веб-сайт с красивым внешним видом.

Параллаксная прокрутка на чистом CSS отлично настроена на мобильные аппараты, где корректна адаптивна на разные размеры мобильных аппаратов, и теперь можно просматривать с большого монитора или с мобильного гаджет.

При прокрутки страницы вверх или вниз:

Установка:

HTML

Код

<div class="designeka">
  <div class="pesamun">
  <span class="anekasearn">
  ZorNet.Ru #1
  </span>
  </div>
  </div>

  <section class="section kaanced-nekis">
  <h2>CSS</h2>
  <p>
  Ключевые слова - это тип описательных метаданных, которые классифицируют ваши объявления в соответствии с алгоритмами поисковых и медийных объявлений.
  </p>
  </section>

  <div class="secondimg">
  <div class="pesamun">
  <span class="anekasearn anance">
  ZorNet.Ru #2
  </span>
  </div>
  </div>

  <section class="section kaanced-nekis">
  <h2>Скрипты</h2>
  <p>
  Одним из этих принципов, несомненно, является использование списков минус-слов. Хотя списками минус-слов часто пренебрегают, на самом деле они являются краеугольным камнем любой рекламной кампании Google и важной деталью, от которой зависит успех вашей кампании.
  </p>
  </section>

  <div class="kaadesaen">
  <div class="pesamun">
  <span class="anekasearn anance">
  ZorNet.Ru #3
  </span>
  </div>
  </div>

  <section class="section kaanced-nekis">
  <h2>HTML5</h2>
  <p>
  Практика изоляции и социального дистанцирования глубоко повлияла на мир, в котором мы живем, и на то, как он функционирует сейчас и в обозримом будущем. Многие службы уже полностью переведены в онлайн, а другие все еще находят новые и изобретательные способы использования Интернета для развития своего бизнеса.
  </p>
  </section>

  <div class="forthimg">
  <div class="pesamun">
  <span class="anekasearn">
  <a href="http://zornet.ru/">ZorNet.Ru</a>
  </span>
  </div>
  </div>

CSS

Код

.designeka,
.secondimg,
.kaadesaen,
.forthimg {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.7;
  /*
  fixed = parallax
  scroll = normal
  */
  background-attachment: fixed;
}

.designeka {
  background-image: url(http://zornet.ru/_fr/56/4171209.jpg);
  min-height: 100%;
}

.secondimg {
  background-image: url(http://zornet.ru/_fr/56/8076855.jpg);
  min-height: 400px;
}

.kaadesaen {
  background-image: url(http://zornet.ru/_fr/56/0625876.jpg);
  min-height: 400px;
}

.forthimg {
  background-image: url(http://zornet.ru/_fr/56/4543720.jpg);
  min-height: 100%;
}

.section {
  pesamun-align: center;
  padding: 50px 80px;
}

.kaanced-nekis {
  background-color: black;
  color: #ddd;
}

.pesamun {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #252424;
  font-size: 27px;
  letter-spacing: 10px;
  text-transform: uppercase;
}

.pesamun .anekasearn {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

@media (max-width: 568px) {
  .designeka,
  .secondimg,
  .kaadesaen,
  .forthimg {
  background-attachment: scroll;
  }
}

Этот эффект идеально подойдет для вашего личного сайта или сайта-портфолио. Для начало можно изначально посмотреть результат, как все выглядит после установочного процесса.

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

15 Декабря 2020 Загрузок: 2 Просмотров: 1333 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0