Add Flying Animated Text Below Mouse Pointer In Blogger

Flying letters is a cool agency to larn attending of visitors.It is truly a script that is added earlier closing trunk inwards template.today nosotros volition run across how to add together animated message behind mouse .you tin add together whatever flight text letter, welcome complaint or whatever notification.like you lot tin add together whatever wishing animated text on particular day.when you lot movement mouse cursor these missive of the alphabet movement behind cursor with awesome animation effect.It moves similar wave.
Random post service widget for blogger

why to add together this widget

This widget is not compulsory but it increase the beauty of weblog as well as grab eye of viewer because it looks that text is moving behind mouse pointer.Also i want to say you lot a novel widget for blogger which too increase beauty as well as help to increase to a greater extent than click.
Recent post service widget for blogger

How to add together flight letters below mouse cursor inwards blogger

Step1:login to blogger describe concern human relationship as well as larn to your blog

Step2:Go to layout as well as Add gadget of HTML/Javascript

Paste the given code at that spot as well as salve 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 agency size for calculating dimensions
// Set to let on of desired pixels font size (decimal as well as negative numbers non allowed)
var size = 25;
// Set both to 1 for apparently circle, ready ane of them to ii for oval
// Other numbers & decimals tin convey interesting effects, snuff it along these depression (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces betwixt letters
// (decimals allowed, non negative numbers)
var letter_spacing = 5;
var diameter = 5;
// Rotation speed, ready it negative if you lot want it to spin clockwise (decimals allowed)
var speed = 0.3;
var rotation = 0.2;
// ===== Script Finish yesteryear   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 - twenty - 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 higher upward code supersede welcome text amongst your text you lot want to appear on your blog.

visit you lot weblog to confirm that animated letters appear on your weblog acre moving cursor.

To alter color of text  change #008BDB in higher upward code amongst your color code.

Here at that spot is few color code

green #9acd32
blue  #3c69ff
red  #d73a31

Also Add fashionable search box inwards your blog
I promise i piece of occupation fine on your blog.Enjoy animated flight missive of the alphabet inwards blogger if you lot convey whatever problem, you lot tin contact me i volition endeavour my best to cook your problem.Also i would similar to postulate heed you lot idea as well as suggestion.

Bagikan Artikel ini