Membuat Scrolling Progress Bar dengan jQuery

Membuat Scrolling Progress Bar dengan jQuery

DailyBlog.id - Pernah kah kalian saat mengunjungi suatu website lalu melihat progress bar di bagian atas tampilan saat melakukan scroll, lalu progress bar tersebut 100% jika scroll hingga sampai akhir tampilan. Nah progress bar tersebut bisa kalian buat dengan cara menggunakan JavaScript dan CSS, namun disini saya akan memberikan tutorialnya menggunakan jQuery. Jika kalian belum mengetahui jQuery, maka saya akan menjelaskan secara singkat mengenai jQuery. jQuery adalah library JavaScript yang cukup andal, ringkas, dan mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di HTML seperti perubahan dan manipulasi dokumen, event handling, animasi, dan Ajax dapat menjadi lebih sederhana. (Niagahoster). Bisa dibilang juga jQuery akan membantu kalian dalam pembuatan website yang menggunakan JavaScript di bagian frontendnya. Oke langsung saja ke tutorialnya.

Membuat Scrolling Progress Bar dengan jQuery

1. Langkah pertama tentu kalian membuat file baru, contoh nama yaitu scrolling_pb.html

2. Setelah itu tidak lupa untuk membuat htmlnya terlebih dahulu

<!DOCTYPE html>
<html>
    <head>
        <title>Coba Scrolling Progress Bar</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
    </head>
    <body>

    </body>
</html>


3. Lalu untuk mengisi dari htmlnya, kalian bisa menggunakan isi contoh berikut ini:

<div class="progress"></div>
<div class="content">Coba scroll kebawah</div>
<div class="content">Halo scroll lagi.</div>
<div class="content">Dan akhirnya sudah sampai akhir!</div>


Dan untuk script yang di atas ini juga membuat progress barnya. Lalu paste di antara <body></body> 

4. Jika sudah, maka saatnya menggunakan jQuerynya dengan cara kalian pasang script yang ada di bawah ini:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


5. Agar bisa mendeteksi halaman website sedang di scroll, kalian bisa copy script yang ada di bawah ini:

<script>
    $(document).on("scroll", function()
    {
        console.log("sedang discroll");
    });
</script>


6. Nah untuk memainkan progress barnya saat halaman discroll, maka kalian bisa copy script yang ada di bawah ini, dan masukan ke dalam script yang ada di langkah ke 5

const pixels = $(document).scrollTop();
const pageHeight = $(document).height() - $(window).height();
const progress = 100 * pixels / pageHeight;
$(".progress").css("width", progress + "%");


7. Dan yang terakhir yaitu membuat desain dari progress barnya dan desain konten. Kalian bisa copy script yang ada di bawah ini, dan kalian boleh juga untuk mengganti warna atau tinggi dari  progress barnya.

<style>
    body {
        margin: 0;
    }
    .progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 5px;
        min-width: 1%;
        transition: all linear 0.1s;
        background-color: #3381ff;
    }
    .content {
        width: 100%;
        height: 100vh;
        margin-bottom: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
</style>



Untuk script lengkapnya kalian bisa copy script yang ada di bawah ini

<!DOCTYPE html>
<html>
    <head>
        <title>Coba Scrolling Progress Bar</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <style>
            body {
                margin: 0;
            }
            .progress {
                position: fixed;
                top: 0;
                left: 0;
                height: 5px;
                min-width: 1%;
                transition: all linear 0.1s;
                background-color: #3381ff;
            }
            .content {
                width: 100%;
                height: 100vh;
                margin-bottom: 5px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="progress"></div>
        <div class="content">Coba scroll kebawah</div>
        <div class="content">Halo scroll lagi.</div>
        <div class="content">Dan akhirnya sudah sampai akhir!</div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).on("scroll", function()
            {
                const pixels = $(document).scrollTop();
                const pageHeight = $(document).height() - $(window).height();
                const progress = 100 * pixels / pageHeight;
                $(".progress").css("width", progress + "%");
            });
        </script>
    </body>
</html>


Dan selesai. Kalian bisa coba untuk scroll halaman kalian dan coba lihat pada bagian atas tampilan, yang akan tampil progress bar mengikuti scrolling dari tampilan halaman tersebut.

Itu dia caranya untuk membuat Scrolling Progress bar dengan jQuery, sangat mudah kan? hanya dengan mendeteksi scroll dari user dan menentukan scrollTop, tinggi document dan windownya, kalian bisa buat animasi untuk progress bar saat scrolling.

Mungkin sampai disini saja artikel tutorial dari saya, semoga artikel yang saya berikan ini dapat bermanfaat bagi kalian semuanya. Jika saya ada salah kata, saya mohon maaf. Sekian dan terima kasih...

Selamat mencoba!...

Post a Comment (0)
Previous Post Next Post