Cum se creează un indicator (bandă) de derulare a paginii pe css3

Principiile barei de derulare:
Când derulați (defilați), indicatorul se va deplasa spre dreapta.
Dacă tot materialul urcă de la vizitator la ecran, atunci indicatorul nu este afișat.







Codul este format din două părți: html și css. Documentul în sine va conține următoarele:


Indicatorul în sine sau bara de derulare se află în antet, există și titlul paginii. Următorul este principalul conținut în sine (în acest caz, text lung). În ea avem mai multe paragrafe. Desigur, deoarece conținutul poate acționa ca imagini (galerie) și altele.







Desigur, cantitatea de text Lorem Ipsum (textul șablonului), eu în acest fragment a redus semnificativ. În demonstrație, va fi mult mai mare, astfel încât cei care au o bară de derulare cu rezoluție mare să fie afișați. În consecință, dacă textul se potrivește tuturor, atunci bara de derulare nu este afișată.


Ca în majoritatea exemplelor, eliminați imediat indicele extra din tag-urile html și body, apoi fixăm antetul. Pentru antetul (unde antetul) stabilește înălțimea și lățimea, precum și culoarea de fundal. În eticheta principală, facem o indentare de sus, astfel încât conținutul paginii să nu meargă sub bloc atunci când pagina este în partea de sus.

Și deja, cu ajutorul CSS3, vom calcula procentajul procentual al paginii care a fost derulat și a tras un gradient sub forma unei benzi.

Și bineînțeles demonstrația și sursa barei de derulare:

Vă mulțumesc pentru atenție!







Articole similare

Trimiteți-le prietenilor: