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.






Postar um comentário

2 Comentários

  1. 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
    1. Obrigada <3 As vagas para parcerias e afiliações estão completas, mas com certeza visito sim seu blog e seja sempre bem-vinda aqui ok :3
      Sucesso pra vc!!!
      Bjus...

      Excluir

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

up