Circular Moving Text Using JQuery

Introduction

In this article we are going to create a stunning circular text motion effect with jQuery. We will be using the jQuery to animate a circular text movement on our web page. The idea is to have a rounded text with the movement of the cursor in our web page.

Description

This article shows how to make a textual message circle around your mouse cursor that follows the mouse cursor around using this DHTML script.

Step 1 : First we have to create a web Application.

  • Go to Visual Studio 2010.
  • New--> And select the web Application.
  • Give it's a name whatever you want.
  • Click OK.

img1.gif

Step 2 : Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the Project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

img2.gif
img3.gif

Step 4 : In this step we will see how to add style sheet code. Whenever we write the style sheet code you have to be careful that it is written inside the <style></style> code and you have to place it inside the head section.

Style Code

<style type="text/css">
        #outerCircleText
        {
            font-style: italic;
            font-weight: bold;
            font-family: 'comic sans ms' , verdana, arial;
            color: #68228B;
            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
>

 Step 5 : In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

img4.gif

Step 6 : Let us see the script code which you have to add inside the<script></script> and will be placed either in the head section or body section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 7 : In this step we have to write the jQuery code which is given below.

<script type="text/javascript">
        (function () {
            var msg = "Wecome to Csharpcorner.com!";
            var size = 24;
            var circleY = 0.75; var circleX = 2;
            var letter_spacing = 5;
            var diameter = 10;
            var rotation = 0.4;
            var speed = 0.3;
            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 () {
    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
>

Step 8 : In this step we will see the complete code of the Default2.aspx page which is given below.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<
title> Simple jQuery text Animation</title
>
<style type="text/css">
        #outerCircleText
        {
            font-style: italic;
            font-weight: bold;
            font-family: 'comic sans ms' , verdana, arial;
            color: #68228B;
            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" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
        (function () {
            var msg = "Wecome to Csharpcorner.com!";
            var size = 24;
            var circleY = 0.75; var circleX = 2;
            var letter_spacing = 5;
            var diameter = 10;
            var rotation = 0.4;
            var speed = 0.3;
            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 () {
    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
>
</head>
<
body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form
>
</body>
</
html>

Step 9 : In this step we are going to run the Default2.aspx page by pressing F5.

img5.gif

Now your text is moving along your cursor and in the end the text is moving in the circle form when you stop the cursor movement. 

img6.gif

img7.gif

Resources