Realizzazione Gif animata

**Jigen** · 25-05-2008, 10:37

Salve a tutti,

vorrei realizzare delle icone che al passaggio del mouse effettuino un movimento da destra verso sinistra, proprio come quelle utilizzate in questo sito.
So perfettamente che si tratta di una gallery in flash ma sono sicuro che è possibile ottenere un effetto del genere con anche con un'animazione gif.

Qualcuno sai aiutarmi con questa mia richiesta?

Ho già effettuato delle prove con "Animation Shop" ma il movimento dell'icona non viene fluido.

Grazie.

**rebelia** · 25-05-2008, 11:35

le miniature delle foto, intendi? forse potresti provare con ajax, piu' che con una gif animata: ti sposto in js

**Jigen** · 25-05-2008, 12:13

Si, mi riferivo alle mini-icone della gallery.

Qualcuno da indicarmi come poter ottenere lo stesso effetto senza far ricorso la flash?

Grazie.

**br1** · 26-05-2008, 10:40

E' solo un esperimento... prendilo come esempio

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE> &copy; br1 - 2008 </TITLE>
<style>
.sh {text-align:right;display:block;width:100px;margin:3px;padding-left:20px;}
.sh img {width:80px;height:60px;border:0;}
</style>
<script>
var o = new Array();
var d = new Array();
var t;

function dentro(obj) {
	var i = o.length;
	o[i] = obj;
	d[i] = "i";
	if(!t) {
		t = setTimeout("muovi()",50)
	}
}
function fuori(obj) {
	var r = false;
	for(var i=0;i<o.length;i++) {
		if(o[i]==obj) {
			d[i] = "o";
			r = true;
		}
	}
	if(!r) {
		i = o.length;
		o[i] = obj;
		d[i] = "o";
	}
	if(!t) {
		t = setTimeout("muovi()",50);
	}
}
function muovi() {
	var r = false;
	for(var i=0;i<o.length;i++) {
		if(o[i]) {
			
			l = parseInt(o[i].style.paddingRight); if(isNaN(l)) l=0;
			
			if(d[i]=="i" && l<20) {
				l+=2;
				o[i].style.paddingRight = String(l) + "px";
				o[i].style.paddingLeft = String(20-l) + "px";
				r = true;
			} 
			
			if(d[i]=="o" && l>0) {
				l-=2;
				o[i].style.paddingRight = String(l) + "px";
				o[i].style.paddingLeft = String(20-l) + "px";
				r = true;
			} 
		}
	}

	if(r) {
		t = setTimeout("muovi()",10)
	} else {
		t = null;
		while(o.length>0) { o.pop(); d.pop(); } 
	}

}
</script>
</HEAD>
<BODY>
[img]#[/img]
[img]#[/img]
[img]#[/img]
[img]#[/img]
</BODY>
</HTML>

ciao

EDIT: fatto correzione per FF

**Jigen** · 26-05-2008, 12:31

Non so come ringraziarti Br1, lo proverò subito e ti farò sapere.

Ancora 1000 grazie.

**br1** · 26-05-2008, 17:30

Jigen ha scritto un messaggio il giorno 26-05-2008 17:21:
Br1 volevo ringraziarti per lo script che hai realizzato, è proprio quello che serviva a me.

Ho da porgerti una domanda: sarebbe possibile (in maniera rapida, senza cioè lavorarci su molto) far muovere le ipotetiche mini-icone dall'alto verso il basso invece che da destra verso sinistra?

Grazie ancora per tutto.

Buona giornata.

Le modifiche sono minime... avresti anche potuto cimentarti

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE> &copy; br1 - 2008 </TITLE>
<style>
.sh {vertical-align:top;display:block;width:60px;height:80px;margin:3px;padding-bottom:20px;}
.sh img {width:80px;height:60px;border:0;}
</style>
<script>
var o = new Array();
var d = new Array();
var t;

function dentro(obj) {
	var i = o.length;
	o[i] = obj;
	d[i] = "i";
	if(!t) {
		t = setTimeout("muovi()",50)
	}
}
function fuori(obj) {
	var r = false;
	for(var i=0;i<o.length;i++) {
		if(o[i]==obj) {
			d[i] = "o";
			r = true;
		}
	}
	if(!r) {
		i = o.length;
		o[i] = obj;
		d[i] = "o";
	}
	if(!t) {
		t = setTimeout("muovi()",50);
	}
}
function muovi() {
	var r = false;
	for(var i=0;i<o.length;i++) {
		if(o[i]) {
			
			l = parseInt(o[i].style.paddingTop); if(isNaN(l)) l=0;
			
			if(d[i]=="i" && l<20) {
				l+=2;
				o[i].style.paddingTop = String(l) + "px";
				o[i].style.paddingBottom = String(20-l) + "px";
				r = true;
			} 
			
			if(d[i]=="o" && l>0) {
				l-=2;
				o[i].style.paddingTop = String(l) + "px";
				o[i].style.paddingBottom = String(20-l) + "px";
				r = true;
			} 
		}
	}

	if(r) {
		t = setTimeout("muovi()",10)
	} else {
		t = null;
		while(o.length>0) { o.pop(); d.pop(); } 
	}

}
</script>
</HEAD>
<BODY>
[img]#[/img]
[img]#[/img]
[img]#[/img]
[img]#[/img]
</BODY>
</HTML>

ciao

**Jigen** · 26-05-2008, 20:50

Bhè che dire...........GRAZIE!

Sei stato davvero molto molto gentile.

Ti sono riconoscente.

Discussione: Realizzazione Gif animata

Strumenti discussione

Ricerca discussione

Visualizza

Realizzazione Gif animata

Permessi di invio