Cara Buat Efek Gambar Image Postingan Melayang Dari Bawah Ke Atas (SlideInUp) Saat pertama kali postingan dibuka – saya akan sedikit membagikan tutorial bagaimana cara membuat gambar pada postingan atau artikel melayang dari bawah keatas saat pertama kali postingan dibuka.
Untuk cara yang akan saya bagikan saat ini bisa di praktekan di template blogger biasa maupun yang sudah valid amp. Karena cara ini kita tidak menggunakan Js melainkan hanya menggunakan CSS saja. Sebenarnya css inipun tidak hanya untuk image atau gambar saja melainkan untuk semua <div> yang ingin kita buat melayang dari bawah ke atas. Css ini di sebut dengan SlideInUp. Penasaran bagaimana penampakan nya? Berikut dibawah ini Demo atau Resultnya.
Atau Demo lebih jelasnya silahkan anda lihat diblog saya disini.
Jika anda berminat silahkan ikuti cara step by step di bawah ini.
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<div class='image-wrapper'>
<div class='post-firstimage slideInUp'>
<b:if cond='data:blog.postImageUrl'>
<div class='firstimage'>
<amp-img expr:alt='data:post.title' expr:src='data:blog.postImageUrl' height='393' layout='responsive' width='769'/>
</div>
<b:else/>
<div class='firstimage'>
<amp-img expr:alt='data:post.title' expr:title='data:post.title' height='393' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQkEVDXMovwbrPO5zhfZK0bXqUKnnc4uMvP6GrdJLGQJr_KMgmB5acbprVX77829x06YshC_MNQomqfg4UCjOPjyLmZXKA1KWOLaifwP73wh7uuIiKXSt9EX6j1FNqDaCVIDHEwj3-e52/s1600/amphtml-thumbnail2.jpg' width='769'/>
</div>
</b:if>
</div>
</div>
Tapi Perlu anda ketahui lagi cara ini bukan hanya untuk gambar saja melainkan untuk semua <div> yang ingin kita buat melayang.
Mungkin hanya itu saja untuk artikel Cara Buat Efek Gambar Postingan Melayang Dari Bawah Ke Atas (SlideInUp) Semoga bermanfaat.
Sourch Kode : https://codepen.io/anujashukla/pen/yeyvpx
Tinggalkan komentar