Tutorial Dasar Pada Animasi

WAh akhirnya bisa postinglagi nich posting kalia ini mengenai ,tutorial dasar mengenai ANIMaSI ,Animasi adalah suatu gambar yang ketika disorot atau diklik mengeluarkan gayanya masing masing,jadi Animasi itu penari yach ,bukan dasar ngocak aja tuch ,langa sung aja nich tutornya :


Nich salah satu contoh animasi ,yang ketika diklik nanti kelihatan jelasa ,pada tutor ini widgetnya bisa dipasang pada postingan jadi tidak usah hawatir.
nich demonya  :










<style type="text/css">.kodokloncat{float:center; margin:0px; autowidth:0px; autoheight:0px; autoborder:none; overflow:hidden}.details{width:200px; height:300px; background:#000; color:#fff; text-align:center} #kodok-3{position:relative;}#kodok-3 img{opacity:1-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details:hover{opacity: .9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}</style><div class="kodokloncat" id="kodok-3"><img src="http://2.bp.blogspot.com/_fMCd4YHM8F4/TULY9MbKdJI/AAAAAAAAAtc/6TNwwwAvDi4/s1600/emot-pocong-by-shudai-ajlani-%2528ketawa-merem%2529.gif" /><div class="details"><img height="300" src="http://2.bp.blogspot.com/_fMCd4YHM8F4/TULY9MbKdJI/AAAAAAAAAtc/6TNwwwAvDi4/s1600/emot-pocong-by-shudai-ajlani-%2528ketawa-merem%2529.gif" width="400" /></div></div>

  • Dan nich adalagi sekarang tuch tips yang kedua adalah Memindahkan Gambar Dengan Efek Border Radius









  • Kalo mau ini scriptnya untuk kode diatas tadi,dan tutor diatas tadi menggunakan dan border dan timing masing masing Wah keren coba dech, kalo mau scribt nya ada dibawah ini, :

<style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(http://4.bp.blogspot.com/_fMCd4YHM8F4/TULZQC6EuuI/AAAAAAAAAtg/cv0ElXE5EcM/s1600/emot-pocong-by-shudai-ajlani-%2528loncat%2529.gif)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>


Jangan lupa untuk mengkopi gambar tersebut,Ingan pada awal kata saya tadi...

  • Ada lagi nich sob nich tutorial yang ketiga yang menjelaskan tentang Membuat Gambar Menghilang ,ini sebenarnya tutorial udah dibahas tapi ssaya bahas ulang supaya anda tidak bingung nanti melihatnya ini langsung aja demonya dibawah ini dan demonya ini dapat dilihat juga pada link ini ( KLik Disini ),nich demonya :







    <style type="text/css"> #waktu_demo{margin:0 auto;border:0px #aaa solid;padding:10px;}.amdhas_box {width:280px;height:200px;margin-bottom:10px;background:url(http://2.bp.blogspot.com/_fMCd4YHM8F4/TULZaKMHOTI/AAAAAAAAAtk/DKGJOIMk-PY/s1600/emot-pocong-by-shudai-ajlani-%2528love%2529.gif)}#ease.amdhas_box { -webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid; }#waktu_demo:hover .amdhas_box, #waktu_demo.hover_effect .amdhas_box{margin-left:440px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";filter: alpha(opacity=6);-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg); transform: rotate(360deg);background-color:#fff;</style><div id="waktu_demo"><div class="amdhas_box" id="ease"><div class="center"></div></div></div>

    Animasih ketiga ini menggunakan hover jadi gambarnya mudah hilang ,,,,

    Warning !tutorial ini bukan untuk disebarluaskan tapi tutorial ini saya buat untuk memotivasih anda untuk berkarya sebaik mungkin ,Dan saya mohon ketika anda membacar artikel ini saya mohon sekali lagi mohon tinggalkan komentar anda pada komentar dibawah ini,,,,

    4Coment :

    1. keren sob animasinya

      BalasHapus
    2. wakakakakak
      pocong gokil,joget-joget sendiri.
      kalo trik animasi itu gampang sih,tapi kalo dalam penggabungan css itu agak terlalu banyak code.

      BalasHapus
    3. wawww pcong takutt , komen balik yah :)) http://www.jereware.com/
      okee

      BalasHapus
    4. kereen euy..
      bikin ngakak pocongnya..
      wkwkwkkk

      BalasHapus