Tuesday, 4 February 2014

Add Text that follows Mouse Cursor Rotatably in Blogger



cursor textOne of the best way to add extra fun to your blog is add a text following the pointer. This is a script that make text following the cursor rotatably, when the course moves text follows and when cursor stop text move rotatably around it. You can see a running example on this blog post. It gives a impressive and attracted look to your blog. It enables your visitors to play on your blog and hence it decrease blog bounce rate. You can add this effect on your blog without disturbing your blog's template. So if you want to apply this great trick on your blog, start rolling your fingers on the tutorial.
Note : You can check out the Live Demo of this widget on this blog post, just slide your mouse cursor.

How to Add this:

To place it on your blog just follow these simple steps:
  • Go to Blogger Dashboard >> Layout.
  • Add A Gadget >> Html/JavaScript.
  • Paste the below given code in that and Click Save.

<style type="text/css">
/*Rotating text that follows the cursor  */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Fonts */
color: #000; /* Text Color */

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(){


// Message

var msg = "My Blogger Buzz";

// Font Size

var size = 22;

var circleY = 0.75; var circleX = 2;


// Space between each letter

var letter_spacing = 5;

// Diameter of circle

var diameter = 10;

//Rotation speed

var rotation = 0.3;

// Reaction rate

var speed = 0.3;


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>

Now, Change the red text with your desired message. You can change the text size, font, color, speed, etc.. I have marked ( green ) so you can customize it to your taste, just locate the corresponding area to make the change.

About The Author!

Abdul Basit is an enthusiastic and passionate blogger from Multan, Pakistan. He loves to blog and to share his blogging knowledge with others. Currently he is managing his blog named My Tech Blogging.
He is the co-author of MyBloggerBuzz and love to share his bright ideas on Blogging, Traffic, SEO tips on this blog.

No comments:

Post a Comment