Berkas Khusus Pendukung
dark-mode-template.zip
sorce-code-dark-mode.zip
Di tutorial kali ini, kita akan bahas bagaimana cara membuat website jadi dark mode dalam 2 metode. Dua metode tersebut yaitu toggle (localStorage pada JS) dan argoritma browser (prefers-color-scheme pada CSS)
Tapi sebelum itu... bahas var() dulu
Var() di css lebih mirip valiable di beberapa pemograman (padahal css bukan termasuk memograman). Caranya bisa cek video dibawah:
Jika gak paham bahasa inggris, coba cek video ini:
Bahan pembelajaran
Untuk bahannya, anda bisa download dark-mode-template.zip...
Karya ini GRATIS! Tapi kamu boleh kok kasih tip biar kreator hepi 🥰
Sebelumnya
Cara buat transisi navbar saat di scroll tanpa jquery (with Bootstrap 5)
1
1
Jadi pada tutorial kali ini saya akan membahas cara buat animasi transisi navbar saat di scroll dengan vanila javascript dan nanti hasilnya kaya gini:Video diatas adalah yang aling sederhana. Tapi kalau mau yang lebih kompleks, bisa cek di sini (source codenya di sini). Tapi untuk tutorial kali ini saya akan bikin kaya video diatas jadi langsung saja!Template HTMLBuat index.html, lalu pastekan tamplate dari Bootstrap 5 dibawah ini:<!DOCTYPE html>
<html lang=en>
<head>
<!-- Required meta tags -->
<meta charset=utf-8 />
<meta name=viewport content=width=device-width, initial-scale=1 />
<!-- Bootstrap CSS -->
<link
href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
rel=stylesheet
integrity=sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6
crossorigin=anonymous
/>
<!-- JS bootstrap -->
<script
src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
integrity=sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf
crossorigin=anonymous
defer
></script>
<!-- JS kita -->
<script src=script.js defer></script>
<title>Hello, world!</title>
</head>
<body>
<!-- Tempat naro navbar disini -->
<!-- tempat naruh konten disini -->
</body>
</html>
Tips: Jika mau menaruh script di head, tambahkan defer supaya script javascript dieksekusi setelah terload, tanpa harus menggunakan jquery.Lalu tambahkan navbar dibawah <body> tag (navbar ini dapat melayang)<nav
class=navbar navbar-expand-lg navbar-light bg-transparent fixed-top
id=navbar
>
<div class=container-fluid id=navCont>
<a class=navbar-brand href=#>Navbar</a>
<button
class=navbar-toggler
type=button
data-bs-toggle=collapse
data-bs-target=#navbarNavAltMarkup
aria-controls=navbarNavAltMarkup
aria-expanded=false
aria-label=Toggle navigation
>
<span class=navbar-toggler-icon></span>
</button>
<div class=collapse navbar-collapse id=navbarNavAltMarkup>
<div class=navbar-nav>
<a class=nav-link active aria-current=page href=#>Home</a>
<a class=nav-link href=#>Features</a>
<a class=nav-link href=#>Pricing</a>
<a
class=nav-link disabled
href=#
tabindex=-1
aria-disabled=true
>
Disabled
</a>
</div>
</div>
</div>
</nav>Lalu tambahkan konen dibawah <section class=container style=margin-top: 4.5rem>
<!-- Isi konten disini -->
</section>Untuk isinya bisa dari blog. Atau untuk contoh, saya pakai Lorem biar lebih cepat. untuk membuat lorem, anda cukup memasukan snipet lorem<jumlah paragraf lorem tersebut> di VScode, atau kuntungi https://loremipsum.io/ untuk genereate lorem pada code editor lain.Script pada JavascriptBuat file script.js berdampingan dengan index.html, lalu panggil navbar dan container dalam navbar tersebut!// panggil navbar
const navBar = document.getElementById(navbar);
const navCont = document.getElementById(navCont);Tips: gunakan getElementById supaya lebih mudah mengambil konten, dan memberikan banyak suport pada browser.Lalu buat function scroll seperti dibawah:function scroll() {
let calc = window.scrollY; // mendapatkan posisi scroll dari atas ke bawah
if (calc > 0) { // jika posisi scroll lebih dari 0 pixel
navBar.classList.replace(bg-transparent, bg-dark); // ganti background navbar
navBar.classList.replace(navbar-light, navbar-dark); // ganti tampilan navbar
navCont.classList.replace(container-fluid, container); // ubah margin pada navbar
} else if (calc <= 0) { // jika posisi scroll sama dengan 0 pixel
navBar.classList.replace(bg-dark, bg-transparent);
navBar.classList.replace(navbar-dark, navbar-light);
navCont.classList.replace(container, container-fluid);
}
}Dan tinggal dipangil. Ada 2 bagian, yaitu saat di inisialisasi, dan saat website di scroll//panggil saat inisialisasi
scroll();
// panggil saat discroll
window.onscroll = () => { // jika tidak work untuk arrow function, coba pakai function biasa
scroll();
};Tambahan: animasi transisiTerakhir, tambahkan transisi jika di scroll. Cukup tambahkan ccs (bisa pakai tag <style> atau pakai link ke css). Codenya seperti ini: .navbar {
transition: all 500ms ease-in-out;
}
.navbar > div {
transition: all 1000ms ease-in-out;
}Hasilnya akan seperti video diatas. Anda dapat modifikasi lebih kompleks jika ingin lebih bagus, atau bisa lihat website saya dengan code yang sedikit lebih kompleks. Sekian dulu, ヨーソロー!!!
Apakah konten ini melanggar ketentuan yang berlaku sesuai
syarat dan persetujuan?
Laporkan