Tulisan Berjalan
Membuat Tulisan Berjalan Mengikuti Kursor
Cara membuat tulisan berjalan
mengikuti kursor mouse atau cara membuat tulisan bergerak mengikuti kursor.
membuat tulisan yang bisa bergerak ke atas ke bawah ke samping pokoknya dimana kursor di tempatkan maka tulisan tersebut mengikutinya dan tampilanya juga unik karena tulisanya berputar mengelilingi kursor tersebut.
efek dari tulisan berjalan mengikuti kursor ini termasuk desain blog untuk menambah ke unikan dari tampilan blog atau website, sebagai contoh dari efek tulisan berjalan mengikuti kursor seperti pada gambar di bawah ini
membuat tulisan yang bisa bergerak ke atas ke bawah ke samping pokoknya dimana kursor di tempatkan maka tulisan tersebut mengikutinya dan tampilanya juga unik karena tulisanya berputar mengelilingi kursor tersebut.
efek dari tulisan berjalan mengikuti kursor ini termasuk desain blog untuk menambah ke unikan dari tampilan blog atau website, sebagai contoh dari efek tulisan berjalan mengikuti kursor seperti pada gambar di bawah ini
Cara membuat tulisan bergerak mengikuti kursor ini juga mudah seperti postingaku yang lalu tentang Cara membuat judul blog berjalan justru ini malah semakin mudah karena pembuatanya hanya menggunakan gadged tidak harus merubah atau mengedit HTML di template blogger.
dan cara pembuatanya silahkan simak langkah-langkahnya di bawah ini
Cara membuat tulisan berjalan mengikuti kursor
1.buka blog anda melalui www.blogger.com lalu silahkan login ke akun masing-masing
2.lalu klik desain untuk menuju dashboard blogger
3.pilih tata letak lalu klik tambahkan gadged dan pilih gadged HTML/javascript, panduan gambarnya silahkan lihat gambar yang di bawah ini
4.selanjutnya kopi kode yang ada di kolom di bawah ini lalu pastekan ke dalam gadged html/javascript
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: normal;
font-family: Trebuchet MS;
color: #FF00FF;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
// =====Pengaturan Dimulai=====//
// Masukkan kalimat yang diinginkan (QUOTED STRING)
var msg = "Sandy Wicaksono";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 15;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 5;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.2;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
// =====Pengaturan Selesai=====//
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
Keterangan Tulisan warna biru yang ada dalam kode di atas :
- Tulisan FF00FF sebagai kode warna tulisan yang berjalan mengikuti kursor untuk menganti warna tulisanya silahkan buka Kode warna Html
- Tulisan jasa pembuatan website dan blog serta jasa setting blog adalah sebagai tulisan yang muncul mengikuti kursor tersebut jadi anda bisa merubah dengan tulisan yang anda ingkan
- Tulisan angka 15 sebagai font atau ukuran dari tulisan yang berjalan/bergerak mengikuti kursor tersebut dan jika tulisanya kurang besar silahkan ganti angkanya menjadi angka yang lebih kecil dari angka 15 tersebut dan begitu juga jika ukuran tulisan yang berjalan mengikuti kursornya kurang besar silahkan ganti angkanya yang lebih besar dari angka 15.
5.selanjutnya silahkan simpan gadged
HTML/javascript nya
6.selesai.
untuk melihat hasil pembuatan tulisan bergerak mengikuti kursor silahkan buka salah satu postigan blog anda
Demikian panduan dari jasa setting blog tentang Cara membuat tulisan berjalan atau bergerak mengikuti kursor , seperti yang sudah saya utarakan diatas dengan membuat tulisan bergerak mengikuti kursor maka akan menambah unik dari tampilan blog maupun website , dan jika ada kesulitan silahkan untuk berkomentar saja.
6.selesai.
untuk melihat hasil pembuatan tulisan bergerak mengikuti kursor silahkan buka salah satu postigan blog anda
Demikian panduan dari jasa setting blog tentang Cara membuat tulisan berjalan atau bergerak mengikuti kursor , seperti yang sudah saya utarakan diatas dengan membuat tulisan bergerak mengikuti kursor maka akan menambah unik dari tampilan blog maupun website , dan jika ada kesulitan silahkan untuk berkomentar saja.
