Add Floating Animated Circle Text Following Mouse Pointer

Add Floating Animated Circle Text Following Mouse Pointer
animated widget

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. 
Go Up