It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 21 August 2012
Adding a beautiful effect or style to your website can make it more beautiful. In the following code, a text follows the mouse and if the mouse stops at a point and stays, the text also stays at that point. In this case, the text starts from the right side of the mouse. Usually short texts are placed to the right side of the pointer. This beautiful effect alone can attract more audiences to your website and you can write your favorite text instead of the default text.
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
#outerCircleText {
font-style: italic;
font-weight: bold;
color: #000080;
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>
; (function () {
var msg = "Javascript";
var size = 24;
var circleY = 0; var circleX = 1.5;
var letter_spacing = 5;
var diameter = 12;
var rotation = 0;
var speed = 0.5;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.20), 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 = '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><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!