Cara Membuat Animasi SlideUp Wrapper Post di Blog



Kebanyakan orang yang memiliki blog sangat jarang sekali memodifikasi situsnya dengan animasi yang keren-keren. Ya mungkin karena beberapa alasan seperti buat apa, atau tidak bisa. Padahal kalau kita membuat tampilan yang menarik dan berbeda dari kebanyakan situs akan menjadikan situs kita ini unik dan anti mainstream loh sobat.

Memang sih ini hanya untuk gaya-gaya saja, namun apa salahnya jika kita berkreasi salah satunya memodifikasi situs blog kita dengan beberapa animasi keren. Contohnya yang akan saya terapkan sekarang ini adalah membuat Slide Up pada pembungkus konten atau wrapper. Apaan sih bro gak jelas banget? butuh penjelasan yang jelas kita. Hahaha oke dari pada sobat kebingungan coba sobat buka demonstrasinya dengan menekan tombol berikut:


Dari demonstrasi pada saat halaman berhasil diload maka konten seperti daftar postingan akan muncul dari bawah ke atas seperti Slide, nah Animasi inilah yang akan kita buat sekarang. Kita mulai dengan mencoba langkah" berikut ini.


Membuat Animasi SlideUp pada Wrapper Post di Blog

Sebelum take action, kita harus memastikan dahulu id atau class pembungkusnya yang ada pada template sobat, karena setiap blog berbeda templatenya juga. Jika sobat tidak memiliki template keren bisa dengan mengunduhnya disini. Bagi sobat yang tidak tahu cara mencari wrapper postnya bisa mengikuti langkah berikut

  1. Buka situs sobat
  2. Klik kanan dan pilih menu inspect element
  3. Akan terbuka sebuah konsol dan arahkan mouse ke icon pointer dan klik sampai aktif seperti di gambar berikut ini:
  4. Cara Membuat Animasi SlideUp Wrapper Post di Blog
  5. Jika sudah aktif arahkan kursor sobat ke bagian situs sobat sampai menemukan wrapper/containernya seperti yang saya lakukan pada gambar berikut dan catalah id atau classnya supaya tidak lupa.
  6. Cara Membuat Animasi SlideUp Wrapper Post di Blog

Jika sudah menemukan wrappernya kalian tinggal membuat kode CSS berikut dan tempelkan di sebelum tag </head>


<style>

/*== codepelajar.com | CSS ==*/
#idwrappermu { /*=== ganti dengan wrappermu ===*/
 transition : .5s;
 opacity : 0;
 transform:translate(0,200%); /*== translate ini maksudnya konten akan bergeser kebawah mencapai 200% dari ukuran tinggi kontennya ==*/
}
#idwrappermu.loaded { /*== class loaded akan ditambahkan menggunakan js untuk kembali ke posisi semula ==*/
 opacity: 1;
 transform: translate(0)
}
</style>

Jangan lupa #idwrappermu ganti dengan id/class wrapper yang ada di template sobat. Selanjutnya tinggal memasang code javascript berikut dengan trik menambahkan class


<script>
/*== codepelajar.com | javascript ==*/
(function(){
 setTimeout(function(){
  document.getElementById('idwrappermu').classList.add('loaded')
 },500)
}())
</script>



Jika masih bingung jangan sungkan untuk berkomentar setelah artikel ini berakhir

Apabila langkah-langkahnya telah selesai, coba save template dan rasakan sensasinya. Jika masih gagal periksa kembali tutorial di atas dan pastikan mengerti tahapan pemasangannya.


Cara Kedua Memasang Animasi SlideUp pada Wrapper Post Blog

Bagi sobat yang merasa kesulitan pada metode memasangnya yang pertama, cara kedua ini agak sedikit berbeda namun animasi yang ditampilkan akan sama. Baiklah berikut adalah tutorial animasi SlideUp cara yang kedua.


Pertama, taruh kode HTML berikut tepat dibawah tag </header> blog sobat. Jika tidak terdapat tag header bisa cari dengan nama header-wrapper atau header-site.


<div id="pemisah"></div>

Selanjutnya sobat tempelkan kode CSS di bawah ini sebelum tag </head>.


<style>
/*== codepelajar.com | CSS ==*/
#pemisah {
 display: block;
 width: 100%;
 height: 0;
 transition: .5s; /*== ubah durasi transisi sesuai keinginan sobat 1s misalnya ==*/
 padding-bottom: 200%;
}
#pemisah.loaded {
 padding-bottom:0;
}
</style>


Terakhir letakan kode Javascript berikut tepat di atas tag </body>


<script>
/*== codepelajar.com | javascript ==*/
(function(){
 setTimeout(function(){
  document.getElementById('pemisah').classList.add('loaded')
 },500)
}())
</script>


Selanjutnya sobat simpat perubahan templatenya dan lihat hasilnya dengan merefresh blog sobat. Bagaimana mudah bukan tutorialnya?

Dengan memasang script ini tidak akan berdampak pada loading blog yang semakin berat karena ini hanya trik yang menggunakan CSS dan Javascript

Demikian tutorial memasang animasi slideUp wrapper post yang bisa saya bagikan kepada sobat sekarang. Sekali lagi bila ada kesulitan jangan sungkan untuk berkomentar dibawah. Jika artikel bermanfaat jangan sungkan untuk berbagi kepada teman sobat di sosial media. Nantikan tutorial anti mainstream lainnya di Codepelajar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel