Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Grafica Messaggio di testo fluttuante
Postato da webmaster il Tuesday, 07 March @ 08:00:00 CET
Contributo di webmaster

Questo script crea un effetto grafico di sicuro impatto sul visitatore. Consente di visualizzare un messaggio testuale che fluttua da sinistra verso destra, seguendo un movimento ondulatorio.

Poichè il codice è piuttosto lungo, procederemo salvandolo in un file esterno, che nel nostro caso chiameremo "sinescroll.js".

Vediamo il codice:

<!-- INIZIO CODICE -->

var initialx, initialy, scrolltext;
var frame = 0, frame2 = 0.5;
var amplitude1 = 50, amplitude2 = 30;
var offset = 0.2, speed = 0.2, speed2 = 0.35;
var offset2 = 0.6;
var scrollspeed = 6;
var charwidth = 30;

var twopi = Math.PI * 2;
var chracters, position, numvisible, nextchar, firstchar;
var skipsteps = 1;
var delaytimer = 0;
var interval;

function sinescroll (x, y, value, number_of_chars){
scrolltext = new String(value);
initialx = x;
initialy = y;
numvisible = number_of_chars;
nextchar = numvisible;
firstchar = 0;

characters = new Array(numvisible);
position = initialx;
for (var i = 0; i < numvisible; i++) {
document.write('<DIV ID="character" STYLE="position:absolute;top:',
initialy, ';left:-10000',
';width=', charwidth, ';height=30;" ><p class=scroll>',
scrolltext.charAt(i), '</p></DIV>');
}
}

function step (){
frame += speed;
frame2 += speed2;
if (delaytimer > 0)
{
delaytimer--;
}
else
{
position -= scrollspeed;
}

if (position < (initialx - charwidth)){
while (scrolltext.charAt(nextchar) == '|')
{
delaytimer += 90;
nextchar++;
}

characters[firstchar].innerHTML = '<p class=scroll>' + scrolltext.charAt(nextchar) + '</p>';
nextchar++;

if (nextchar >= scrolltext.length)
{
nextchar = 0;
}

position += charwidth;
frame += offset;
frame2 += offset2;

firstchar++;

if (firstchar >= numvisible)
{
firstchar = 0;
}
}

if (frame > twopi) frame -= twopi;
if (frame2 > twopi) frame2 -= twopi;

var angle = frame;
var angle2 = frame2;
var pos = position;

for (var i=firstchar; i < numvisible; i++)
{
characters[i].style.left = pos;
characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
angle += offset;
angle2 += offset2;
pos += charwidth;
}

for (var i=0; i < firstchar; i++)
{
characters[i].style.left = pos;
characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
angle += offset;
angle2 += offset2;
pos += charwidth;
}
}
function start ()
{
if (!document.all)
return

characters = document.all.item('character');
interval = window.setInterval("step();", 20);
}

function stop ()
{
if (!document.all)
return
if (interval)
clearInterval(interval);
}
window.onload=start
window.onunload=stop

if (document.all)
sinescroll(30, 100, "messaggio da visualizzare", 15);

<!-- FINE CODICE -->

Il testo del messaggio va inserito nell'ultima riga, all'interno dell'istruzione sinescroll.

sinescroll(30, 100, "messaggio da visualizzare", 15); Per visualizzare il messaggio nella pagina, basta richiamare il file javascript con il codice seguente:

<script language="JavaScript1.2">
if (document.all)
document.write('<script src="sinescroll.js"></script>')
</script>



 
Links Correlati
· Indice Grafica
· Inoltre Grafica
· News by webmaster


Articolo più letto relativo a Grafica:
Immagine che si illumina al passaggio del mouse

Valutazione Articolo
Average Score: 4
Voti: 4


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Grafica





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.05 Secondi

Theme by

© Oceanoweb