Texto Seguindo o Cursor

Oláaaa....nesse tutorial vamos ver como fazer para adicionar um texto, frase ou qualquer palavra acompanhando o ponteiro do mouse no blog, usando um script bem simples de editar, que encontrei no Having Themes e no Code Secrets.

No Blogger, cole o código em um gadget HTML/JavaScript. No Tumblr, cole depois de <head> ou antes de </head>.

 <script language="javascript">

var text='kawaii';
var delay=40;
var Xoff=35;
var Yoff=30;
var txtw=10;
var beghtml='<font color="pink"><b>'; 
var endhtml='</b></font>'; 
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Áreas para editar:

var text='kawaii'; => mude a palavra kawaii para outra de sua preferência, tipo o nome do seu blog, seu nome, uma frase...;

var delay=40; => velocidade;

var Xoff=35; => distância com relação a esquerda;

var Yoff=30; => distância com relação ao topo;

var txtw=10; => espaço entre as letras;

var beghtml='<font color="pink"> => personaliza a cor da fonte, no caso mude pink (rosa) para a cor de sua preferência.

Você pode usar números negativos ao posicionar para esquerda ou topo. Espero que goste.

2 Comentários

♥ » Pritty « ♥26 agosto
Olá.. Amei seu blog!!!
Vamos fazer uma parceria?
Meu blog tem Imagens para Arte Digital.. Ainda não tem milhares mas, chego lá! rs
Tem tbm graficos de ponto cruz e atividades pra crianças! Ah, tem Decoupage tbm!!
Além disso, faço convites e lembrancinhas..
Me faz uma visitinha??
prittysart.blogspot.com.br

Beijos
ResponderExcluir
Respostas

Adicionar comentário

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

Reino Kawaii