Cara Pasang Efek Animate CSS

Membahas Web Design memang tidak ada habisnya, ada banyak sekali plugin plugin, atau pun libray libray Javascript ataupun CSS. Kita bisa memasangnya sesuai keinginan dan kebutuhan kita. Sebut saja salah satu library CSS ini adalah Animate CSS. Animate CSS adalah pustaka atau library CSS yang telah di buat dan dikembangkan oleh seseorang Developer Web secara free. Kita hanya tinggal memakainya, cara pasangnya pun sangat mudah, kita hanya tinggal memanggil class class nya saja. Animasi yang di sediakan oleh animate css ini cukup lumayan banyak, dan tentunya kalo kita membuatnya sendiri lumayan memakan waktu.

Kegunaan animate CSS ini sebenarnya adalah untuk membuat animasi text, animasi gambar dan elemen elemen yang lainnya. Teman temen bisa lihat demo nya di link ini https://daneden.github.io/animate.css/.

Nah kali ini saya akan membagikan bagaimana Cara Pasang Efek Animate CSS, langsung saja kita praktekan teman teman. Kalian bisa buka text editor kalian, dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html lalu simpan.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Cara Pasang efek Animate CSS </title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel ="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
	</head>
<body>
	<div class="container">
		<h1 class ="wow fadeIn text-center"> fadeIn </h1>
		<h1 class ="wow shake text-center"> shake </h1>
		<h1 class ="wow flash text-center"> flash </h1>
		<h1 class ="wow pulse text-center"> pulse </h1>
		<h1 class ="wow rubberBand text-center"> rubberBand </h1>
		<h1 class ="wow swing text-center"> swing </h1>
		<h1 class ="wow tada text-center"> tada </h1>
		<h1 class ="wow jello text-center"> jello </h1>
	</div>
</body>
</html>

setelah tag div penutup terakhir copy kan code javascript di bawah ini.

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js”></script>
<script>
new WOW().init();
</script>

kalo semuanya benar maka efek animate css pasti akan berjalan.

sekian tutorial Cara Pasang Efek Animate CSS, semoga tutorial ini bermanfaaat yah..