Far muovere un'immagine

scegli un altro forum

Indietro Ricarica Avanti

Autore

Discussione

blinkshow87
Utente di HTML.it

Registrato il: Oct 2011

Provenienza:

Messaggi: 89

ICQ:

MSN:

Skype:

Far muovere un'immagine

Salve,
io vorrei far muovere di qualche centimetro un'immagine dopo il caricamento della pagina.

Praticamente è una colomba (immagine in png) e vorrei che si muovesse giusto di qualche cm, non di più.

Mi potete consigliare qualcosa? Anche un plugin jQuery sarebbe perfetto!!

Grazie a tutti

Segnala ad un moderatore | IP: Collegato | Permalink

16-05-2012 14:56

Clicca qui per inviare all'utente blinkshow87 un messaggio privato

Visita l'homepage dell'utente blinkshow87

Visualizza ulteriori messaggi scritti dall'utente blinkshow87

Aggiungi l'utente blinkshow87 alla tua lista degli utenti amici

m4rko80
Utente di HTML.it

Registrato il: Aug 2008

Provenienza:

Messaggi: 1386

ICQ :

MSN :

Skype : a richiesta

http://docs.jquery.com/UI/Effects/Bounce

Ci sono piu' effetti se interessa..

Per usarli devi scaricarti jqeury piu' i file degli effetti se necessario

Segnala ad un moderatore | IP: Collegato | Permalink

16-05-2012 16:06

Clicca qui per inviare all'utente m4rko80 un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente m4rko80

Aggiungi l'utente m4rko80 alla tua lista degli utenti amici

blinkshow87
Utente di HTML.it

Registrato il: Oct 2011

Provenienza:

Messaggi: 89

ICQ :

MSN :

Skype :

Gentilissimo m4rko80, li provo subito e spero di risolvere.

Grazie mille

Segnala ad un moderatore | IP: Collegato | Permalink

16-05-2012 16:31

Enzaccio
Utente di HTML.it

Registrato il: Apr 2009

Provenienza:

Messaggi: 439

ICQ :

MSN :

Skype :

Poi occorrerà arrestare la motion con un if-statement
codice:

<head>
<script>

var laterale = 0;

function daEseguire() {
 document.getElementById('loElemento').style.marginLeft = laterale + "px";
 laterale = laterale + 2;
 setTimeout('daEseguire();', 200);
}

</script>

</head>
<body onload="daEseguire()">

<img id="loElemento" src="">

</body>

In setTimeout('daEseguire();', 200) 200 sono millisecondi, vale a dire il timer "attacca" dopo due decimi di secondo, e così la funzione ri-chiama l' esecuzione di stessa; il primo "attacco" viene dato dal gestore d' evento ONLOAD associato al BODY.

Quindi giocando su questo valore e sullo step d' incremento (+ 2) della var laterale puoi variare l' effetto visivo.

Bisogna anche tener conto di come la IMG è posizionata nel tuo layout; agire sullo style.marginLeft non è l' unica via possibile ...

Ultima modifica ad opera dell'utente Enzaccio il 17-05-2012 alle 14:43

Segnala ad un moderatore | IP: Collegato | Permalink

17-05-2012 14:39

Clicca qui per inviare all'utente Enzaccio un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente Enzaccio

Aggiungi l'utente Enzaccio alla tua lista degli utenti amici

blinkshow87
Utente di HTML.it

Registrato il: Oct 2011

Provenienza:

Messaggi: 89

ICQ :

MSN :

Skype :

per Enzaccio, molte grazie per il tuo chiarimento, ora provo e spero vada tutto bene!!

Segnala ad un moderatore | IP: Collegato | Permalink

17-05-2012 15:09

blinkshow87
Utente di HTML.it

Registrato il: Oct 2011

Provenienza:

Messaggi: 89

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da Enzaccio
Poi occorrerà arrestare la motion con un if-statement
codice:

<head>
<script>

var laterale = 0;

function daEseguire() {
 document.getElementById('loElemento').style.marginLeft = laterale + "px";
 laterale = laterale + 2;
 setTimeout('daEseguire();', 200);
}

</script>

</head>
<body onload="daEseguire()">

<img id="loElemento" src="">

</body>

ho fatto come da te suggerito e funziona, ma il movimento è scattoso, non lineare.
C'è qualche soluzione?

Segnala ad un moderatore | IP: Collegato | Permalink

21-05-2012 17:25

cavicchiandrea
Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro

Registrato il: Aug 2001

Provenienza: Bologna

Messaggi: 24195

ICQ :

MSN :

Skype :

@blinkshow87 segui il consiglio m4rko80 usa una libreria volere eseguire animazioni in javascript "puro", sarà più complesso e avrai un risultato peggiore, senza contare la compatibilità dei vari browser.
Se l'animazione non è complessa vedi anche animate

__________________
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui

Segnala ad un moderatore | IP: Collegato | Permalink