Membuat widget teks berjalan menggunakan CSS dan JavaScript

Teks Berjalan atau Running Text berfungsi untuk menyampaikan pengumuman yang cukup penting namun singkat kepada pengunjung di blog.

Biasanya pengumuman dalam Running Text berisi kurang dari 100 karakter sebab jika lebih maka pengunjung tidak akan fokus ke artikel atau justru malah membuat kesal karena mereka harus menunggu kata-kata lain yang masih tersembunyi dapat dibaca. Bahkan apabila hal itu terjadi maka kemungkinan pengumuman tersebut akan diabaikan.

Tak hanya digunakan sebagai pengumuman namun teknik Running Text juga sering digunakan untuk menampilkan widget postingan, baik itu postingan terbaru maupun postingan terpopuler seperti yang digunakan oleh media berita seperti CNN Internasional dan lainnya.

Baik, di sini Blogizty tak hanya memberikan scriptnya saja melainkan juga dengan cara kerjanya supaya kalian bisa belajar, memodifikasi atau bahkan membuatnya sendiri berdasarkan script yang ada.

Cara kerja

Widget Running Text ini hanya menggunakan CSS dan JavaScript tanpa tambahan HTML secara manual sehingga kita tidak perlu menambah ataupun mengubah struktur HTML apapun di dalam template.

Cara kerjanya yaitu JavaScript meng-generate elemen baru untuk kemudian ditempatkan di bagian bawah salah satu elemen HTML di mana elemen HTML untuk ditempatkannya elemen baru ini boleh kita pilih sendiri dengan cara memodifikasi script JavaScript.

Catatan

JavaScript sudah dioptimalkan berdasarkan saran dari Developer Opera supaya proses eksekusi lebih cepat dan juga menggunakan ES5 sehingga kompatibel untuk banyak browser lawas walaupun Blogizty tidak mengetesnya. Namun ini dapat dipastikan bekerja dengan baik saat diakses menggunakan Chrome dan Firefox Android 4.2 bahkan Safari 7.

Seperti yang terlihat bahwa, baik script CSS maupun JavaScript menggunakan script manual atau script yang disematkan secara internal sehingga ini tidak mengganggu kecepatan blog dibandingkan script yang dimuat dari sumber eksternal.

Script CSS

Salin kode CSS di bawah ini untuk kemudian ditempelkan di area CSS di dalam template Blogger atau boleh juga di atas atau sebelum tag penutup b:skin.

.notify {
background:#b3d4fc;
position:relative;
width:100%;
height:28px;
overflow:hidden;
margin:0 auto 30px;
padding:0
}
.notify .notext {
background:red;
min-width:520px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
padding:5px 0;
font-size:15px;
animation:runningtext 25s linear .01s infinite;-webkit-animation:runningtext 25s linear .01s infinite;-moz-animation:runningtext 25s linear .01s infinite
}
.notify .notext::-webkit-scrollbar {display:none}
@keyframes runningtext{0%{transform:translate(100%,0)}25%{transform:translate(50%,0)}50%{transform:translate(0,0)}75%{transform:translate(-50%,0)}100%{transform:translate(-100%,0)}}
@-webkit-keyframes runningtext{0%{-webkit-transform:translate(100%,0)}25%{-webkit-transform:translate(50%,0)}50%{-webkit-transform:translate(0,0)}75%{-webkit-transform:translate(-50%,0)}100%{-webkit-transform:translate(-100%,0)}}
@-moz-keyframes runningtext{0%{-moz-transform:translate(100%,0)}25%{-moz-transform:translate(50%,0)}50%{-moz-transform:translate(0,0)}75%{-moz-transform:translate(-50%,0)}100%{-moz-transform:translate(-100%,0)}}

Script JavaScript

Sedangkan untuk kode JavaScript ini harus ditempelkan di atas kode </body> atau </body>

<script>
//<![CDATA[
var elm=document.getElementsByClassName('nav-element')[0],
notf=document.createElement('div'),
notx=document.createElement('span');
notf.className='notify';
notx.className='notext';
notx.innerHTML='Pengumuman, ini adalah teks yang harus diganti dengan teks kamu sendiri';
notf.appendChild(notx);elm.parentNode.insertBefore(notf,elm.nextSibling);
//]]>
</script>

Modifikasi JavaScript

• Seperti penjelasan di atas bahwa kita perlu menentukan letak di mana widget Running Text ini akan ditempatkan.

Sebagai contoh, apabila widget akan diletakkan di bawah navigasi header maka kita harus mencari nama attribute class atau id dari elemen tersebut. Misalnya, jika elemen navigasi header memiliki className nav-atas yang tampak seperti ini :

<nav class="nav-atas">
  Kode lainnya
  <nav>

Atau

<div class="nav-atas">
  Kode lainnya
  <div>

Maka ubah nav-element pada script JavaScript menjadi nav-atas sehingga hasilnya akan menjadi seperti ini :

var elm=document.getElementsByClassName('nav-atas')[0],

Namun apabila elemen tersebut memiliki attribute id yang tampak seperti ini :

<nav id="nav-atas">
  Kode lainnya
  <nav>

Atau

<div id="nav-atas">
  Kode lainnya
  <div>

Maka yang perlu diubah adalah attribute dan metodenya sehingga menjadi seperti ini :

var elm=document.getElementById('nav-atas'),

• Selanjutnya yang perlu diubah adalah teks yang terdapat pada variabel notx. Silakan ganti tulisan Pengumuman,... tersebut dengan tulisan yang dikehendaki namun harus disertai dengan mengubah property min-width pada pengaturan CSS yang dijelaskan di bagian modifikasi CSS.

Modifikasi CSS

• Selector .notify adalah parent atau wrapper yang bertindak sebagai pembungkus utama elemen sehingga property background perlu disesuaikan oleh kamu sendiri.

• Selector .notify .notext adalah wrapper dari teks di mana property min-width perlu disesuaikan dengan panjang teks. Sementara untuk background:red hanya merupakan ciri atau penanda supaya kita lebih mudah mengaturnya.

Pengaturan ini diperlukan supaya ketika teks dilihat di tampilan browser layar kecil maka teks tidak akan terpotong dan langkahnya pun akan berjalan dengan baik.

Untuk menyesuaikannya yaitu dengan cara sebagai berikut :

1. Pertama, kita perlu mengatur teks pada JavaScript.

2. Setelah itu, baru kita mengatur min-width. Sebagai acuan bahwa 100 karakter teks akan pas pada sekitar 750px.

3. Lihat hasilnya terlebih dahulu pada tampilan layar handphone dengan memeriksa teks, apakah bagian akhir terpotong? Jika iya maka itu artinya property min-width perlu ditambah nilainya menjadi lebih besar. Namun apabila sebaliknya yaitu terdapat banyak ruang kosong di antara akhir teks dengan ujung wrapper teks yang memiliki background merah maka itu artinya min-width perlu dikurangi nilainya.

4. Apabila sudah sesuai maka background:red boleh diubah nilainya dengan warna lain atau bahkan dihapus juga boleh.

Sementara animation adalah property untuk dapat membuat teks berjalan sehingga apabila kita ingin mengatur kecepatan langkah teks maka kita boleh mengatur waktu menjadi selain dari 25s di mana s ini artinya adalah second atau detik. Sementara untuk nilai .01s tidak perlu diubah sebab itu adalah nilai delay yang dapat mengatasi bug di Safari 7.

Akan tetapi perlu diingat bahwa kecepatan langkah teks mungkin akan berbeda antara tampilan di desktop dan di handphone di mana pada tampilan desktop akan sedikit lebih cepat namun ini juga tergantung dari mesin render browser pada masing-masing perangkat.

© Blogizty