Alhamdullilah, di Tahun 2021 ini saya berkesempatan untuk mewakili Provinsi Kepulauan Riau dalam Lomba Kompetensi Siswa Nasional ke-29 bidang lomba Web Technologies atau Pengembangan Web. Untuk LKS Nasional 2021 ini dibagi menjadi 3 hari, dari hari Selasa tanggal 26 Oktober 2021 hingga 28 Oktober 2021.
Untuk pembagian modulnya sebagai berikut:
- Selasa, 26 Oktober 2021: Modul Speedtest dan modul CMS (Wordpress)
- Rabu, 27 Oktober 2021: Modul Server Side (Framework Laravel dan JavaScript)
- Kamis, 28 Oktober 2021: Modul Client Side (Game dengan Canvas JavaScript)
Pelaksanaan LKS Nasional berbeda dengan lomba-lomba yang lain. Dalam lomba ini, kita dituntut untuk mengoptimalkan waktu yang ada untuk menyelesaikan requirement soal. Saya berencana untuk membahas beberapa soal dalam LKS Nasional Web Technologies ini. Untuk artikel pertama ini saya akan Membahas Modul Speedtest bagian B1.
Modul Speedtest Bagian B1
Jika anda ingin mengunduh soal dan media dari Modul speedtest silahkan kunjungi repository github saya
Di bagian B1 ini, kita dituntut untuk bisa membuat sebuah toggle button seperti iPhone hanya dengan HTML dan CSS (tanpa JavaScript). Untuk lebih jelasnya silahkan lihat preview dibawah ini:
Dalam video diatas terlihat sebuah button toggle switch, dimana di masing-masing kedua sisinya memiliki sebuah dots yang beranimasi ketika togglenya diklik.
Membuat Struktur HTML
Hal pertama yang harus dilakukan adalah membuat sebuah file html (index.html) yang berisikan layout dari toggle itu, berikut ini kodenya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iOS Toggle</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="ios-toggle">
<input type="checkbox" name="checkbox">
<span class="background"></span>
<span class="checkmark2"></span>
<span class="checkmark"></span>
</div>
</body>
</html>
Di dalam tag head kita akan menggunakan css dari file styles.css. Di dalam body kita membuat sebuah container untuk toggle switchnya dengan class .ios-toggle. Di dalam container tersebut kita membuat sebuah input berjenis checkbox yang akan kita manipulasi inputannya.
Di dalam container tersebut juga terdapat 3 buah span dengan masing masing class .background , .checkmark dan checkmark2. Untuk class .background akan kita gunakan sebagai animasi warna background ketika checkboxnya berubah. Sedangkan class .checkmark dan .checkmark2 akan kita gunakan sebagai dots (titik kecil) yang dianimasikan.
Membuat Styling CSS
Seperti yang saya sebutkan dibagian sebelumnya, file css akan kita letakan di dalam file styles.css, silahkan buat filenya.
Selanjutnya, kita harus mengatur posisi dari container dan isi didalamnya. Untuk containernya (class .ios-toggle) kita harus posisikan sebagai relative agar children didalamnya (background dan dots) dapat kita posisikan absolute dari containernya (.ios-toggle).
Kita juga harus mengatur overflownya menjadi hidden agar background yang akan kita animasikan tidak terlihat jika melebihi containernya. Kita juga mengatur ukuran dari toggle tersebut dengan width dan height. Agar togglenya rounded di kanan dan kirinya, kita menggunakan properti border-radius. Berikut ini adalah source codenya:
.ios-toggle {
display: inline-block;
width: 130px;
height: 50px;
overflow: hidden;
border-radius: 100px;
position: relative;
}
Setelah mengatur posisi dan ukuran containernya, selanjutnya kita akan mengatur posisi dari checkbox input dan backgroundnya. Kita posisikan absolute dengan top, left, right dan bottom 0px sehingga ukurannya akan sama seperti container kita (berjarak 0 dari atas, bawah, kiri dan kanan container):
.ios-toggle input, .ios-toggle .background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Kita juga harus menyembunyikan input checkboxnya (opacity), tetapi kita harus memposisikan z-index (layernya) ke posisi paling atas agar dapat diklik.
.ios-toggle input {
opacity: 0;
z-index: 100;
}
Agar background kita dapat dianimasikan warnanya dari kanan ke kiri dan sebaliknya, kita akan menggunakan linear-gradient css tetapi posisi stop colornya kita samakan ditengah 50% sehingga tidak akan ada feather nya. background-size kita atur width menjadi 200% agar dapat memenuhi container setiap warnanya (biru tua dan biru muda). background-position kita atur 0% pada axis x dan 0% pada axis y agar secara default backgroundnya berwarna biru tua (linear gradient stop pertama). Atur juga waktu transisi atau perpindahan warna dari kanan ke kiri atau kiri ke kanan dengan properti transition. Kita tambah delay 0.1 detik atau 100 milidetik menunggu dots di kiri atau kanan beranimasi membesar terlebih dahulu ketika diklik.
.ios-toggle .background {
background: linear-gradient(to right, #0313fc 50%, #039dfc 50%);
background-size: 200% 100%;
background-position: 0% 0%;
transition: .2s linear;
transition-delay: .1s;
}
Selanjutnya kita akan mengatur posisi, warna dan waktu transisi dots nya (.checkmark dan .checkmark2). Untuk posisinya juga absolute, untuk dot pertama (.checkmark) posisi left nya 20px dari kiri container. Sedangkan untuk dot kedua (.checkmark2) posisi right nya 20px dari kanan container:
.ios-toggle .checkmark, .ios-toggle .checkmark2 {
background-color: #039dfc;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
transform-origin: center;
height: 20px;
width: 20px;
border-radius: 20px;
transition: .2s linear;
}
.ios-toggle .checkmark2 {
background-color: #0313fc;
left: unset;
right: 20px;
}
Animasi dan Transisi
Setelah selesai bermain-main dengan HTML dan CSS dasar dari toggle switch ini, kita harus membuat animasi berdasarkan value dari checkboxnya. Pertama tama kita gerakan backgroundya (class .background) agar bergerak dari kiri ke kanan ketika di check checkboxnya, dan bergerak dari kanan ke kiri ketika di uncheck checkboxnya. Kita menggunakan pseudo class :checked untuk mengecek apakah checkboxnya dicheck atau tidak dan menggunakan simbol tilde atau gelombang (simbol ~) agar children yang lain tetapi berada dalam satu container dengan input checkbox ini posisi backgroudnya berubah. Posisi sumbu x backgroundya kita gerakan ke kiri negatif 100% sehingga warnanya gradient kedua yang kita atur diawal akan bergerak ke kiri.
.ios-toggle input:checked ~ .background {
background-position: -100% 0%;
}
Selanjutnya, kita atur animasi agar dotnya berubah ketika value checkboxnya berubah. Untuk checkbox pertama (class .checkmark) yang berada di kiri akan dianimasikan membesar jika checkboxnya di check (karena jika dicheck backgroundya akan bergerak ke kana):
.ios-toggle input:checked ~ .checkmark {
left: 0px;
height: 100%;
border-radius: 0px;
width: 60px;
}
Kita juga menambah style untuk class .checkmark2 yang berada di kanan toggle switch tetapi dot ini akan membesar jika checkboxnya di uncheck:
.ios-toggle input:not(:checked) ~ .checkmark2 {
right: 0px;
height: 100%;
border-radius: 0px;
width: 60px;
}
Langkah terakhir, kita menambahkan animasi skala dotnya dari kecil ke besar ketika value checkboxnya berubah. Kita tambahkan delay dari 0% ke 70% agar memberi waktu animasi background selesai:
@keyframes dot {
0% {
transform: translateY(-50%) scale(0);
}
70% {
transform: translateY(-50%) scale(0);
}
100% {
transform: translateY(-50%) scale(1);
}
}
Untuk menggunakannya, logika checkboxnya berarti terbalik dari checkmark sebelumnya:
.ios-toggle input:checked ~ .checkmark2, .ios-toggle input:not(:checked) ~ .checkmark {
animation: dot .5s linear;
}
Hasil Kode Akhir
Di hasil akhir tutorial ini, kita akan mendapatkan dua buah file, index.html dan style.css. Jika anda ingin melihat source codenya silahkan kunjungi repository github saya
Konten index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iOS Toggle</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="ios-toggle">
<input type="checkbox" name="checkbox">
<span class="background"></span>
<span class="checkmark2"></span>
<span class="checkmark"></span>
</div>
</body>
</html>
Konten style.css:
.ios-toggle {
display: inline-block;
width: 130px;
height: 50px;
overflow: hidden;
border-radius: 100px;
position: relative;
}
.ios-toggle input, .ios-toggle .background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ios-toggle input {
opacity: 0;
z-index: 100;
}
.ios-toggle .background {
background: linear-gradient(to right, #0313fc 50%, #039dfc 50%);
background-size: 200% 100%;
background-position: 0% 0%;
transition: .2s linear;
transition-delay: .1s;
}
.ios-toggle .checkmark, .ios-toggle .checkmark2 {
background-color: #039dfc;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
transform-origin: center;
height: 20px;
width: 20px;
border-radius: 20px;
transition: .2s linear;
}
.ios-toggle .checkmark2 {
background-color: #0313fc;
left: unset;
right: 20px;
}
.ios-toggle input:checked ~ .background {
background-position: -100% 0%;
}
.ios-toggle input:checked ~ .checkmark {
left: 0px;
height: 100%;
border-radius: 0px;
width: 60px;
}
.ios-toggle input:not(:checked) ~ .checkmark2 {
right: 0px;
height: 100%;
border-radius: 0px;
width: 60px;
}
@keyframes dot {
0% {
transform: translateY(-50%) scale(0);
}
70% {
transform: translateY(-50%) scale(0);
}
100% {
transform: translateY(-50%) scale(1);
}
}
.ios-toggle input:checked ~ .checkmark2, .ios-toggle input:not(:checked) ~ .checkmark {
animation: dot .5s linear;
}
Silahkan coba jalankan file index.html nya, maka anda akan mendapatkan toggle switch iOS seperti soal LKS Nasional 2021.
Kesimpulan
Pembuatan animasi toggle iOS ini memang sedikit tricky dan memerlukan logika agar dapat membuatnya. Mungkin juga terdapat cara orang lain yang lebih mudah daripada cara saya ini.
Terima kasih telah membaca seri pertama pembahasan LKSN 2021 Web Technologies!