Cara Membuat Effect Onload Sederhana Menggunakan jQuery

Hallo bali lagi ditutorial pemrograman Source Code Aplikasi, di artikel sebelum sebelum telah banyak membahas mengenai JavaScript dan jQuery nah kali ini saya akan membahas mengenai Bagaimana Cara Membuat Effect Onload Sederhana Menggunakan jQuery. Jadi ideNya itu ketika membuka sebuah halaman seuatu situs makan kontent yang akan ditampilkan ada sedikit animasi delay dan dan sentuhan transform dan pastinya menarik bagi dibahas, dan menarik pun bagi teman teman terapkan di pada

situs teman teman selaku bahan pertimbangan bagi memperoleh sebuah aktifitas dibidang frontend dapat disebut selaku portfolio teman teman, oke pastinya menarik tak garing, pastikan teman teman telah merancang sebuah file baru dan beri nama terserah teman teman saya akan memberi nama file tersebut index.html dan kalau telah merancang file nya teman teman dapat 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 bagi designnya saya menggunakan bantuan Bootstrap 4 yah teman teman, bagi teman teman yang belum belajar bootstrap 4 tak apa apa dilain waktu saya aka merancang sebuah artikel dengan bootstrap 4, oke kalau berhasil coba jalankan dibrowsernya karenanya di halaman about akan ada animasi ketika kita membuka sebuah situs, menarik bukan, bagi penulisan jQuery nya pun tak terlalu rumit yah sesimple itu kita telah merancang tampilan situs yang menarik, oke saya rasa lumayan mengenai Bagaimana Cara Membuat Effect Onload Sederhana Menggunakan jQuery. Hingga bertemu diartikel berikutnya dan hingga jumpa.

#KeepLearn

#IsmetMA

Sumber https://kursuswebsite.org