Minggu, 23 Desember 2012

Browse » Home » , » cara membuat animasi scroll teks atau gambar bergerak ke atas

cara membuat animasi scroll teks atau gambar bergerak ke atas

Diposting oleh di
Selamat malam agan-agan sekalian, kali ini saya akan berbagi trik membuat animasi scroll teks atau gambar berjalan naik keatas dan akan terlihat menarik, teks ini juga bisa dimanfaatkan untuk membuat link daftar isi yang bergerak ke atas dan tentunya akan lebih menarik jika daftar isi tidak bergerak atau statis; baiklah langsung saja ke tutornya;
Langkah2 membuat animasi scroll teks atau gambar naik ke atas;
  1. Login ke dashboard blogger Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke menu Template >> Edit HTML, dan centang expand widget 
  4. Backup dulu template anda sebelum melakukan editing.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini tepat dibawah <body>
Code:
<title>Backspace Teks scroll Naik</title>
<style type="text/css">
#backspace{
position: relative;
width: 200px;
height: 200px;
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var delayb4scroll=2000 //delai sebellum berjalan (dalam millidetik)
var kecepatan=2 //kecepatan jalan
var pause=1 //Pause marquee onMousever (0=tidak. 1=ya)?
var copykecepatan=kecepatan
var kecepatanpause=(pause==0)? copykecepatan: 0
var tinggi=''
function scrollberjalan(){
if (parseInt(garis_berjalan.style.top)>(tinggi*(-1)+8))
garis_berjalan.style.top=parseInt(garis_berjalan.style.top)-copykecepatan+"px"
else
garis_berjalan.style.top=parseInt(tinggikotak)+8+"px"
}
function inisialisasi(){
garis_berjalan=document.getElementById("vjalan")
garis_berjalan.style.top=0
tinggikotak=document.getElementById("isi").offsetHeight
tinggi=garis_berjalan.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //Jika Opera atau Netscape 7x
garis_berjalan.style.height=tinggikotak+"px"
garis_berjalan.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollberjalan()",30)', delayb4scroll)
}
if (window.menambahEventListener)
window.menambahEventListener("load", inisialisasi, false)
else if (window.menambahEvent)
window.menambahEvent("onload", inisialisasi)
else if (document.getElementById)
window.onload=inisialisasi
</script>

  • Save template

  • Lalu masuk ke Tataletak >> Add Widget >> Javascript/HTML, masukan kode dibawah ini

<div id="backspace" onMouseover="copykecepatan=kecepatanpause" onMouseout="copykecepatan=kecepatan">
<div id="vjalan" style="position: absolute; width: 98%;">
<h4><a href="http://natureabg.blogspot.com">BACKSPACE</a></h4>
cara membuat teks/gambar bergerak ke atas
<h4>MySQL</h4>
MySQL adalah merupakan sistem manajemen database yang bersifat relational
<h4>PHP</h4>
PHP sebagai sebuah server-side embedded script language
</div>
</div>
  • lalu Save
Keterangan:
- Silahkan agan gantik teks yang berwarna biru dengan teks atau gambar yang agan suka
- Untuk lebar dan tinggi silahkan agan sesuaikan sendiri, codenya ada di dalam spoiler

SEMOGA BERMANFAAT YA



"Watch your thoughts; they become words. Watch your words; they become actions. Watch your actions; they become habits. Watch your habits; they become character. Watch your character; it becomes your destiny." LaoTzu
Label: ,
Share this article

3 komentar:

Langganan: Posting Komentar (Atom)
 
Copyright © 2014 Clickme More • All Rights Reserved.
Clickme More | Template Design by BTDesigner • Powered by Blogger
back to top