Tutorial Pemrograman

Cara Membuat Efek Scroll Black & White dengan CSS

Dengan bantuan bahasa pemrograman CSS, kita dapat menampilkan bermacam-macam efek serta animasi yang unik dan keren. Pada kesempatan kali ini, kita akan mencoba membuat efek Black & White ketika kita melakukan scrolling di website. Bagaimana cara membuatnya? Yuk buka komputer kamu, dan langsung saja kita mulai membuat efek Black & White di scroll website dengan HTML dan CSS:

1. Buka XAMPP Control Panel, serta aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.

Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “BlackWhite”) → saya simpan dengan nama file “index.php”.

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/BlackWhite.

4. Terlihat jelas pada gambar di atas hanya terdapat teks, karena hanya kode HTML saja yang baru dimasukkan. Untuk menambahkan efek scroll Black & White, kita perlu menambahkan kode CSS. Nah sekarang buka kembali lembar kerja baru di Notepad++ dan ketikkan kode CSS berikut:

Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “BlackWhite”) → saya simpan dengan nama file “style.css”.

5. Reload http://localhost/BlackWhite. Menarik bukan.

Tampilan awal website.

Ketika teks memasuki zona black, maka teks berubah menjadi white.

Catatan:

1. Mungkin ada yang masih bingung kenapa harus disimpan di htdocs? Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya  khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.

2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/BlackWhite. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. BlackWhite menunjuk pada folder BlackWhite saya di xampplite → htdocs. Dan, index.php adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial tentang ‘Cara Membuat Efek Scroll Black & White dengan HTML dan CSS’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









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