Deskripsi
Lanjutan dari tutorial sebelumnya, kali ini saya akan membahas cara menginstall PHP 8 dan mysql (atau mariadb) dan phpmyadmin. Pastikan telah membaca tutorial sebelumnya disini
Install PHP 8 dan Apache 2
Secara default (selama saya menulis tutorial ini), PHP 8 belum tersedia di ubuntu kali ini. Jadi harus tambahkan repo apt baru ke linux. Masukan repo ondrej/php dengan perintah:
sudo add-apt-repository ppa:ondrej/phpsudo apt updateLagu kita akan menginstall PHP 8 (dan unziper, karena nanti kita akan...
Karya ini GRATIS! Tapi kamu boleh kok kasih tip biar kreator hepi 🥰
Selanjutnya
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