ZorNet.Ru — сайт для вебмастера » HTML и CSS » Движения фонового изображения на CSS

Движения фонового изображения на CSS

Создаем двигающий фон, который будет идти с левой на право, что можно разделить на разделы, где будет как афиша материала, что находится на сайте. Стили CSS часто более мощный, чем люди дают ему кредит. Ряд общих задач, которые обычно основаны на JavaScript-библиотеках, часто могут быть внедрены в CSS без особых усилий.

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

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

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

HTML

Код

CSS

Код

.zornet_ru_dsam {
  overflow: hidden;
}

.krugosvetka-background {
  background: url("http://zornet.ru/Aben/ABGDA/sliding-background-wwf.jpg") repeat-x;
  height: 559px;
  width: 5063px;
  animation: slide 60s linear infinite;
}

@keyframes slide{
  0%{
  transform: translate3d(0, 0, 0);
  }
  100%{
  transform: translate3d(-1692px, 0, 0);
  }
}

Разница здесь заключается не столько в том, насколько быстро вы прокручиваете страницу, сколько в том, насколько велика установка изображения. Скорее вы видите, как быстро изображение перемещается по фону страницы во время прокрутки. Это очень тонкий эффект параллакса, но этот макет - отличный шаблон для просмотра различных скоростей анимации в действии.

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

10 Февраля 2018 Просмотров: 4802 Комментариев: (0)

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

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

Kosten

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