Cara Mengaplikasikan Headroom.js pada WordPress dan Oxygen Builder

Artikel ini menjelaskan cara menggunakan Headroom.js di WordPress + Oxygen Builder, namun anda juga bisa menerapkannya pada website apapun.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
headroom js pada WordPress dan Oxygen Builder

Apakah headroom js itu?

Headroom.js adalah javascript yang berfungsi untuk menyembunyikan header ketika kita scroll turun dan memunculkan header kembali ketika scroll naik.

Mengapa menggunakan Headroom.js?

Salah satu trend website saat ini adalah menggunakan fixed header untuk memudahkan navigasi bagi pengunjung, akan tetapi teknik ini akan mengurangi luasnya area baca (viewport) dan bisa jadi akan mengurangi kenyamanan pada device mobile yang notabene memiliki area baca yang lebih kecil.

Dengan menggunakan javascript headroom maka pengunjung yang sedang membaca dan biasanya kondisi scroll turun ke bawah (kalau baca scroll keatas kayaknya ga ada ya?) akan memiliki area baca yang lebih luas dan merasa lebih nyaman.

Referensi Headroom.js

Anda bisa mengetahui lebih banyak tentang pembuat headroom js di halaman ini termasuk juga keterangan setting dan link download scriptnya.

Dibawah ini saya membuat langkah-langkah menggunakan Headroom.js di WordPress yang menggunakan Oxygen Builder, namun pada prinsip dasarnya anda dapat menggunakannya pada website apapun.

Header website ini juga menggunakan headroom!

Langkah-langkah instalasi Headroom.js

  1. Tambahkan script html untuk inisiasi headroom js
<script src="https://unpkg.com/headroom.js"></script>

<script>
var headerx = document.querySelector('header');
var headroom = new Headroom(headerx);
headroom.init();
</script>
  1. Tambahkan css untuk membuat header fixed dan efek transisi headroom
.headroom {
will-change: transform;
transition: transform 200ms linear;
}

.headroom--pinned {
transform: translateY(0%);
}

.headroom--unpinned {
transform: translateY(-100%);
}

header {
  position:fixed;
}
  1. Pastikan elemen header memiliki id "header" dan css class "headroom"
Headroom.js di WordPress + Oxygen Builder
Tampilan panel elemen header pada Oxygen Builder dengan ID header dan css classes headroom
  1. Simpan dan lihat di halaman depan, hapus cache jika menggunakan plugin cache

Dibawah ini video contoh hasil aplikasi headroom js pada header, perhatikan bagian headernya (bagian atas berwarna biru yang ada logo digitalizer).

Penutup

Demikian cara mengaplikasikan Headroom.js di WordPress yang menggunakan Oxygen Builder. Jika ada pertanyaan atau tanggapan silahkan gunakan kolom komentar dibawah.

Salam Digital!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait

Slick Slider in Oxygen Builder
10 Contoh Slick Slider di Oxygen Builder & Cara Pembuatannya
Cara membuat slider dengan Slick Slider di Oxygen Builder berisi tahapan pembuatannya, opsi-opsinya dan 10 slider contoh hasilnya.
restore from backup WordPress with WP CLI and SSH
Restore Backup WordPress dengan WP CLI & SSH
Cara me-restore (mengembalikan) data WordPress kita dengan WP CLI & SSH.
Backup Cepat WordPress dengan WP CLI & SSH
Backup WordPress Cepat dengan WP CLI & SSH
Cara backup WordPress secara cepat dengan 1 perintah WP CLI dan 1 perintah SSH, serta membuat script backup dan script autobackup.
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross