ZorNet.Ru — сайт для вебмастера » HTML и CSS » Индикатор прокрутки страницы на CSS3

Индикатор прокрутки страницы на CSS3

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

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

Изначально в коде представлена полноценная страница, это для того, чтоб создать новую страницу, где уже по умолчанию присутствует вид просмотра прокрутки.

Как создать индикатор прокрутки страницы на CSS

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

HTML

Код

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Красивый индикатор для прокрутки</title>

</head>
<body>

  <header>
  <h1>Красивый индикатор для прокрутки</h1>
  </header>

  <main>
  <h2>ZorNet - портал для вебмастера</h2>

  <p>
Здесь описание
</p>
<p>
Второе описание
</p>

  </main>

</body>
</html>

CSS

Код

html,body{margin:0;}
header{
  position: fixed;
  top:0;
  height: 86px;
  width: 100%;
  background: #fbf7f7;
}

main{
  margin-top: 88px;
}

@supports (height: 100vh) {
  body{
  background: linear-gradient(to right top, #2386d2 50%, #cec8c8 50%);
  background-size: 100% calc(100% - 100vh + 109px);
  background-repeat: no-repeat;
  }

  body:before{
  content:'';
  position: fixed;
  top: 88px;
  bottom: 0;
  width: 100%;
  z-index: -1;
  background: #f3f0f0;
  }
}

Сама функция также отвечает за содержимое, если быстро двигается индикатор, то на страницы не там много размещено материала или содержимого страницы на самом ресурсе и то что вы уже просмотрели.

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

02 Февраля 2019 Загрузок: 1 Просмотров: 1369 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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