Quantcast
Channel: HTML – iTechColumn
Viewing all articles
Browse latest Browse all 17

Text Following cursor in Blogger

$
0
0

In today’s tutorial I will show you how you can make text that follow cursor. Text which follows the cursor motion using JavaScript in Blogger. Although we have showed you this on blogger platform but even text cursor for tumblr can be cool thing as well. This trick is sometimes bit annoying for users because whenever they move mouse, cursor move and so does text. Text following cursor is quite simple trick that done with Javascript.

Text cursor position javascript code has been given below. This can be modified with text cursor css code. There are some other tutorial such as whale following cursor & cat following cursor.

 

 

Text Following Cursor in Blogging using Javascript

I came across a nice widget which again makes the users annoying 🙂
This widget enables the users, yourself and readers to make the welcome message follow your cursor motion.

 

Text that follows the spinning cursor for Blogger

This widget is the creation of Tim Tilton from tempermedia and the practised on dynamicdrive.

Check : Change post background in Blogger

Here is the implementation and code for Blogger usage:

 

Note: Please backup your template before proceeding with this procedure.
1. Go to Dashboard > Template > Edit HTML
2. Search for(Ctrl+F) “</head>
3. Just ABOVE that paste the following code:


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

/* Do not edit this area */
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[
/* 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(){

// Message
var msg = “Welcome to iTechColumn“;

// Font size
var size = 22;

// Determines whether circular or oval, 1 for circular and 2 for oval
var circleY = 0.75; var circleX = 2;

// Space between each letter
var letter_spacing = 5;

// Diameter of the circle
var diameter = 10;

// Rotation speed
var rotation = 0.4;

// Reaction Speed
var speed = 0.3;

////////////////////// Do not edit anything else //////////////////////

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>


4. Save the template and enjoy annoying your readers. 🙂

Customization:
1. The text in BLUE can be replaced with your welcome message.
2. The text in RED are optional and can be customized accordingly as in the comment section of the code.
3. Please do not remove the attribution from the code. This is for legal use.

Hope you enjoyed learning a new gadget today of Text following cursor in Blogger. Ciao with a new stuff again. Stay tuned.

The post Text Following cursor in Blogger appeared first on iTechColumn.


Viewing all articles
Browse latest Browse all 17