Tutorial Pemrograman

Cara Menampilkan Sticky Scrollbar dengan CSS3

Dengan memanfaatkan bahasa pemrograman CSS3, kita dapat dengan mudah membuat tampilan sticky scrollbar. Sticky scrollbar akan memiliki tampilan 4 buah gambar yang saling menumpuk ketika kita scroll ke bawah. Penasaran bagaimana tampilannya? Yuk langsung saja buka komputer kamu, dan kita akan membuat sticky scrollbar dengan CSS3.

1. Siapkan 4 buah gambar, serta letakkan gambar pada folder yang sama dengan file index.php dan style.css.

2. Buka program XAMPP yang ter-install di komputer kamu, dan aktifkan menu Apache. Apache di XAMPP berfungsi untuk menghubungkan antara kode yang diketik di teks editor dan browser.

3. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

Simpan kode HTLM5 di atas di folder xampplite → htdocs → buat folder baru dengan nama stickyScrollbar → simpan kode di atas dengan nama index.php.

4. Untuk melihat hasil, buka browser di komputer kamu dan ketikkan alamat url: http://localhost/stickyScrollbar, dan lihat hasilnya.

5. Gambar di atas tidak menunjukan tampilan apa-apa. Untuk membuat sticky scrollbar, ketikkan kode CSS3 berikut.

Simpan kode CSS3 di folder xampplite → htdocs → buat folder baru dengan nama stickyScrollbar → simpan code CSS3 dengan nama style.css.

6. Reload alamat url: http://localhost/stickyScrollbar, dan lihat hasilnya. Tampilan awal website tampak gambar pertama (merah).

Ketika kamu scroll gambar kedua (hijau) muncul dengan menutupi gambar pertama (merah).

Ketika kamu scroll gambar ketiga (biru) muncul dengan menutupi gambar kedua (hijau).

Ketika kamu scroll gambar keempat (hitam) muncul dengan menutupi gambar ketiga (biru).

7. Selesai.

Mudah sekali bukan.sekian tutorial ‘Cara Menampilkan Sticky Scrollbar dengan CSS3’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2019 Inwepo - All Rights Reserved.

To Top