Як зробити індикатор прокрутки на css3.

Відео: Найпростіший спосіб зробити анімацію елементів на сторінці при Скролл

Всім привіт! У цій статті ми розглянемо, як зробити індикатор прокрутки на чистому CSS3.

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

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

HTML

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

Відео: Гарний індикатор прокрутки або ж Progress Bar

 
lang="En"gt; 
 
charset="Utf-8"gt; 
індикатор прокручування 
 
 
 
 
 
 
 Заголовок 
 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.

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

Відео: Як зробити соціальну панель (фіксований блок) з HTML і CSS3

CSS

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

Відео: Анімована прокрутка сторінки на jQuery

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 з Нулі до Гуру, після перегляду якого питань у вас просто не залишиться!

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі