Cara Membuat Situs Web Anda Responsif dan Interaktif Dengan CSS dan JavaScript

Memiliki situs web yang responsif dan interaktif adalah persyaratan tidak tertulis bagi setiap pemilik situs web. Manfaat memiliki situs web interaktif yang menyesuaikan dengan sempurna dengan ukuran layar apa pun tidak dapat dilebih-lebihkan.

Anda harus membuat pengalaman yang dipersonalisasi untuk setiap pengguna yang mengunjungi situs web Anda, dan dengan beberapa properti CSS dan beberapa fungsi JavaScript, Anda dapat melakukannya.

Dalam artikel tutorial ini, Anda akan belajar cara membuat situs web HTML dan CSS Anda responsif dan interaktif.

Membuat Situs Web Anda Interaktif

Saat Anda membangun situs web, Anda mulai dari atas ke bawah. Oleh karena itu, membuat situs web Anda interaktif adalah proses yang juga harus dimulai dari atas. Mengambil situs web portofolio ini kami membangun sebagai contoh. Ini memiliki desain yang bersih tetapi tidak sepenuhnya interaktif.

Setiap item menu berubah warna saat Anda mengarahkan kursor ke atasnya, tetapi bagaimana Anda tahu bagian mana dari situs web tempat Anda berada? Nah, ada dua cara untuk melakukannya—mengaktifkan item menu dengan

digulir dan klik acara.

Mengaktifkan item menu setiap kali Anda menggulir ke atas atau ke bawah sebuah situs web akan memerlukan penggunaan fungsi JavaScript yang dapat Anda sebut "activeMenu". Fungsi ini akan memerlukan akses ke item menu di bilah navigasi, serta setiap bagian situs web. Untungnya, Anda dapat melakukannya dengan menggunakan querySelectorAll pemilih DOM.

Di direktori proyek Anda, Anda harus membuat file JavaScript baru dan menautkannya ke file HTML Anda menggunakan baris kode berikut:

Di sebuah naskah tag, itu src value adalah nama file JavaScript, yang pada contoh di atas adalah main.js.

File utama.js

// menggunakan javascript untuk mengaktifkan onscroll item menu
const li = document.querySelectorAll(".link");
const detik = document.querySelectorAll("bagian");
fungsi activeMenu(){
misalkan len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktif"));
li[len].classList.add("aktif");
}
menu aktif();
window.addEventListener("gulir", activeMenu);

Itu querySelectorAll pemilih dalam kode di atas mengambil semua item menu menggunakan link kelas. Itu juga mengambil semua bagian situs web menggunakan bagian menandai. Itu aktifkanMenu fungsi kemudian mengambil panjang setiap bagian dan menghapus atau menambahkan variabel "aktif" tergantung pada posisi gulir pengguna.

Agar kode di atas berfungsi, Anda harus memperbarui lembar gaya situs web portofolio untuk menyertakan kode berikut di bagian bilah navigasi:

#navbar .menu li.active a{
warna: #ff;
}

Mengaktifkan Item Menu saat klik

 //menggunakan jquery untuk mengaktifkan item menu saat klik
$(document).on('klik', 'li', fungsi(){
$(ini).addClass('active').saudara kandung().removeClass('active')
})

Menambahkan kode di atas ke file JavaScript Anda akan mengaktifkan setiap bagian ketika pengguna mengklik item menu yang sesuai. Namun, ia menggunakan jQuery (perpustakaan JavaScript) yang menyelesaikan tugas ini dengan jumlah kode yang minimal.

Masalah yang mungkin Anda temui ketika Anda mengaktifkan setiap item menu di klik adalah bahwa navbar akan menutupi bagian atas setiap bagian. Untuk mencegah hal ini, Anda cukup memasukkan kode berikut di bagian utilitas dari style sheet:

bagian{
scroll-margin-top: 4.5rem;
}

Kode di atas akan memastikan bahwa ketika Anda menavigasi ke setiap bagian dengan mengklik, bilah navigasi akan tetap 4,5rem di atas setiap bagian (atau 72px). Fitur keren lainnya untuk ditambahkan ke situs web Anda adalah pengguliran halus, yang dapat Anda capai dengan kode CSS berikut:

html {
gulir-perilaku: halus;
}

Membuat Halaman Beranda Anda Interaktif

Di sebagian besar situs web, pengguna akan melihat tombol pertama mereka di bilah navigasi atau beranda. Selain terlihat seperti ajakan bertindak, tombol juga harus interaktif. Cara yang bagus untuk mencapai ini adalah dengan CSS : arahkan pemilih, yang menetapkan status baru ke elemen setiap kali mouse pengguna menjalankannya.

Di situs web portofolio, satu-satunya tautan di halaman beranda memiliki btn class (yang memberikan tampilan tombol). Jadi, untuk membuat tombol ini interaktif, Anda cukup menetapkan : arahkan pemilih ke btn kelas.

Menggunakan :Hover Selector

 .btn: arahkan kursor{
latar belakang: #fff;
warna biru;
perbatasan: padat biru;
batas-radius: 5px;
}

Menambahkan kode di atas ke bagian utilitas situs web portofolio akan membuat transisi tombol dari satu status ke status lainnya saat Anda mengarahkan kursor ke atasnya.

Fitur keren lainnya untuk halaman beranda adalah animasi pengetikan, yang menggunakan diketik.js (skrip animasi pengetikan jQuery).

Menggunakan typed.js

// jquery mengetik skrip animasi teks
var diketik = new Typed(".typing", {
string: ["Pengembang Perangkat Lunak"],
jenisKecepatan: 100,
Kecepatan mundur: 60,
lingkaran: benar
});

Setelah Anda menambahkan kode di atas ke file JavaScript Anda, Anda harus membuat perubahan berikut pada HTML:

Dan aku adalah 

Dalam kode di atas Anda mengganti teks "Pengembang Perangkat Lunak" dalam kode asli dengan kelas "mengetik", membuat animasi pengetikan.

Membuat Bagian Lain dari Situs Web Anda Menjadi Interaktif

Membuat kelas utilitas tombol dan menggunakan melayang-layang pemilih akan memastikan bahwa setiap bagian halaman web Anda yang memiliki tombol bersifat interaktif. Properti transisi dan transformasi CSS juga memiliki beberapa fitur animasi hebat yang dapat Anda tambahkan ke situs web Anda.

Jika Anda memiliki galeri atau bagian gambar apa pun di situs web Anda, Anda dapat menggunakan dua properti yang disebutkan di atas untuk membuat efek hover pada gambar Anda. Menambahkan kode CSS berikut ke gambar di bagian proyek situs web portofolio akan membuat efek transformasi pada gambar di bagian:

.img-wadah img{
lebar maksimum: 450 piksel;
transisi: semua kemudahan 0,3 detik;
kursor: penunjuk;
}
.img-container img: arahkan kursor{
mengubah: skala (1.2);
}

Menjadikan Situs Web Anda responsif

Saat membuat situs web responsif, ada empat jenis perangkat berbeda yang perlu Anda pertimbangkan—desktop, laptop, tablet, dan ponsel cerdas. Selain itu, masing-masing jenis perangkat ini juga memiliki kisaran ukuran layar yang berbeda, tetapi memiliki empat kategori ini adalah awal yang baik.

Terkait: Cara Menggunakan Kueri Media dalam HTML dan CSS untuk Membuat Situs Web yang Responsif

Dalam kondisi saat ini, situs web portofolio ditampilkan dengan baik di desktop dan laptop. Jadi, membuatnya responsif berarti membuat tata letak yang disesuaikan untuk tablet dan ponsel cerdas.

Cara terbaik untuk mencapai desain responsif dengan CSS dan HTML adalah melalui kueri media. Anda dapat menempatkan kueri media dalam file CSS atau HTML tautan menandai. Pendekatan terakhir memfasilitasi skalabilitas, dan itu juga metode yang akan saya tunjukkan.

Anda harus membuat dua file CSS tambahan. File CSS pertama akan membuat struktur tata letak untuk laptop dan tablet kecil dalam mode lanskap. Ini akan memiliki lebar maksimum 1100px, seperti yang Anda lihat di tag tautan berikut:

Memasukkan baris kode di atas ke dalam kepala tag file HTML Anda (atau dalam hal ini file situs web portofolio) akan memastikan bahwa setiap perangkat dengan lebar layar 1100px dan di bawah akan menggunakan gaya di layar lebar.css mengajukan.

File layar lebar.css

/* Rumah */
#navbar .container h1 rentang{
tampilan: tidak ada;
}
#home .home-content .text-3 span{
warna: #000000;
}
/* Portofolio */
.proyek{
justify-content: pusat;
}
.proyek{
fleksibel: 0;
}
/* Tentang */
.tentang-konten{
arah fleksibel: kolom;
}
/* Kontak */
.konten-kontak{
arah fleksibel: kolom;
}

Kode di atas akan menghasilkan tata letak responsif pada perangkat dengan ukuran layar 1100px ke bawah, seperti yang Anda lihat pada output di bawah ini:

File CSS kedua akan membuat struktur tata letak untuk ponsel cerdas dan tablet dalam mode potret. Ini akan memiliki lebar maksimum 760 piksel, seperti yang Anda lihat di tag tautan berikut:

File mobile.css

/* Navbar */
#navbar .container h1 rentang{
tampilan: tidak ada;
}
#navbar .container .menu{
margin-kiri: 0rem;
}
#ham-menu{
lebar: 35px;
tinggi: 30 piksel;
margin: 30px 0 20px 20px;
kursor: penunjuk;
}
#navbar .container .menu-wrap .menu{
tampilan: tidak ada;
}
.batang{
tinggi: 5 piksel;
lebar: 100%;
warna latar: #ffffff;
tampilan: blok;
batas-radius: 5px;
transisi: kemudahan 0,3 detik;
}
#bar1{
mengubah: translateY(-4px);
}
#bar3{
mengubah: translateY(4px);
}
/* Rumah */
#rumah{
tampilan: fleksibel;
background: url("/images/home.jpg") no-repeat center;
tinggi: 100vh;
}
#rumah .wadah{
margin: 6rem 1rem 2rem 1rem;
bantalan: 2 rem;
}
#home .home-content .text-1{
ukuran font: 20px;
margin: 1.2rem;
}
#home .home-content .text-2{
ukuran font: 45px;
font-berat: 500;
margin: 1rem;
}
#home .home-content .text-3{
ukuran font: 22px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
warna: #0000ff;
font-berat: 600;
}
#rumah .wadah{
margin-kiri: 4,5rem;
}
/* Tentang */
#tentang .wadah{
bantalan: 0;
}
/* Kontak */
#hubungi .wadah{
bantalan: 0;
}

File di atas akan menghasilkan layout smartphone responsif berikut ini:

Cara Lain untuk Membuat Situs Web Interaktif yang Responsif

Mengetahui cara membuat situs web Anda responsif dan interaktif menggunakan CSS dan HTML adalah keterampilan yang bagus untuk dimiliki. Tetapi ini bukan satu-satunya metode untuk membuat situs web Anda responsif dan interaktif.

Banyak kerangka kerja frontend dan bahkan template pada layanan seperti Joomla memfasilitasi desain interaktif yang responsif.

15 Template Joomla Bergaya untuk Situs Web Responsif

Ingin membuat situs web untuk bisnis atau blog Anda? Cobalah template Joomla ini.

Baca Selanjutnya

Tentang Penulis