Look Screen sering digunakan pada layar ponsel Smartphone atau pada Tablet yang menggunakan sistem operasi Android, biasanya untuk menjaga privasi atau keamanan pengguna smartphone. Lock screen sendiri bisa menggunakan memasukan pin, password, swipe dan juga dengan pattern lock. Dalam kasus ini saya akan membahas tentang Cara Membuat Look Screen menggunakan Patternlock.js.

Pattern lock merupakan mode screen lock menggunakan pola kunci pada layar sesuai titik yang tampil pada layar smartphone. Oke bagaimana kalau langsung saja dipraktekan cara membuatnya ,supaya sahabat tidak penasaran apa sih pattern lock ini, baiklah sahabat bisa ikuti langkah-langkah berikut ini:

Langkah yang pertama siapkan struktur HTMLnya seperti dibawah ini

1-cara membuat pattrenlock  2-cara membuat pattrenlock

saya disini menggunakan tag SVG untuk membuat patternnya, gambar diatas adalah view dari SVG. sedikit saya jelaskan SVG itu sederhananya seperti gambar yang bisa dirubah-rubah menggunakan CSS. Biasanya digunakan untuk menggantikan gambar dengan format jpg,jpeg,atau gif.

Langkah yang kedua tambahkan style CSS seperti dibawah ini:

langkah selanjutnya tambahkan link library dari jquery dan pattern.js ,serta script yang digunakan

JIka sudah selesai coba jalankan pada browser masing-masing maka tampilannya akan seperti dibawah ini:

3-cara membuat pattrenlock  4-cara membuat pattrenlock

Demikian pembahasan kali ini tentang Cara Membuat Look Screen menggunakan Patternlock.js, semoga bermanfaat dan selamat mencoba.

terima kasih