Індикатор прокрутки на CSS3.

Індикатор прокрутки на CSS3.

Думаю, ви могли бачити індикатор завантаження сторінки в YouTube. Він знаходиться зверху і вдає із себе просто біжить червону лінію.

Сьогодні ми зробимо такий же індикатор, який буде показувати, скільки вмісту сторінки ви переглянули. У міру прокручування він буде так само рухатися вправо, але буде синенький і на чистому CSS3. Природно, якщо вам буде потрібно, ви зможете самі поміняти його налаштування.

Для початку напишемо HTML:

<!Doctype html>
<html lang = “en”>
<head>
<meta charset = “utf-8”>
<title> Індикатор прокручування </ title>
</head>
<body>
<header>
<h1> Індикатор прокручування </ h1>
</header>
<main>
<h2> Заголовок </ h2>
<p> Якщо люди довго сперечаються, то це доводить, що те, про що вони сперечаються, неясно для них самих.
Вольтер </ p>
</ main>
</ body>
</ html>

Тут все просто: є сам індикатор, який знаходиться в header, там же знаходиться заголовок сторінки. Далі йде тег main з основним вмістом сторінки. У ньому у нас знаходиться заголовок і параграф тексту. Звичайно, вміст може бути іншим. Щоб не захаращувати код, я не став писати ще багато тексту, тому просто продублюйте весь вміст сторінки (що знаходиться в тезі main) близько 7 разів для спостереження роботи індикатора прокрутки.
CSS

Тепер перейдемо до CSS коду:

 

html, body {margin: 0;}
header {
position: fixed;
top: 0;
height: 125px;
width: 100%;
background: white;
}

main {
margin-top: 128px;
}

@supports (height: 100vh) {
body {
background: linear-gradient (to right top, # 0089f2 50%, #DDD 50%);
background-size: 100% calc (100% – 100vh + 129px);
background-repeat: no-repeat;
}

body: before {
content: ”;
position: fixed;
top: 128px;
bottom: 0;
width: 100%;
z-index: -1;
background: white;
}
}

Тут теж немає нічого складного. Спочатку ми прибираємо зовнішні відступи у тегів html і body, далі фіксуємо header, щоб він не прокручувався, притискаємо його до верху сторінки, задаємо висоту і ширину, а також колір заднього фону. У тега main ми робимо відступ зверху, щоб вміст сторінки не йшло під блок, коли сторінка знаходиться вгорі. Тепер за допомогою CSS3 ми вираховуємо, наскільки відсотків була прокручена сторінка, і малюємо градієнт у вигляді смужки.

1 Star2 Stars3 Stars4 Stars5 Stars (3 Votes, average: 5.00 out of 5)

Залишити коментар