Mouse Trailer Animato

Dopo aver cercato per il mio sito internet qualche animazione carina mi sono imbattuto su questo script:
www.dynamicdrive.com/dynamicindex13/trailortext.htm
Lo testai su una pagina esterna, tentai di renderlo compatibile con Browser che non fossero IE, e, solo successivamente, lo ottimizzai per renderlo funzionante anche sul nostro circuito, qui un esempio.

Bando alle storielle, passiamo alla spiegazione, ho deciso di semplificare al massimo l'utilizzo :sisi:

Cominciamo dal primo codice CSS da inserire in Amministrazione > Gestione Codici HTML > In cima al Forum:

HTML

<style>.spanstyle {position: absolute; visibility: visible; top: -50px; left: 0; font-family: "segoe ui", Verdana, Arial; z-index: 9999; font-weight: bold}</style>

E', come detto prima, un semplice codice CSS, vi consiglio di non modificarlo, tuttavia se non conoscete bene il linguaggio e volete provare comunque ad effettuare una modifica qui una splendida guida.

Passo due, il codice Javascript:

SPOILER (click to view)

HTML

<script type="text/javascript">
/*
Cursor Trailer Text- By Peter Gehrig (http://www.24fun.ch/)
Grazie a Dynamic Drive: http://www.dynamicdrive.com/dynamicindex13/trailortext.htm
Ottimizzato e reso compatibile con Forumfree da DarkStyle (C) 2009 http://ffmagazine.forumfree.net
*/
var x,y; var flag = 0;

var offPos = 10; //Distanza dal cursore
var trailerSpeed = 'medium'; //'slow', 'medium', 'fast' o valore numerico - Velocità del fade
// Il tuo messaggio in array (Forum free : var trailerMessage = new Array("F", "o", "r", "u", "m", " ", "F", "r", "e", "e"); )
var trailerMessage = new Array("t", "e", "s", "t", "o");

switch(trailerSpeed) {case 'medium':trailerSpeed=30;break; case 'slow':trailerSpeed=50;break; case 'fast':trailerSpeed=10;break;} var ind = new function() {this.i = 0;}; var xpos = new Array(); for (i = 0; i < trailerMessage.length; i++) {ind.i = i; xpos[ind.i] = -50;} var ypos = new Array(); for (i = 0; i < trailerMessage.length; i++) {ind.i = i; ypos[ind.i] = -50;}var IE = document.all ? true : false; if (!IE) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = function(e) { if (IE) {x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop;} else {x = e.pageX; y = e.pageY;} x = x < 0 ? 0 : x; y = y < 0 ? 0 : y; flag = 1;}; function makesnake() {if (flag == 1 && IE) {for (i = trailerMessage.length-1; i >= 1; i--) {ind.i = i; xpos[ind.i] = xpos[ind.i - 1] + offPos; ypos[ind.i] = ypos[ind.i - 1];} xpos[0] = x + offPos; ypos[0] = y + offPos; for (i = 0; i < trailerMessage.length; i++) {ind.i = i; var thisspan = document.getElementById('span' + ind.i).style; thisspan.posLeft = xpos[ind.i]; thisspan.posTop = ypos[ind.i];}} else if (flag == 1 && !IE) {for (i = (trailerMessage.length - 1); i >= 1; i--) {ind.i = i; xpos[ind.i] = xpos[ind.i - 1] + offPos; ypos[ind.i] = ypos[ind.i - 1];} xpos[0] = x + offPos; ypos[0] = y + offPos; for (i = 0; i < trailerMessage.length; i++) {ind.i = i; var thisspan = document.getElementById('span' + ind.i); thisspan.style.left = xpos[ind.i]; thisspan.style.top = ypos[ind.i];}} var timer = setTimeout("makesnake()", trailerSpeed);}for (i=0;i<=trailerMessage.length-1;i++) {ind.i = i; trailerMessage[ind.i] = trailerMessage[ind.i] == ' ' ? ' ' : trailerMessage[ind.i]; document.write('<span id="span' + ind.i + '" class="spanstyle">' + trailerMessage[ind.i] + '</span>');} window.onload = makesnake(); var body = document.body ? document.body : (document.activeElement ? document.activeElement : 0); if(body) {body.style.overflowX = 'hidden'; body.style.overflowY = 'auto'; body.style.minHeight = 0; body.style.width = '100%';}
</script>

Entriamo nel cuore dello script, cioè lo script :asd:

Le variabili da modificare sono le seguenti:

CODICE

var offPos = 10; //Distanza dal cursore

Sostituite 10 con la distanza del testo dal cursore espressa in pixel;

CODICE

var trailerSpeed = 'medium'; //'slow', 'medium', 'fast' o valore numerico - Velocità del fade

Questa variabile, invece, regola la velocità dell'animazione, potete sostituire il valore 'medium' con:
'fast': Veloce;
'slow': Lento;
O con un valore numerico, stando sempre attenti ad anteporre le virgolette.
In questo caso siete liberissimi di lasciare le variabili come da configurazione consigliata.

L'ultima modifica da effettuare è la seguente, cioè scegliere il messaggio da visualizzare, e scriverlo in un modo diverso. La variabile ovviamente è questa:

CODICE

var trailerMessage = new Array("t", "e", "s", "t", "o");

E, come detto prima, la modifica è diversa dato che dovrete racchiudere ogni lettera in un array, esempio:
La parola Ciao diventerà: var trailerMessage = new Array("C", "i", "a", "o");
La parola Ciao Mondo diventerà: var trailerMessage = new Array("C", "i", "a", "o", " ", "M", "o", "n", "d", "o");
La parola Forumfree diventerà: var trailerMessage = new Array("F", "o", "r", "u", "m", "f", "r", "e", "e");
E così via dicendo, in generale dovete spezzettare le lettere di una parola e racchiuderle tra virgolette, successivamente separarle con una virgola.

Per i contestatori:
So che era possibile scrivere un normale messaggio e usare trailerMessage.split("") ma evidentemente i troppi filtri di forumfree non lo permettono.

Vi offro la possibilità di utilizzare il Tool ufficiale del Forum che permetterà di effettuare ancora più personalizzazioni:
http://scripts.ffmagazine.net/?act=trailer

Termini di utilizzo

Lo script è liberamente modificabile a patto che si lascino i crediti all'autore e al Forum;
La sola guida, comprensiva quindi anche di script, è ridistribuibile su altri forum senza autorizzazione a patto di conservarne l'integrità e senza alcuna alterazione dei contenuti e dei crediti.

Crediti e Ringraziamenti

Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum, qualora desideriate utilizzare questo script (non devono essere rimossi, invece, i crediti inseriti nello script).

E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:

HTML

<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><strong>Guida e Script realizzati da <a href="http://ffmagazine.forumfree.net/?act=Profile&MID=3408796">~ DarkStyle</a> del <a title="Mouse Trailer Animato" href="http://ffmagazine.forumfree.net/?t=43610147"><b>ForumFree Magazine</b></a></strong>.</div>

Esempio visualizzazione (varia da forum in forum):

Guida e Script realizzati da ~ DarkStyle del ForumFree Magazine.

Voglio altresì ringraziare lo Staff e gli Utenti di questo Forum per tutto l'aiuto datomi da quand'ero un semplice Utente ad oggi. Grazie!

Edited by [Antonio] - 12/8/2010, 14:44