Add Floating Animated Circle Text Following Mouse Pointer
Add Floating Animated Circle Text Following Mouse Pointer
Floating animated text can be use for any kinds of instruction
or can be add welcome message like Thanks for visiting our Blog or Welcome to
my Blog. However this is popular system for welcoming visitors to a Blog. In
this tutorial I have brought to you an animated floating text widget that will
work like charm. After applying this trick on Blogger site whenever you move
your mouse pointer then a floating text will follow your mouse pointer. And you
can change the message with your own word.
This widget
is really amazing and your Blog visitors will feel good by watching this
dancing text moving towards the mouse pointer. So please follow the below steps
to add this widget in your Blogger Site.
Step 1 Log in to your Blogger Account and Go to
your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget" then
select "HTML/JavaScript" Widget.
Step 4 Now Copy the below code and Paste it in
"HTML/JavaScript" Gadget.
<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 by www.bloggerspice.com =====//// Enter the desired sentencevar msg = "Welcome To BloggerSpice.com";// 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 rotation = 0.2;var speed = 0.3;// ===== Script Finish by www.bloggerspice.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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>
Step 5 Now hit the Save button.
Customization
- Replace Welcome To BloggerSpice.com with your own message.
- Change the color: #008BDB; code for altering text color. You can get the color code from our Color picker.
Hope your blog visitors
will enjoy by seeing this effect. For further help feel free to write me. And
stay tunes for more exciting widget. Thank you.
Post a Comment