Front-end воїн - Scroll Progress

19 хв. читання

Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб- сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона забезпечує контекстуальне розуміння кількості інформації даної сторінки. Коли користувач виконує прокрутку, прогрес-бар демонструє поточну позицію в різних форматах.

В цьому уроці розглянемо два варіанти. Давайте почнемо!

Налаштування документа

По-перше, ми створимо макет документа, який буде виступати в якості нашої сторінки. Ми будемо використовувати normalize.css і JQuery. Ваш HTML файл повинен виглядати наступним чином:

            <title>Progress Indicator Animation</title>
            <link href="css/normalize.css" rel="stylesheet">
            <link href="css/style.css" rel="stylesheet">
 
            <script src="js/jquery.min.js"></script>
            <script src="js/script.js"></script>

Далі, ми додамо наш улюблений Lorem ipsum:

    <main>
        <article>
            <header>
                <h1>
                    <div class="container">
                        Як ми можемо показати прогрес під час прокручування посту?
                    </div>
                </h1>
            </header>
            <div class="article-content">
                    <h2 class="lead-in">
                        <div class="container">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        </div>
                    </h2>
                <div class="container">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                    
                </div>
            </div>
        </article>
        <footer>
            <h3 class="read-next"><small>Read Next:</small><br>Як реалізувати Foobar?</h3>
        </footer>
    </main>

Основна стилізація

Почаклуємо в CSS, щоб зробити наш пост трохи більш привабливим.

    @import url(http://fonts.googleapis.com/css?family=Domine:400,700);
    body {
        font-size: 16px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Domine", sans-serif;
    }
     
    h1 {
        font-size: 3.5em;
    }
     
    .lead-in {
        color: #fff;
        font-weight: 400;
        padding: 60px 0;
        background-color: #0082FF;
    }
     
    article header {
        border-top: 3px solid #777;
        padding: 80px 0;
    }
     
    .article-content {
        font-size: 1em;
        font-weight: 100;
        line-height: 2.4em;
    }
     
    p {
        margin: 4em 0;
    }
     
    .container {
        width: 700px;
        margin: 0 auto;
    }
     
     
    footer {
        text-align: center;
        background-color: #666;
        color: #fff;
        padding: 40px 0;
        margin-top: 60px;
    }
     
    .read-next {
        font-size: 2em;
    }

Розраховуємо позицію скрола

Для розрахунку, ми повинні зрозуміти концептуально, що ми відстежуємо. Так як JavaScript може відслідковувати тільки верхнє значення прокрутки, нам потрібно буде відслідковувати нашу прокрутку від 0 до остаточного значення прокрутки. Це остаточне значення прокрутки буде дорівнює загальній висоті документа мінус висота самого вікна (так як документ буде переміщатися до тих пір,поки нижня частина документа не досягне нижньої частини вікна).

Front-end воїн - Scroll Progress

Ми будемо використовувати наступний JavaScript код щоб розрахувати наше положення.

    (function(){
        var $w = $(window);
        var wh = $w.height();
        var h = $('body').height();
        var sHeight = h - wh;
        $w.on('scroll', function(){
            var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
        });
     
    }());

Наведений вище код встановлює висоту вікна і висоту тіла, і коли користувач прокручує, він використовує ці значення для установки змінної perc. Ми також використовуємо Math.min і Math.max, обмежуючи значення в діапазоні 0-100.

Круговий індикатор

Першим варіантом буде SVG коло. Ми будемо використовувати SVG stroke- dasharray і stroke-dashoffset властивості, щоб показати прогрес. Для початку давайте додамо індикатор прогресу в наш документ.

    <div class="progress-indicator">
        <svg>
            <g>
                <circle class="animated-circle" cx="0" cy="0" r="20" transform="translate(50,50) rotate(-90)"></circle>
            </g>
            <g>
                <circle cx="0" cy="0" r="38" transform="translate(50,50)"></circle>
            </g>
        </svg>
        <div class="progress-count"></div>
    </div>

Нам потрібно додати стиль до цих елементів, і тоді ми будемо пояснювати, як ці кола розташовані і анімовані.

    .progress-indicator {
        position: fixed;
        top: 30px;
        right: 30px;
        width: 100px;
        height: 100px;
    }
    .progress-count {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 100px;
        color: #0082FF;
    }
     
    svg {
        position: absolute;
    }
    circle {
        fill: rgba(255,255,255,0.9);
    }
     
    svg .animated-circle {
        fill: transparent;
        stroke-width: 40px;
        stroke: #0A74DA;
        stroke-dasharray: 126;
        stroke-dashoffset: 126;
    }

Наш прогрес завжди має бути видно, тому ми встановлюємо позицію фіксованою (fixed) в**.progress-indicator**.

Почнемо з центру в наших колах. Ми використовуємо техніку, що дозволяє нам застосувати обертання від центра наших кіл, щоб почати анімацію у верхній частині кола (а не з правого боку кола). В SVG, перетворення застосовуються з верхнього лівого елемента. Ось чому ми повинні центрувати в 0, 0 , і рухатися до центру самої SVG, використовуючи translate(50, 50) .

Використання stroke-dasharray і stroke-dashoffset

Властивості stroke-dasharray і stroke-dashoffset дозволяють оживити хід в SVG.

Оновлення stroke-dasharray на Scroll

Далі, ми додамо функцію для поновлення stroke-dasharray на скрол.

    (function(){
        var $w = $(window);
        var $circ = $('.animated-circle');
        var $progCount = $('.progress-count');
        var wh = $w.height();
        var h = $('body').height();
        var sHeight = h - wh;
        $w.on('scroll', function(){
            var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
            updateProgress(perc);
        });
     
        function updateProgress(perc){
            var circle_offset = 126 * perc;
            $circ.css({
                "stroke-dashoffset" : 126 - circle_offset
            });
            $progCount.html(Math.round(perc * 100) + "%");
        }
     
    }());

Горизонтальний індикатор

Тепер ми зробимо простий горизонтальний індикатор, прикріплений до верхньої частини вікна.

    <div class="progress-indicator-2"></div>

Примітка: ми додали "-2", щоб дозволити нам включити цей приклад в той же файл CSS.

Далі, ми додамо наш стиль для цього елемента.

    .progress-indicator-2 {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background-color: #0A74DA;
    }

Встановимо ширину індикатора.

    var $prog2 = $('.progress-indicator-2');
    function updateProgress(perc){
        $prog2.css({width : perc*100 + '%'});
    }

Кінцевий вигляд нашого JavaScript коду:

    (function(){
        var $w = $(window);
        var $circ = $('.animated-circle');
        var $progCount = $('.progress-count');
        var $prog2 = $('.progress-indicator-2');
        var wh = $w.height();
        var h = $('body').height();
        var sHeight = h - wh;
        $w.on('scroll', function(){
            var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
            updateProgress(perc);
        });
     
        function updateProgress(perc){
            var circle_offset = 126 * perc;
            $circ.css({
                "stroke-dashoffset" : 126 - circle_offset
            });
            $progCount.html(Math.round(perc * 100) + "%");
     
            $prog2.css({width : perc*100 + '%'});
        }
     
    }());

Інші ідеї для індикаторів

Ця стаття призначена, щоб дати вам інструменти і натхнення, для створення свого власного індикатора скролу. Деякі реалізації (наприклад, в ia.net ) використовувують оцінку часу читання статті.

Front-end воїн - Scroll Progress

Це може бути зроблено за допомогою коду, подібний наступному:

    var wordsPerMin = 300; // на основі цієї статті: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/
    var wordsArray = $(".article-content").text().split(" ");
    var wordCount = wordsArray.length;
    var minCount = Math.round(wordCount / wordsPerMin);

Потім використовуємо minCount в поєднанні з perc, щоб показати читачеві їх час, що залишився, щоб прочитати статтю. Ось дуже простий варіант реалізації цієї концепції.

    function updateProgress(perc){
        var minutesCompleted = Math.round(perc * minCount);
        var remaining = minCount - minutesCompleted;
        if (remaining){
            $(".progress-indicator").show().html(remaining + " minutes remaining");
        } else {
            $(".progress-indicator").hide();
        }
    }

Заключна частина: Адаптивність до зніми розміру екрана

Для того, щоб наш індикатор прогресу працював як треба, ми повинні переконатися, що наші математичні розрахунки правильні в потрібний для нас час. Для того щоб це відбулося, нам потрібно переконатися, що ми знову розраховуємо висоту і поновлюємо індикатор, коли користувач змінює розмір вікна. Ось адаптація JavaScript, щоб це сталося:

    (function(){
        var $w = $(window);
        var $circ = $('.animated-circle');
        var $progCount = $('.progress-count');
        var $prog2 = $('.progress-indicator-2');
     
        var wh, h, sHeight;
     
        function setSizes(){
            wh = $w.height();
            h = $('body').height();
            sHeight = h - wh;
        }
     
        setSizes();
     
        $w.on('scroll', function(){
            var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
            updateProgress(perc);
        }).on('resize', function(){
            setSizes();
            $w.trigger('scroll');
        });
     
        function updateProgress(perc){
            var circle_offset = 126 * perc;
            $circ.css({
                "stroke-dashoffset" : 126 - circle_offset
            });
            $progCount.html(Math.round(perc * 100) + "%");
     
            $prog2.css({width : perc*100 + '%'});
        }
     
    }());

На цьому все. Успіхів вам!

Демо

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація