xTibia

.com
TY

[Gesior Aac] Efeitos Para Seu Website

Por tyuahoi, 15 de jul. de 2010 em Tutoriais de Websites

script
5.0 (1)
15
8.5k
tyuahoiT
15 de julho de 2010 às 20:46

Olá

 

 

Vim Trazer Um Script Para Ficar Mais Agradavel o Seu Site.

 

 

 

1º Efeito De Texto Ficar Ao Redor Da Seta Do seu Mouse.

 

Basta adicionar isso em seu <head> da layout.php

 

 

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
  Website: http://www.tempermedia.com/
  Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
  Modified Here for more flexibility and modern browser support
  Modifications as first seen in http://www.dynamicdrive.com/forums/
  username:jscheuer1 - This notice must remain for legal use
  */

;(function(){

// Your message here (QUOTED STRING)
var msg = "Real Server!";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

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>

 

Aonde Esta Escrito Real Server Voçe Muda Para A Mensagem Que Voçe Quiser.

 

Imagem De Como Ira Ficar.

 

imagemsbg.png

 

Simples Mais Util.

 

2º Efeito De Neve Em Seu Web Site

 

Acresente Isso Em layout.php

 

<script type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
 for this script and many more
*/

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=22

// Set the minimal-size of your snowflakes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

 /*
  //   * NO CONFIGURATION BELOW HERE *
*/

// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {        
   rand=Math.floor(range*Math.random())
   return rand
}

function initsnow() {
   if (ie5 || opera) {
       marginbottom = document.body.clientHeight
       marginright = document.body.clientWidth
   }
   else if (ns6) {
       marginbottom = window.innerHeight
       marginright = window.innerWidth
   }
   var snowsizerange=snowmaxsize-snowminsize
   for (i=0;i<=snowmax;i++) {
       crds[i] = 0;                      
       lftrght[i] = Math.random()*15;         
       x_mv[i] = 0.03 + Math.random()/10;
       snow[i]=document.getElementById("s"+i)
       snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
       snow[i].size=randommaker(snowsizerange)+snowminsize
       snow[i].style.fontSize=snow[i].size
       snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
       snow[i].sink=sinkspeed*snow[i].size/5
       if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
       if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
       if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
       if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
       snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
       snow[i].style.left=snow[i].posx
       snow[i].style.top=snow[i].posy
   }
   movesnow()
}

function movesnow() {
   for (i=0;i<=snowmax;i++) {
       crds[i] += x_mv[i];
       snow[i].posy+=snow[i].sink
       snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
       snow[i].style.top=snow[i].posy

       if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
           if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
           if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
           if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
           if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
           snow[i].posy=0
       }
   }
   var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
   document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
   window.onload=initsnow
}
</SCRIPT>

 

Imagem De Como Ira Ficar.

imagem2ie.png

 

 

Simples Mais Util.

Editado Julho 15 por 1tyi

felipedorgasF
15 de julho de 2010 às 21:10

em vez de apareçer a setinha, apareçe a mensagem ?

tyuahoiT
15 de julho de 2010 às 21:17

Nao Ele aparece a mensagem e a seta.

 

a seta so nao saiu porque eu tirei print e na print a seta nao sai ;D

Editado Julho 16 por 1tyi

felipedorgasF
15 de julho de 2010 às 21:25

Humm...legal e criativo, bom tutorial, aprovado :button_ok:

 

 

eu não tenho aquele quadro de ultimas informaçoes :rolleyes:

qm sabe voce não passa isso pra galera, em portugues, e sem o "database" :positive:

 

até

1tyi sempre ajudando :winksmiley02:

tyuahoiT
15 de julho de 2010 às 21:28

infelismente eu nao tenho autorizaçao para postar esse script da informaçoes do detabase.

 

o dono do script nao me autorizou a postar em outro forum :s, se nao esse script ja tava aki no xtibia.

brutpcB
16 de julho de 2010 às 00:05

Ei, 1tyi, kra so hj vc ja me ajudo umas 3x, te juro, e eu keria que voce me ajudasse +1x

 

Ali na image q vc postou com a frase rodeando a seta, mostra ali no fundo, o ultimo char criado e o TOP neh...

Eu keria sab ond tem esse script... fikei procurando e n axei nd...

 

Aguardo

tyuahoiT
16 de julho de 2010 às 00:11

Se Augum Administrador ou algo do tipome deixar postar o link do outro forum eu passo.

 

caso contrario nao posso pq n tenho autorizaçao do dono do script.

brutpcB
16 de julho de 2010 às 00:31

Aee 1tyi, nem precisa + naum flw, era so procura no google usahsuahuh, ja axei e ja ta no meu site... vlw, e outra coisa, mto bom esse script ae, vo usa!

 

 

Edited:

 

Aii, 1Tyi, eu adicionei o script dos flocos de neve... so q os flocos so apareces do lado direito, pra na vdd ele nun fica na tela do site, ele tpo cria no site , coisa mais pra la>>> e fica os flocos la..

 

~~~> Outra coisa, 1Ty1, kra no script da frase com o mouse, tem algum jeito do player, cancela, tpo ele naum ker e tira. Tem Como?

 

Aguardo,,,

Editado Julho 16 por brutpc

tyuahoiT
16 de julho de 2010 às 10:57

Adicione logo no começo o script da neve.

 

 

 

Ate Aonde eu se de web site nao tem como cancelar nao cara.

1 mês depois...
delegue123D
20 de agosto de 2010 às 19:01

@ 1tyi

 

Ei cara muito bom , valeu funcionou aki.

 

@brutpc

 

cara qual como vc pesquizo no google pra achar akele script ali do site do 1tyi ?

 

 

esse mesmo que voce tava quereno e ele nao tem permissao pra postar.

 

Valeu!

6 meses depois...
baaNisHedB
16 de fevereiro de 2011 às 02:08

Mais que mer** porque o dono do script nao deixa postar, sacanagem demais, daqui uns dias todo mundo tem esse script, e o Xtibia nao tem, a pelo amor de Deus, caras que se acham os REIS. :|

 

No mais, tutorial muito bom cara, Aprovado :button_ok:

10 meses depois...
cleitonatunesC
09 de dezembro de 2011 às 15:14

tipow tem como alterar a cor da frase?

 

tipo pois ta preto quase nao dar pra enchergar vlw!

EsquilossE
09 de dezembro de 2011 às 15:21

Belo tutorial maninho :D

1 mês depois...
thiagozika157T
29 de janeiro de 2012 às 10:59

òtimo eu ja fiz e funcionou perfeitamente.

2 meses depois...
lsprserverL
27 de março de 2012 às 02:34

tipow tem como alterar a cor da frase?

 

tipo pois ta preto quase nao dar pra enchergar vlw!

 

Procura por:

color: #000;

e coloca assim:

color: #ff0000;

 

e para mudar a cor e so mudar o codigo...

para saber as cores use esse link.

http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm