Will you mind beautifying your blog with moving texts that follows the cursor about on your blog?.
This gives your blog a new beautiful and engaging feature. Visitors with mobile devices will also see this despite the absence of the cursor. It will show up anytime they tap on any part of your blog.
This will also serve as the best Copyright protector for your blog, as its closeness to the cursor will force the cursor to copy just itself(Moving Text) without any other text from your blog.
The code is here, copy - paste it into any HTML gadget of your site, it will show up upon visits. Checkout for Customization below the code.
Below is the CSS Code to add the Beautiful Moving/Rotating Texts to your blog
<style type="text/css">
/*Rotating text that follows the cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Fonts */
color: #F83169; /* Text Color */
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">
//<![CDATA[
;(function(){
// Message
var msg = "Your Texts Here";
// Font Size
var size = 22;
var circleY = 0.75; var circleX = 2;
// Space between each letter
var letter_spacing = 5;
// Diameter of circle
var diameter = 10;
//Rotation speed
var rotation = 0.1;
// Reaction rate
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(){ // 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>
Customization
#F83169 : Replace the pink colored "Color Code" with the code of your preferred color.
Your Texts Here : There in the "Your Texts Here" , enter the text you wish the plugin should display on your site. Try making the text short and funny or educating.
SAVE the gadget, view your blog now to see that text chasing your cursor about and its so funny.
NOTE : If it fail to show on your blog, just relax your mind and forget about it, there is already a plugin on your site that doesn't support it. Share this to social medias, people love you when you're helpful.
0 comments: