Membuat Efek Scale Pada Objek Dengan Menggunakan Jquery UI

Hallo teman-teman Dumet School, bertemu lagi dengan saya Shelli Ripati di kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Efek Scale Â Pada Objek Dengan Menggunakan Jquery UI. Efek Scale Â yang ada pada Jquery UI memberikan efek pada suatu objek dengan animasi hilang mulai dari sisi ke tengah dan muncul dari arah sebaliknya yaitu dari tengah.

Untuk dapat mengetahui cara Membuat Efek Scale Â Pada Objek Dengan Menggunakan Jquery UI kita langsung saja membuat struktur htmlnya terlebih dahulu ya teman-teman. Teman-teman bisa salin script yang ada di bawah ini.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Membuat Efek Scale  Pada Objek Dengan Menggunakan Jquery UI</title>
  <style>
  #toggle {
    width: 500px;
  }
  img{
    width: 100%;
  }
  </style>
</head>
<body>
	<h1>Membuat Efek Scale  Pada Objek Dengan Menggunakan Jquery UI</h1>
	<p>Klik dimana aja untuk efek toggle scale</p>
	<div id="toggle">
	  <img src="../img/sailoor-moon-2.jpg">
	</div>
 
</body>
</html>

<!doctype html>

<head>

<title>Membuat Efek Scale Pada Objek Dengan Menggunakan Jquery UI</title>

<style>

#toggle {

width: 500px;

}

img{

width: 100%;

}

</style>

</head>

<body>

<h1>Membuat Efek Scale Pada Objek Dengan Menggunakan Jquery UI</h1>

<p>Klik dimana aja untuk efek toggle scale</p>

</div>

</body>

</html>

Lalu teman-teman jangan lupa tambahkan link jquery ui dan jquerynya seperti link di bawah ini. Teman-teman bisa letakkan di dalam head. Dan kebetulan disini untuk jquery UInya saya download. Teman-teman bisa dapatkan link jquery dan file download jquery uinya di jquery.com dan jqueryui.com .

<link rel="stylesheet" href="../jquery-ui-1.12.1/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="../jquery-ui-1.12.1/jquery-ui.js"></script>

Lalu langkah terakhir untuk dapat Membuat Efek Scale Pada Objek Dengan Menggunakan Jquery UI adalah script jquerynya. Teman-teman bisa salin scriptnya seperti yang ada di bawah ini.

<script>
	$( document ).click(function() {
	  $( "#toggle" ).toggle( "scale" );
	});
</script>

$( document ).click(function() {

$( "#toggle" ).toggle( "scale" );

});

</script>

Jika teman-teman perhatikan di sini saya membuat fungsi klik didalam htmlnya dimana jika kita melakukan klik maka div dengan nama id toggle akan akan menghilang atau muncul dengan efek Scale . Dimana efek Scale Â ini akan membuat animasi menghilang ke arah tengah dan muncul dari tengah pada suatu objek.

Demikian artikel tentang cara Membuat Efek Scale Pada Objek Dengan Menggunakan Jquery UI. Semoga artikel ini dapat bermanfaat dan menambah wawasan baru. Buat teman-teman yang penasaran, bisa langsung di coba. Sampai jumpa di pembahasan berikutnya.

Membuat Efek Scale Pada Objek Dengan Menggunakan Jquery UI

Facebook DUMET School

Categories