Trik Komputer: Put Effect Loader using Yummi-Loader

Melihat preloader sebelum halaman terbuka secara utuh itu mah sudah biasa bro! Tapi bagaimana jika mencoba efek loader bergaya yummi! Yummi-loader adalah tidak lebih dari sebuah LESS file sederhana dengan beberapa CSS3 animasi. Pemakaiannya hanya menambahkan kelas 'off' pada elemen body template dan menggantinya dengan $(window).load() or $(document).ready() events Begitulah kira-kira penjelasan singkat mengenai Yummi loader. Explanation gaul version is menambahkan efek animasi memakai CSS3 yang dituliskan secara acak, di tambah dengan sedikit snippet jquery untuk menghidupkannya :D

Ramuan yang mesti disiapkan adalah

Hostingkan atau tulis kode CSS hasil download. Di dalam kode CSS yummi loader sudah terbuat 19 kode CSS animasi. Dengan menggunakan variabel transition-delay:; yg berbeda-beda maka terciptalah efek muncul telat gimana gitooo.

Cari tagging <body> sisipkan class off di dalamnya sehingga menjadi<body class='off'>Letakkan secuil snippet jQuery di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
var $body = $('body');
    $(window).load(function() {
    $body.toggleClass('on off');
$('.on_off').click(function() { // This extra toggle for all
    $body.toggleClass('on off');
          setTimeout(function() {
    $body.toggleClass('on off');
         }, 3500)
    }); // Until here
});
//]]>
</script>

Perhatikan script yg diberi tulisan // This extra toggle for all dan // Until here Itu merupakan script ekstra untuk tombol, jika sobat mau memasangnya. Jika tidak pasang, tidak usah pakek script tersebut (delete ajah)

Pemasangan markup pada syntax HTML harus berlainan nilai CSS animasinya. Basic use<div class="inner fadein scaleInv anim_1"> YOUR CONTENT </div>Kalau sobat mau memberikan efek yummi loader pada sebuah konten, ingat pada file CSS terdapat 19 gaya animasi! Gunakan ke-19 variasi tersebut agar terlihat menarik.
Contoh penulisan syntax markup...

<div class="inner fadein scaleInv anim_1">
 <h2 class="fadein scaleInv anim_19">Yummi-loader</h3>
  <h3 class="fadein scaleInv anim_7">Less//Css classes for fancy page load</h2>
 <section class="fadein scaleInv anim_5">
  <h4 class="fadein scaleInv anim_16">Hello Yummi!</h4>
<a class="fadein scaleInv anim_17" href="">Download this project as a .zip file</a>
<br/>
<a class="fadein scaleInv anim_18" id="pret" href="">Download this project as a tar.gz file</a><br/>
 <h1 class="on_off fadein scaleInv anim_6" style="cursor: pointer;">Try it CLICK!!!</h1>
  <img class="fadein scaleInv anim_11" src="" />
 <a id="forkme_banner" href="" class="fadein scaleInv anim_9">View on GitHub</a>
 </section>
</div>

Contoh simple

Semoga bermanfaat :)
github.com/ktty1220/jquery.lively-layout
Happy coding \m/

Trik Komputer

Selasa, 22 Oktober 2013

Put Effect Loader using Yummi-Loader

Tidak ada komentar:

Posting Komentar