Mouse Trailer Animato
Dopo aver cercato per il mio sito internet qualche animazione carina mi sono imbattuto su questo script:
http://www.dynamicdrive.com/dynamicindex13/trailortext.htmE' molto carino, tuttavia alla prima prova presentava seri problemi di compatibilità con i browsers gecko based (Mozilla, Opera, Safari, ...), inizialmente ho scartato la possibilità di utilizzarlo, successivamente, in un momento libero ho provato a migliorarlo, riuscendoci.
Lo script era perfettamente funzionante, ma credevo che ancora qualcosa si potesse fare, ragion per cui mi impegnai e l'ho resi compatibile
anche con questo circuito, come da
esempio 
Bando alle storielle, passiamo alla spiegazione, ho deciso di semplificare al massimo l'utilizzo
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:
HTML
<script type="text/javascript">
/*
Cursor Trailer Text- By Peter Gehrig (http://www.24fun.ch/)
Thanks to Dynamic Drive: http://www.dynamicdrive.com/dynamicindex13/trailortext.htm
***************************************************************************************************
Edited by DarkStyle / Modificato da DarkStyle
Made compatible with Forumfree by DarkStyle / Reso compatibile con Forumfree da DarkStyle
Made compatible with gecko browsers (Mozilla, Opera, ...) by DarkStyle / Reso compatibile con i browsers gecko (Mozilla, Opera, ...) 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
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=trailerTermini 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):
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 ~ DarkStyle - 23/10/2009, 18:07
Group: Caporedattore
AOP #ffmag ] ~ [ 
