Cara Membuat Look Screen Menggunakan Patternlock.js -

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Screen Lock Pattern</title>
	
</head>
<body>
	<div class="container">
		<svg class="patternlock" id="lock" viewBox="4 22.5 75 75" xmlns="http://www.w3.org/2000/svg">

			<g class="lock-actives"></g>
			<g class="lock-lines"></g>	
			<g class="lock-dots">
				
				<circle cx="30" cy="30" r="2" />
				<circle cx="50" cy="30" r="2" />
				<circle cx="70" cy="30" r="2" />
				
				<circle cx="30" cy="50" r="2" />
				<circle cx="50" cy="50" r="2" />
				<circle cx="70" cy="50" r="2" />
				
				<circle cx="30" cy="70" r="2" />
				<circle cx="50" cy="70" r="2" />
				<circle cx="70" cy="70" r="2" />

			</g>

			
		</svg>
	</div>

</body>
</html>

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:

<style>
		*{
			box-sizing: border-box;
		}
		html,body{
			padding: 0;
			margin: 0;
			height: 100vh;
			max-height: 100vh;
			overflow: hidden;
		}
		body{
			background-color:#000;
		}
		.container{
			margin:100px auto;
			height: 100%;
		}
		#lock{
			width: 100%;
			height: calc(100% - 15vh);
			padding-bottom: 12vh;
			min-height: 120px;
			background-image: url(bg.jpg);
			background-repeat: no-repeat;
			background-position: 215px 0px;
		}
		svg.patternlock g.lock-lines line{
			stroke-width:1.5;
			stroke: #d4f7f3;
			opacity: 0.5;
		}
		svg.patternlock g.lock-dots circle{
			stroke:transparent;
			fill: #d4f7f3;
			stroke-width: 13.5;
		}
		svg.patternlock g.lock-actives circle{
			fill: #ff4c00;
			opacity: .2;
			animation: lock-activate-dot .15s 0s ease 1;
			transform-origin: center;
		}

	</style>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="pattern-lock/patternlock.js"></script>

	<script type="text/javascript">
		var e = document.getElementById('lock')
		var p = new PatternLock(e,{
			onPattern:function(){
				this.success()
			}
		});
	</script>

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

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

terima kasih

Cara Membuat Look Screen Menggunakan Patternlock.js

Kategori