Iklan

Masukkan alamat email anda:

Thank you for Visit my blog

Rabu, 18 Januari 2012

cara membuat tulisan mengikuti pointer

suatu saat saya pernah berkunjung ke blog seseorang disana saya melihat ada tulisan yang mengikuti pointer atau kursor yang saya gerakkan. Spontan saya jadi tertarik dan langsung mencari-cari caranya di google  dengan kata kunci : cara membuat tulisan mengikuti pointer, ternyata hasilnya sangat sedikit sekali blog yang menulis artikel tentang cara membuat tulisan mengikuti pointer. Lalu saya pun mencoba keyword lainnya yaitu cara membuat tulisan mengikuti pointer di blog dan tetap saja hasil yang muncul hanya beberapa saja tetapi malah hasil yang muncul paling banyak justru adalah artikel tentang cara membuat tulisan mengikuti kursor di blog dan cara membuat tulisan mengelilingi kursor di blog. Akhirnya setelah ketemu informasi yang saya cari saya pun lantas punya perasaan ingin berbagi dengan kalian, dan membuat judul postingan ini sebagai cara membuat tulisan mengikuti pointer di blog bukan cara membuat tulisan mengikuti kursor di blog
 Bagi anda yang ingin mencoba berikut adalah langkah-langkah untuk membuat tulisan mengikuti pointer di blog :

1. sign in ke blog
2. tata letak
3. tambah gadget
4. pilih menu html/java script
5. masukkan kode ini:




<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;


/* End Optional */
/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Irfan Khoirudin";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// 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 = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// 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;
////////////////////// Stop Editing //////////////////////
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>




 6. ubah tulisan berwarna biru menjadi tulisan yang anda inginkan
 7. ubah juga kode angka berwarna merah menjadi kode warna yang anda inginkan. Pilih warna yang anda inginkan, code warna berada di kotak Hex :


8. save, dan lihat hasilnya
jika ada masalah , pertanyaan atau kesulitan silahkan uraikan di kotak komentar,,

1 komentar:

  1. bagaimana biar teks nya pas pointer tidak digerakan tidak memutar

    BalasHapus

komentar anda akan sangat membantu untuk perkembangan blog ini. Dimohon untuk berkomentar dengan bahasa yang baik dan santun. Dilarang keras berkomentar mengenai musik, nyanyian, hinaan, cacian, pelecehan agama, dan sebagainya. Dipersilahkan untuk berkomentar di luar tema postingan. terimakasih dan wassalaamu'alaykum warohmatullohi wabarokaatuh.