Header Slider adalah salah satu teknik desain website yang ditujukan untuk memberikan efek eksentrik dan ganda pada identitas website yang menerapkannya. Tampilan slider header terlihat simpel dengan kontras dua warna yang selaras satu sama lain. Baik pemilihan warna maupun font pada header merupakan bentuk kreatifitas dari sang desainer itu sendiri
Ada banyak cara untuk menerapkan gaya dari header slider, mulai dari alat yang dikhususkan untuk membuat desain dinamis (seperti GSAP, Materialize, dan SCSS) hingga boilerplate yang dikhususkan untuk membuat tata letak situs web (seperti UIKit dan Bootstrap). Aplikasi yang sama juga dapat dilakukan melalui bahasa pemrograman web bawaan, yaitu CSS dan Javascript
Pada artikel kali ini, penulis akan membuat efek slider header hanya dengan menggunakan base CSS dan Javascript sebagai media desain website
Cara Membuat Efek Header Slider Dengan Javascript
1. Siapkan text editor (baik notepad, sublime text, atau aplikasi sejenis) sebagai media pengetikan syntax nantinya
2. Buat file bernama index. html yang berisi kode berikut
<html> <head> <title>Inwepo Header Slider</title> <style> </style> </head> <body> <script> </script> </body> </html>3. Pada bagian , masukkan bagian kode berikut:
Di mana nantinya, bagian akan memilki struktur kode sebagai berikut:
<style> :root { --merah: rgb(234, 76, 70); --biru: rgb(120, 0, 255); --putih: rgb(240, 240, 240); --hitam: rgb(40, 40, 40); } body { background-color: var(--putih); margin: 0px; } .side { display: grid; height: 100vh; overflow: hidden; place-items: center; position: absolute; width: 100%; } .side .title { font-family: "Segoe UI", sans-serif; font-size: 8vw; margin: 0px 10vw; width: 80vw; } .side .fancy { font-family: "Consolas", cursive; font-size: 1.3em; line-height: 0.8em; } #bagian-kiri { background-color: var(--biru); width: 60%; z-index: 2; } #bagian-kiri .title { color: var(--hitam); } #bagian-kiri .fancy { color: var(--merah); } #bagian-kanan { background-color: var(--merah); } #bagian-kanan .title { color: var(--putih); } #bagian-kanan .fancy { color: var(--hitam); } </style>4. Pada bagian , masukkan bagian kode berikut:
const left = document.getElementById("bagian-kiri"); const handleMove = e => { left.style.width = `${e.clientX / window.innerWidth * 100}%`; } document.onmousemove = e => handleMove(e); document.ontouchmove = e => handleMove(e.touches[0]);Di mana nantinya, bagian akan memilki struktur kode sebagai berikut:
5. Pada bagian , masukkan bagian kode berikut:
<div id="bagian-kiri" class="side"> <h2 class="title"> Beginilah Bentuk Dari <span class="fancy">Header Slider</span> </h2> </div> <div id="bagian-kanan" class="side"> <h2 class="title"> Beginilah Bentuk Dari <span class="fancy">Header Slider</span> </h2> </div>Jika ya, maka seluruh indeks file ditampilkan. html akan terlihat seperti berikut
<html> <head> <title>Inwepo Header Slider</title> <style> :root { --merah: rgb(234, 76, 70); --biru: rgb(120, 0, 255); --putih: rgb(240, 240, 240); --hitam: rgb(40, 40, 40); } body { background-color: var(--putih); margin: 0px; } .side { display: grid; height: 100vh; overflow: hidden; place-items: center; position: absolute; width: 100%; } .side .title { font-family: "Segoe UI", sans-serif; font-size: 8vw; margin: 0px 10vw; width: 80vw; } .side .fancy { font-family: "Consolas", cursive; font-size: 1.3em; line-height: 0.8em; } #bagian-kiri { background-color: var(--biru); width: 60%; z-index: 2; } #bagian-kiri .title { color: var(--hitam); } #bagian-kiri .fancy { color: var(--merah); } #bagian-kanan { background-color: var(--merah); } #bagian-kanan .title { color: var(--putih); } #bagian-kanan .fancy { color: var(--hitam); } </style> </head> <body> <div id="bagian-kiri" class="side"> <h2 class="title"> Beginilah Bentuk Dari <span class="fancy">Header Slider</span> </h2> </div> <div id="bagian-kanan" class="side"> <h2 class="title"> Beginilah Bentuk Dari <span class="fancy">Header Slider</span> </h2> </div> <script> const left = document.getElementById("bagian-kiri"); const handleMove = e => { left.style.width = `${e.clientX / window.innerWidth * 100}%`; } document.onmousemove = e => handleMove(e); document.ontouchmove = e => handleMove(e.touches[0]); </script> </body> </html>_6. Simpan file yang sebelumnya dimodifikasi. Kemudian, buka file indeks. html melalui browser Anda. Nantinya, halaman website akan menampilkan dua gradasi warna yang berbeda, beserta konten headernya. Dengan menggerakkan kursor Anda, pewarnaan halaman konten dapat bervariasi (baik didominasi warna di sisi kiri atau sebaliknya), karena prinsip penggeser yang telah diatur di bagian kode sebelumnya
Itulah tutorial cara membuat efek slider header dengan Javascript. Semoga tutorial ini bermanfaat bagi para pembaca