6.4.14
31
Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi - Magic, mungkin ini sempat terlintas dipikiran kita saat kagum melihat aksi pesulap yang dapat menghilangkan dan memunculkan kembali suatu obyek dari box yang nyata terlihat kosong, namun jika kita sadari semuanya itu adalah hanya sebuah trik murni dengan kecepatan fisik si pesulap. Kesempatan kali ini trik itu akan saya deklarasikan dalam sebuah permainan di blog tentunya dengan CSS3 Animasi.

Kali ini saya mengambil tema bola sebagai obyeknya, agar bola dapat memantul, saya menggunakan CSS3 Animasi seperti ini animation: jump 1s infinite, agar pantulan bola selalu pada posisi satu titik, saya gunakan CSS position:fixed. Nah..!! elemen obyek sudah terbentuk yang kurang lebih seperti terlihat pada gambar dibawah ini

Animasi ball image


Kode Terkait -


cursor: pointer, saya gunakan sebagai perintah untuk menghilangkan dan memunculkan kembali obyek tersebut. Detailnya saat klik ditahan pada obyek maka secara perlahan obyek akan menghilang, dan sebaliknya saat klik dilepas obyek akan muncul, dan hasilnya dapat Anda lihat pada DEMO SHOW dibawah ini



DEMO SHOW



Element HTML


<div id="ballWrapper">
   <div id="ball">
   </div>
        <div id="ballShadow">

          . . .

        </div>
</div>


CSS3 Animasi

/* Animations */
@-webkit-keyframes jump {
 0% {top: 0;
  -webkit-animation-timing-function: ease-in;
 }
 40% {}
 50% {top: 140px;
  height: 140px;
  -webkit-animation-timing-function: ease-out;
 }
 55% {top: 160px; height: 120px; border-radius: 70px / 60px;
  -webkit-animation-timing-function: ease-in;}
 65% {top: 120px; height: 140px; border-radius: 70px;
  -webkit-animation-timing-function: ease-out;}
 95% {
  top: 0; 
  -webkit-animation-timing-function: ease-in;
 }
 100% {top: 0;
  -webkit-animation-timing-function: ease-in;
 }
}
/* Isi dengan value yang sama */
@-moz-keyframes jump {...}
@-o-keyframes jump {...}
@-ms-keyframes jump {...}
@keyframes jump {...}

@-webkit-keyframes shrink {
 0% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  -webkit-animation-timing-function: ease-in;
 }
 50% {
  bottom: 30px;
  margin-left: -10px;
  width: 20px;
  height: 5px;
  background: rgba(20, 20, 20, .3);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
  border-radius: 20px / 20px;
  -webkit-animation-timing-function: ease-out;
 }
 100% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  -webkit-animation-timing-function: ease-in;
 }
}
/* Isi dengan value yang sama */
@-moz-keyframes shrink {...}
@-o-keyframes shrink {...}
@-ms-keyframes shrink {...}
@keyframes shrink {...}



Elemen CSS

#ballWrapper {
 width: 140px;
 height: 300px;
 position: fixed;
 left: 50%;
 top: 35%;
 margin-left: -70px;
 z-index: 100;
 transform: scale(1);
 transition: all 5s linear 0s;
 cursor: pointer;
}

#ballWrapper:active {
 transform: scale(0);
 cursor: pointer;
}

#ball {
 width: 140px;
 height: 140px;
 border-radius: 70px;
 background: rgb(187,187,187);

#ball::after {
 content: "";
 width: 80px;
 height: 40px;
 position: absolute;
 left: 30px;
 top: 10px;
 z-index: 10;
}

#ballShadow {
 position: absolute;
 left: 50%;
 bottom: 0;
 z-index: 10;
 margin-left: -30px;
 width: 60px;
 height: 75px;
 background: rgba(20, 20, 20, .1);
 box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
 border-radius: 30px / 40px;
 transform: scaleY(.3);
 animation: shrink 1s infinite;
}


Tolong...!! dibantu ya, prok..koprok..koprok..jadi apa? hayoo..!! mungkin inilah yang dilakukan pesulap pak. TARNO kali ya, hehe..!!

Semoga bermanfaat. Happy blogging

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

31 komentar

  1. siip..demonya sdh sy coba, benar2 menghilang bola tsb

    BalasHapus
  2. kerenz mbak,,_
    saya kira cuma pak tarno doang yang bisa sulap.
    ternyata mbak devi lebih jago :-) :-) :-)

    BalasHapus
    Balasan
    1. hahaha.. belajar CSS sekalian belajar sulap, jadikan double job, :)

      Hapus
  3. wah... selalu ada trik yia bos, saya bener2 salut sama sibos

    BalasHapus
    Balasan
    1. hmmm...cuma lagi belajar kok sob,

      Hapus
  4. tanpa basa - basi langsung di praktekkan
    biar blogg makin mantap
    thanks mbak :))

    BalasHapus
  5. tanpa basa - basi langsung di praktekkan
    biar blogg makin mantap
    thanks mbak :))

    BalasHapus
  6. Keren banget ehh jadinya mbak :D

    BalasHapus
  7. wuih cara baru nih,saya coba dulu mbak

    BalasHapus
    Balasan
    1. merangkai kode-kodenya juga butuh 2 hari mas baru kelar,hehe,
      sebenarnya mau coba kehebatan yang terkandung pada CSS3 ini, objek diatas juga bisa kita ganti dengan teks, namun kalau teks tidak bisa memantul, saya lagi mencari kodenya, kalau ada coba sharing ya mas,,kali aja ada gitu
      hehe

      Hapus
  8. paling mumet dah kalo udah berurusan sama CSS , tapi seru juga kalo berhasil rasanya seneng wkwkkkk bolanya kok bisa ngilang gitu ya keren" , makasih triknya :)

    BalasHapus
    Balasan
    1. itulah sebuah tantangan mas, ngacak-ngacak kode sehingga tahu dimana letak posisinya yang benar, mau menciptakan apa, hmm..kreatif dikit gitu mas,hehehe..

      Hapus
    2. haha iya mbak , kalo seorang blogger ya harus kreatif dong mbak , asal nggak kreatif myolomh konten oranglain hahaa :D

      Hapus
  9. saya blm sempet liat demonya mbak
    soale gi bw pke hp..
    nanti kalo udah sampe di rumah..sy coba liat lagi :)

    BalasHapus
  10. keren ya mbak bolanya bisa mengecil dan kemudian hilang jika diklik terus, lalu muncul lagi jika klik dilepas :D ijin belajar mbak agar ngerti css3 animasi :)

    BalasHapus
    Balasan
    1. perintah kursor mbak yang saya padukan dengan efek animasi, jadi tanpa format gambar gif, kita bisa membuat gambar dengan CSS berformat gif, kurang lebih semacam itulah,hehe

      Hapus
  11. waaah kok bisa begitu ya. di tahan ama kursor, malah menghilang.. keren mbak/!!

    BalasHapus
    Balasan
    1. ini salah satu kehebatan yang bisa tercipta dari penggunaan CSS-level 3, namun cukup ribet juga nyusun kodenya,hehe..saya juga lagi belajar kok mas

      Hapus
  12. cakep nihhhh Mbaknya...
    lucu Mbak kayak game jadul yang namanya "bounce" :D

    BalasHapus
  13. wiih..keren.hebat,aku angkat tangan kalau soal seperti ini,melihat kodenya saja sudah pusing

    BalasHapus
  14. yang ini benar-benar saya tunggu dan akan saya terapkan langsung, makasih buat tutorialnya ya mbak (h)

    BalasHapus
  15. Mbak Devi keren banget bisa ngerangkai kodenya.. :D

    BalasHapus
  16. ternyata keren yah :) disimpan dulu kodenya :)

    BalasHapus
  17. keren kak share nya..
    Btw blog nya juga keren nih tampilannya :D

    BalasHapus
  18. demonya asyik,..tapi saya agak kurang paham dengan CSS...keep happy blogging always,,salam dari Makassar :-)

    BalasHapus
  19. Mahir css mba...manteb
    Wah nggak telaten saya :)

    BalasHapus
  20. ngomong-ngomong cssnya valid css3 gak ya ?

    BalasHapus
  21. kode CSS diatas sudah valid CSS3 mas, yang tidak bisa dilakukan oleh CSS level 2, karena untuk pembacaan peramban browser saya juga gunakan webkit pada CSS-nya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK