Как сделать индикатор прокрутки на CSS3.
Всем привет! В этой статье мы рассмотрим, как сделать индикатор прокрутки на чистом CSS3.
Думаю, вы могли видеть индикатор загрузки страницы в YouTube. Он находится сверху и представляет из себя просто бегущую красную линию.
Сегодня мы сделаем такой же индикатор, который будет показывать, сколько содержимого страницы вы просмотрели. По мере прокрутки он будет так же двигаться вправо, но будет синенький и на чистом CSS3. Естественно, если вам будет нужно, вы сможете сами поменять его настройки.
HTML
Для начала напишем HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Индикатор прокрутки</title>
</head>
<body>
<header>
<h1>Индикатор прокрутки</h1>
</header>
<main>
<h2>Заголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia perspiciatis quis, laudantium, quod quibusdam, maxime error expedita
quidem consequatur autem laboriosam saepe earum illum atque reprehenderit! Reiciendis, ipsa aperiam, quod rem culpa tempora, dolorum quaerat cumque eaque dolores dolore nisi sit sapiente quidem ipsam esse numquam assumenda, aut laudantium fugiat aliquam dignissimos. Perferendis, eveniet, adipisci. Earum, soluta ducimus doloremque sed non blanditiis minima corrupti libero quo, facilis temporibus. Mollitia magni iure eveniet harum perspiciatis, inventore facere aliquam cumque fugit natus repudiandae error unde aliquid fugiat distinctio obcaecati cupiditate beatae excepturi ipsa quaerat illum voluptas. Adipisci ullam aliquid tempora ea error.</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 мы высчитываем, насколько процентов была прокручена страница, и рисуем градиент в виде полосочки.
И это все! Если вы не очень хорошо знаете CSS3 и вам не понятно, как работает код нового стандарта, то рекомендую приобрести видеокурс HTML5 и CSS3 с Нуля до Гуру, после просмотра которого вопросов у вас просто не останется!
А у меня на этом все. Спасибо за внимание!
-
Создано 05.08.2016 19:00:01
-
Михаил Русаков
Комментарии (1):
прикольно,спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.