Search Blog








Add Flying Animated Text Below Mouse Pointer In Blogger

Flying letters is a cool way to get attention of visitors.It is actually a script that is added before closing body in template.today we will see how to add animated message behind mouse .you can add any flying text letter, welcome note or any notification.like you can add any wishing animated text on special day.when you move mouse cursor these letter move behind cursor with awesome animation effect.It moves like wave.
Random post widget for blogger


adding animated letter

why to add this widget

This widget is not compulsory but it increase the beauty of blog and catch eye of viewer because it looks that text is moving behind mouse pointer.Also i want to tell you a new widget for blogger which also increase beauty and help to increase more click.
Recent post widget for blogger

How to add flying letters below mouse cursor in blogger

Step1:login to blogger account and go to your blog

Step2:Go to layout and Add gadget of HTML/Javascript

Paste the given code there and save the gadget.


<!--flying text widget start-->
<style type='text/css'>
#animlekha {
font-style: italic;
font-weight: normal;
font-family: 'Oswald', sans-serif;
color: #008BDB;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#animlekha div {position: relative;}
#animlekha div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
// ===== Script Start  =====//
// Enter the desired sentence
var msg = "Welcome text";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;
// 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;
var diameter = 5;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var speed = 0.3;
var rotation = 0.2;
// ===== Script Finish by   http://5gblogger.blogspot.com  =====//
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 = 'animlekha'; 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>
<!--flying text widget ends-->


Note: In the above code replace welcome text with your text you want to appear on your blog.

visit you blog to confirm that animated letters appear on your blog while moving cursor.

To change color of text  change #008BDB in above code with your color code.

Here there is few color code


green #9acd32
blue  #3c69ff
red  #d73a31



Also Add stylish search box in your blog
I hope i work fine on your blog.Enjoy animated flying letter in blogger if you have any problem, you can contact me i will try my best to fix your problem.Also i would like to hear you thought and suggestion.

2 comments:

  1. This will be a new addition to my work. I am a freelancer and creativity is the game in my work. Thank you for feeding me in with this.

    ReplyDelete

IconIconIconFollow Me on Pinterest
Blog Widget by LinkWithin