Headline Berita Statis (Jquery)

Ari soca tos abot pisan, ngalihkeun perhatian ngadamel catetan, bilih hilap aya kango “kokoreh” deui. Biasanya untuk membuat hiasan pada website yang akan dibuat, kita dapat menggunakan animasi slideshow yang dapat diunduh dari internet. Jquery memberikan kemudahan pada kita yang berupa plugin yang siap digunakan. Pada catatan kali ini saya akan menulis pembuatan headline berita statis dengan plugin skitter. Sebagai langkah pertama silahkan unduh core filenya disini

Adapun langkah penggunaannya sebagai berikut:

  1. Tambahkan code dibawah ini dan diletakkan sebelum </head>
    <link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
    https://code.jquery.com/jquery-2.1.1.min.js
    http://js/jquery.easing.1.3.js
    http://js/jquery.animate-colors-min.js
    http://js/jquery.skitter.min.js
  2. Setelah itu tambahkan kembali code dibawah ini sesudah code diatas dan sebelum </head>
    
    	$(document).ready(function() {
    		$(".box_skitter_large").skitter();
    	});
    
  3. Pada bagian body silahkan tambahkan perintah <ul> atau unordered list sebagai berikut
                
                   
    •                                          

      cut

                  </li>                 <li>                     <a href="#swapBlocks"><img src="images/002.jpg" width="400px" class="swapBlocks" /></a>                    

      swapBlocks

                      </li>                 <li>                     <a href="#swapBarsBack"><img src="images/003.jpg" width="400px" class="swapBarsBack" /></a>                    

      swapBarsBack

                      </li>                 <li>                     <a href="#swapBarsBack"><img src="images/004.jpg" width="400px" class="showBarsRandom" /></a>                    

      swapBarsBack

                      </li>           </ul>         </div>

CATATAN

untuk bagian <div class =”box_skitter box_skitter_large”> dapat diubah dalam bentuk yang lebih kecil dengan mengganti kata large dengan small. lebar box untuk ukuran large 800 x 300 sedangkan small 200 x 300 (pixel). perhatikan potongan code ini

<a href=”#cut”><img src=”images/001.jpg” class=”cut”

untuk class = “cut” bertujuan untuk mengatur gerak transisi antar gambar yang kita masukkan. Adapun transisi yang dapat digunakan adalah “cube”,”cubeRandom”,”block”,”cubeStop”,”cubeStopRandom”,”cubeHide”,”cubeSize”,

“swapBarsBack”,”swapBlocks”,”cut””horizontal”,”showBars”,”showBarsRandom”,”tube”,

“fade”,”fadeFour”,”paralell”,”blind”,”blindHeight”,”blindWidth”,”directionTop”,

“directionBottom”,”directionRight”,”directionLeft”,”cubeSpread”,”glassCube”,

“glassBlock”,”circles”,”circlesInside”,”circlesRotate”,”cubeShow”,”upBars”,

“downBars”,”hideBars”,”swapBars”, “swapBarsBack”,”swapBlocks”,”cut”

Gunakan pilihan transisi diatas tanpa tanda kutip

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s