Cara Membuat Effect Onload Sederhana Menggunakan jQuery

Hai bali lagi ditutorial pemrograman Dumet School, pada artikel sebelum sebelum sudah banyak membahas tentang JavaScript dan jQuery nah kali ini saya akan membahas tentang Bagaimana Cara Membuat Effect Onload Sederhana Menggunakan jQuery. Jadi ideNya itu ketika membuka sebuah halaman seuatu website makan kontent yang akan ditampilkan ada sedikit animasi delay dan dan sentuhan transform dan pastinya menarik untuk dibahas, dan menarik juga untuk teman teman terapkan di dalam

website teman teman sebagai bahan pertimbangan untuk mendapatkan sebuah pekerjaan dibidang frontend bisa dikatakan sebagai portfolio teman teman, oke pastinya menarik tidak garing, pastikan teman teman sudah membuat sebuah file baru dan beri nama terserah teman teman saya akan memberi nama file tersebut index.html dan jika sudah membuat file nya teman teman bisa tambahkan scritpnya dibawah sini :

<div class="container-fluid tengah">
			<div class="container">
				<h1 class="text-center"> ABOUT ME </h1>
				<hr>
				<div class="row">
					<div class="col-md-6">
						<h4 class="hKiri">Web Devloper</h4>
						<p class="pKiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam voluptates, molestiae recusandae excepturi nihil doloribus natus ipsam fugit magni tenetur quidem asperiores officiis, laboriosam id ab inventore, exercitationem et sequi.</p>
					</div>
					<div class="col-md-6">
						<h4 class="hKanan">System Analitic</h4>
						<p class="pKanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sequi, error sint placeat illum quos fuga eveniet eaque nesciunt consequuntur ad. Dignissimos similique, ipsum cumque quasi voluptas ex dolorum excepturi.</p>
					</div>
				</div>
			</div>
		</div>

.atas { background: #fab1a0; padding: 20px }
			.tengah { padding: 20px; background:#f5f6fa; }
			.jumbotron { padding-left: 30px }
			.tengah h1, h4 { color: #192a56 }
			.tengah p { color: #353b48 }

			/*p kiri kanan*/
			
			.pKiri, .pKanan { opacity: 0; transform: translate(-50px, 0); }
			.pKanan { transform: translate(50px, 0);}
			.pKiri.pMuncul, .pKanan.pMuncul { opacity: 1; transform: translate(0,0); transition: 1s }

			.hKiri, .hKanan { opacity: 0; transform: translate(-50px, 0) rotate(15deg); }
			.hKanan { transform: translate(50px, 0) rotate(-15deg);}
			.hKiri.hMuncul, .hKanan.hMuncul { opacity: 1; transform: translate(0,0); transition: 1s }

$(window).on('load', function(){

				$('.pKiri').addClass('pMuncul')
				$('.pKanan').addClass('pMuncul')
				$('.hKiri').addClass('hMuncul')
				$('.hKanan').addClass('hMuncul')
			})

Oh yah untuk designnya saya menggunakan bantuan Bootstrap 4 yah teman teman, untuk teman teman yang belum belajar bootstrap 4 tidak apa apa dilain waktu saya aka membuat sebuah artikel dengan bootstrap 4, oke jika berhasil coba jalankan dibrowsernya maka pada halaman about akan ada animasi ketika kita membuka sebuah website, menarik bukan, untuk penulisan jQuery nya pun tidak terlalu rumit yah sesimple itu kita telah membuat tampilan website yang menarik, oke saya rasa cukup tentang Bagaimana Cara Membuat Effect Onload Sederhana Menggunakan jQuery. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA

The post Cara Membuat Effect Onload Sederhana Menggunakan jQuery appeared first on Kursus Website Terbaik.