ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальная прокрутка на чистом CSS3

Горизонтальная прокрутка на чистом CSS3

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

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

Также все проверено на тестовой площадке, где выглядит таком образом.

Приступаем к установке:

HTML

Код

CSS

Код

.kecustome-supdon-magena img:nth-of-type(1){
  position:absolute;
  width:18vw;

  position: relative;
  top: 49%;
  -webkit-transform: translateY(-45%);
  -moz-transform: translateY(-45%);
  -o-transform: translateY(-45%);
  transform: translateY(-45%);
}

.kecustome-supdon-magena {
width: 100vw;
height: 100vh;
  text-align:center;
background: url(http://zornet.ru/ABVUN/Anisa/1.jpg) repeat;
-webkit-animation: backgroundScroll 9999999s linear infinite;
animation: backgroundScroll 9999999s linear infinite;
  position:fixed;
}

@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -99999999px 0;}
}

@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -99999999px 0;}
}

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

07 Ноября 2018 Просмотров: 1224 Комментариев: (0)

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

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

Kosten

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