28 grudnia 2010

42. Neonowy tekst

Aby nieco urozmaicić nasz profil w Chomikuj.pl, pokażę Wam jak wykonać neonowy tekst bez wykorzystania technologii flash. Najpierw efekt:






Sam skrypt nie jest trudny i łatwo go konfigurować. Nawet mniej doświadczeni użytkownicy powinni sobie spokojnie poradzić. Wstawiamy zatem nasz kod do swojego profilu:



kliknij w przycisk HTML



pojawi się okno do którego wstaw taki oto skrypt:

UWAGA!: Aby prawidłowo skopiować kod z okienka poniżej, skorzystaj z opcji "view plain".
<!--TEKST NEON 11111111111111111111111111111111111111111111111111111111111-->
<span style="font-size: 12pt;font-weight:bold;">  //rozmiar oraz styl czcionki
<script type="text/javascript"><!--
//Neon Lights Text II by G.P.F. - gpf@beta-cc.de
//Modyfikacje by chomik adam-as
//Więcej porad na http://poradnikchomika.blogspot.com

//Poniżej konfiguracja naszego skryptu

var message="Oto nasz neonowy tekst z kolorami :-)"
var neonbasecolor="black"    //zmiana bazowego koloru tekstu
var neontextcolor="red"      //zmiana koloru tekstu dla 1 efektu
var neontextcolor2="fuchsia" //zmiana koloru tekstu dla 2 efektu
var flashspeed=100           // prędkość w milisekundach
var flashingletters=10       // liczba liter w neonie
var flashingletters2=10      // liczba liter w neonie dla drugiego efektu (0- wyłączony)
var flashpause=1             // pauza po przejściu neona

//Koniec konfiguracji skryptu

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor


if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
// --></script>
</span>
<!--KONIEC TEKSTU NEON1111111111111111111111111111111111111111111111111111-->
Po wklejeniu naciskamy "Aktualizuj"



zapisujemy zmiany



i gotowe :-)

Zobacz dokładnie jak wygląda konfiguracja skryptu w górnej jego części. Na samej górze ustalasz rozmiar, oraz styl czcionki. To ta linia:

<span style="font-size: 12pt;font-weight:bold;">

Cyfra 12 to wielkość Twojej czcionki. Im wyższa liczba tym większa czcionka.
Przy każdej konfigurowalnej linii kodu, postawiłem niewidoczny dla przeglądarek komentarz, aby każdy wiedział gdzie może dokonywać zmian. Nie bój się eksperymentować zmieniając kolory i prędkości działania skryptu. Paleta podstawowych kolorów RGB znajduje się tutaj. Łatwiej Ci będzie zmieniać kolory. Skrypt obsługuje również kolory zapisane w postaci hexagonalnej (HEX). Jeżeli chcesz zatem użyć czarnego koloru możesz wpisać:

black

ale ten sam kolor możesz również zapisać tak:

#000000

Skrypt akceptuje obie formy.
Miłej zabawy!

0 komentarze:

Prześlij komentarz