Cara membuat berita berjalan dengan jquery

Teknik dalam menyajikan artikel berita agar menarik pengunjung membutuhkan pengetahuan sisi teknis dan non teknis. Dalam kesempatan ini, kita hanya mengdiskusikan sisi teknis bagaimana cara membuat artikel web dengan model penyajian berita berjalan atau yang biasa dikenal dengan newsticker.

Saat ini variasi penyajian berita berjalan terus berkembang. Kalau pada awal-awal perkembangan web tahun 2000'an sebelum muncul library seperti bootstrap dan belum lahirnya teknologi jquery, penyajian berita berjalan sering menggunakan marquee.

Namun saat ini ada banyak librari yang dapat digunakan untuk membuat sebuah berita bergerak atau berjalan secara vertikal maupun horizontal. Bahkan yang paling umum kita liat adalah penyajian berita berjalan yang disertai dengan sebuah koten yang mengandung : judul berita, tanggal publikasi, gambar serta potongan berita.

Jika anda membutuhkan tutorial bagaimana membuat sebuah berita berjalan yang dilengkapi dengan : gambar, judul, tanggal publikasi serta dilengkapi dengan potongan berita, silahkan baca tutorial:

Newsticker Bootstrap

Dalam tutorial edisi ini kita tetap akan mempelajari tentang pembuatan berita berjalan dengan hanya menampilkan judul berita saja. Kalo pada edisi sebelumnya, newsticker disajikan secara vertikal, maka pada edisi ini kita akan membuat newsticker secara horizontal (judul berita/artikel akan bergerak dari kiri ke kanan ). Teknik newsticker seperti ini paling banyak yang digunakan.

Berikut ini adalah output yang akan kita buat dalam tutorial kali ini, seperti yang ditunjukkan oleh gambar dibawah ini :



Seperti yang terlihat pada gambar.1, kita akan membuat bagian newsticker atau berita berjalan pada bagian bawah.

Untuk itu buatlah sebuah file html yang menjadi tempat akan diletakkan libari css dan js, dimana file tersebut akan menampilkan judul artikel atau judul berita yang bergerak dari kiri ke kanan. Dalam percobaan ini, kita menggunakan template pada judul sebelumnya : Newsticker Bootstrap.

Catatan : untuk file template,file librari css , js dapat anda download secara lengkap dilink Download pada bagian paling bawah.

Langkah-langkah membuat berita berjalan

1. Tambahkan file javascript pada file html (template html) anda :

<script src="assets/js/marquee.js" type="text/javascript"></script>

File marquee.js diasumsikan diletakkan dalam folder assets/js, anda dapat menyesuaikan lokasi folder yang diinginkan.




2. Kemudian, tambahkan css berikut didalam file html anda :
Bagian ini untuk membentuk style terhadap bagaimana wujudnya newsticker, termasuk mengset backgroundnya serta fontnya.

<style>
 #main-marquee .marquee{
  padding-left: 50px;
  background: #fff;
 }
 #main-marquee .links{
  color: #fff;
  text-decoration: none;
 }
 #main-marquee span a:hover{
  text-decoration: underline;
 }
 #main-marquee span{
  padding: 0px 8px;
 }
 #main-marquee .line-sticker{
  border-top: 2px solid #244f79;
  border-bottom: 2px solid #244f79;
  margin: 0px;
  position: absolute; bottom: 0px;
  height: 27px;
  left: 0px;
  position: fixed;
 }
 #main-marquee .header-sticker{
  font-family: Calibri; color: #fff;
  padding: 0px 5px;
  margin-top: 1px;
  font-weight: bold;
 }   
</style> 

3. Langkah berikutnya menambahkan judul berita
Disini kita tambahkan judul artikel yang dijadikan sebagai newsticker seperti contoh berikut :

<div  id="main-marquee">
 <div class="line-sticker"  style="background: #244f79; width: 100px; z-index: 9999997;border-right: 2px solid #244f79; ">
  <div class="header-sticker" style=" width: 100px; position: absolute; z-index: 9999998;">News Sticker</div>
   <div style="width: 0; height: 0; position: absolute; left: 100px; z-index: 9999999; border-left: 12px solid #244f79; border-top: 12px solid transparent;border-bottom: 12px solid transparent;">
   </div>
 </div>
  <div class="line-sticker" style="width: 100%; z-index: 9999996;background: #3574B1;">
   <div class="marquee" id="mycrawler" style="font-family: Calibri; color: #fff;">           
    <span>
     <a href="" class="links">
    Simulasi latihan perang bersama yang dilakukan di kapal induk yang modern bersama 5 negara yang dilangsungkan di langit.hehe..
     </a>
    </span>
            
    <span><a href="" class="links">Parade akrobatik pesawat udara dilangit yang biru,pelukismu agung.hehe.. </a></span>
    <span><a href="" class="links">Modernisasi alutista yang besar-besaran</a></span>  
   </div>
  </div>
</div>

4. Membuat judul berita dapat berjalan dari kiri ke kanan
Langkah terakhir kita memberi efek judul berita tersebut dapat berjalan ke kiri atau ke kanan dengan memanggil dari id mycrawler

<script type="text/javascript">
 marqueeInit({
 uniqueid: 'mycrawler',
 style: {
  'padding': '2px'   
 },
 inc: 5, //speed - pixel increment for each iteration of this marquee's movement
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
 moveatleast: 2,
 neutral: 150,
 savedirection: true
 });
</script>

Live Preview Download