Cara Membuat Efek Fireworks Menggunakan jQuery

Kali ini saya akan membagikan Tutorial Membuat Efek Fireworks Menggunakan jQuery. Fireworks sendiri seperti tampilan kembang api nah dalam kasus ini bagaimana cara menampilkan efek fireworks menggunakan jQuery. Baiklah jangan kemana-mana yuk kita mulai saja cara dalam membuatnya bisa perhatikan langkah-langkah berikut ini:

Langkah pertama sahabat buka text editor lalu ketik code dibawah ini simpan dengan nama index.html :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Efek Firework Dengan jQuery</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>


<!-- Bagian plugin script diletakkan sebelum penutup body-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
	<script src="jquery.click-firewords.js"></script>

<!DOCTYPE html>

<head>

<title>Membuat Efek Firework Dengan jQuery</title>

</head>

<body>

Langkah kedua buat struktur menggunakan class dari bootstrap, karena pada code diatas sudah disipikan link dari bootstrap.

<div class="container mt-5">
		<div class="row">
			<div class="col-md-6 offset-md-3 justify-content-center">
				<h4>Membuat Efek Firework dengan jQuery</h4>
				<div class="card mt-5 img-area" style="width: 18rem;">
				  <img src="Koala.jpg" class="card-img-top" alt="">
				  <div class="card-body img-content">
				    <h5 class="card-title font-weight-bold">Koala Abu-Abu Mongkey</h5>
				    <p class="card-text">Koala adalah salah satu binatang berkantung khas dari Australia dan merupakan wakil satu-satunya dari keluarga Phascolarctidae. .</p>
				    <button type="button" class="btn btn-primary">Go Click</button>
				  </div>
			</div>	

			</div>
		</div>
	</div>

<h4>Membuat Efek Firework dengan jQuery</h4>

<h5 class="card-title font-weight-bold">Koala Abu-Abu Mongkey</h5>

<p class="card-text">Koala adalah salah satu binatang berkantung khas dari Australia dan merupakan wakil satu-satunya dari keluarga Phascolarctidae. .</p>

<button type="button" class="btn btn-primary">Go Click</button>

</div>

Langkah ketiga lanjut dengan mengetikkan baris script perintah fungsi button click yaitu clickFireworks seperti dibawah ini:

<script>
		$(function(){
		$('button').clickFireworks({

		  id:'fireworks',
		  appendTo: 'body',

		  zIndex:1000
		});
	});
	</script>

$(function(){

$('button').clickFireworks({

id:'fireworks',

appendTo: 'body',

zIndex:1000

});

</script>

JIka sudah semua sahabat ketikkan maka akan seperti tampilan berikut:

Dan untuk melihat efek seperti letusan kembang api sahabat bisa Klik button. Maka akan ada efek fireworks disekitar button.

Nah itulah pembahasan tentang Cara Membuat Efek Fireworks Menggunakan jQuery yang bisa saya sampaikan, semoga bermanfaat dan terima kasih.

Facebook DUMET School

Categories