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.
Updated: 26 Januari 2021
Bagikan:
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.

1. 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.

Website Digitalizer My ID juga menggunakan javscript headroom untuk header menunya.

2. 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.

3. 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).

4. 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 TERBARU
Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder
Artikel ini menjelaskan tentang cara pembuatan menu di luar kanvas pada website yang menggunakan CMS WordPress dan plugin Oxygen Builder
Baca selengkapnya....
Konversi Website ke Oxygen Builder (Studi Kasus)
Apakah anda ingin mengkonversi website yang menggunakan Oxygen Builder? Berikut contoh kasus dan peningkatan kinerja hasil optimasinya.
Baca selengkapnya....
Bagaimana Cara Membuat Slider Dinamis dengan Flickity di Oxygen Builder Repeater?
Tutorial ini menjelaskan cara membuat slider dinamis menggunakan flickity yang digabungkan dengan elemen Oxygen Builder Repeater.
Baca selengkapnya....
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!
logo digitalizer
© 2020 - 2021 Digitalizer My ID - Allright Reserved