faire onduler une image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : faire onduler une image

krn59

Bonjour

Petite nouvelle sur le site, je cherche à faire bouger une image de haut en bas, avec un léger effet ondulatoire (par exemple comme quand vous êtes sur des vagues).
Le mieux est de le faire en jscript mais je suis une bille là-dedans... (html et css, ça va).
Autre chose qui complique : je suis dans un éditeur Joomla. Je n'ai pas accès au <head> de la page pour y mettre le script. Par contre je peux créer un .htm que j'appelle dans une iframe (de largeur 560. Pour l'image, je peux faire n'importe quelle taille, jusqu'à 560 de large).
L'image doit bouger dès l'onload (qui peut être sur la balise img ou dans le cas où je fais un .htm je peux le mettre sur la balise body).

Si vous pouvez me donner un coup de pouce pour faire ce script (et sans vouloir abuser, en me le commentant pour que je comprenne et sache le refaire !)... Là je n'arrive à rien et j'ai passé des heures déjà dessus...
Un grand merci d'avance !

Publicité

MaybeEijOrNot

but someone at least

C'est l'image qui se déplace ou c'est l'image qui se déforme?

krn59

L'image qui se déplace. Elle monte, redescend, monte, redescend.

J'ai trouvé un code source qui fait exactement ce que je veux ici : http://www.bagadoo.tm.fr/murbal2/i_val.htm
Bon là il l'a mis sur tout le body, mais c'est pareil pour moi.
Par contre je ne pige pas pourquoi il a 2 fois la balise html et body par exemple. La 2e fois il n'a pas de balise <head> mais il la ferme. Et au niveau code ça ne m'a pas l'air super académique...
J'ai fait un ménage dedans, ça donne ça, mais ça ne marche plus...

<html>
<head>
<title>Mal de mer</title>
<script language="JavaScript"></script></HEAD>

<body onLoad="houle()">
<P align="center"><IMG SRC="http://www.uptosail.com/images/stories/sante/jeuneskippermoteur.jpg" width="560" height="372" align="bottom"></p>
</body>
</html>

Message édité par krn59 le 17-10-2013 à 19:58:28

krn59

Bon, j'ai réussi à le faire marcher. C'était dans les dimensions que ça n'allait pas car il faut que l'image soit plus haute que l'écran si j'ai bien compris.
Cela dit, je ne pige pas du tout la syntaxe générale de sa page et je ne sais pas si ça fonctionne bien sur d'autres navigateurs... (suis sur Chrome/PC)

MaybeEijOrNot

but someone at least

Version plus évoluée :

Code :

<body>
<img src="http://www.billets.ca/uploads/artists/justin-bieber.jpg" id="JB" alt="Justin Bieber" style="position: absolute; top: 100px; left: 0px;" />
<script type="text/javascript">
function move(amplitude, frequence, vitesse, larg, posYi, sens) {
el = document.getElementById('JB');
posX = parseInt(el.style.left);
posY = parseInt(el.style.top);
if (eval(posX+el.width) >= larg && sens == 1) {
sens = -sens;
} else if (eval(posX) <= 0 && sens == -1) {
sens = -sens;
}
posX = eval(posX+sens*vitesse);
posY = Math.round(posY + sens*amplitude*Math.cos(posX/(frequence*vitesse)));
el.style.top = posY + 'px';
el.style.left = posX + 'px';
setTimeout('move('+amplitude+', '+frequence+', '+vitesse+', '+larg+', '+posYi+', '+sens+')', 20);
}
move(6, 10, 5, document.body.clientWidth, eval(parseInt(document.getElementById('JB').style.top)), 1);
</script>
</body>

krn59

Je vais essayer tout de suite. Merci !
Mdr pour les commentaires sur l'image...

krn59

Génial ! Effectivement ça le fait encore plus que mon précédent code !

Je pense qu'un nombre considérable d'écrans vont être salis par des vomissements... loool

MaybeEijOrNot

but someone at least

En fait ça dépend ce que tu veux, maintenant j'ai un doute, moi je croyais que l'image devait se déplacer de haut en bas et de gauche à droite. Dans le lien que tu as donné elle se déplace que de bas en haut, donc je ne voyais pas le côte "ondulatoire" mais ce que tu appelles "ondulatoire" c'est peut-être la vitesse du mouvement en fait.

krn59

Non, en fait tu avais bien compris. Pour l'autre exemple, c'était effectivement seulement limité de bas en haut mais là c'est encore mieux comme ça.
Je suis en train de changer les paramètres pour que ça soit bien dans le cadre imparti et que ça fasse moins rapide du coup.

gatsu35

Blablaté par Harko

Mais c'est quoi cet eval dégueulasse de cochon, mais pourquoi tu fous des eval partout ?
Si c'est pour convertir une string en number parseInt est là pour ça

---------------
Blablaté par Harko

Publicité

MaybeEijOrNot

but someone at least

Oui les eval sont de mauvais restes, le problème c'est qu'on récupère des '100px' mais le parseInt fait son job.

Enfin bref, à basse vitesse mieux vaut utiliser ça comme code :

Code :

<body>
<img src="http://www.billets.ca/uploads/artists/justin-bieber.jpg" id="JB" alt="Justin Bieber" style="position: absolute; top: 100px; left: 0px;" />
<script type="text/javascript">
el = document.getElementById('JB');
posYi = parseInt(el.style.top);
function move(amplitude, frequence, vitesse, larg, posY, posYi, sens, i) {
el = document.getElementById('JB');
posX = parseInt(el.style.left);
if (posX+parseInt(el.width) >= larg && sens == 1) {
sens = -sens;
} else if (posX <= 0 && sens == -1) {
sens = -sens;
}
i += sens;
posX = posX+sens*vitesse;
posY = posY + sens*amplitude*vitesse*Math.cos(i*vitesse/frequence);
posYc = Math.round(posY + sens*amplitude*vitesse*Math.cos(i*vitesse/frequence));
el.style.top = posYc + 'px';
el.style.left = posX + 'px';
setTimeout('move('+amplitude+', '+frequence+', '+vitesse+', '+larg+', '+posY+', '+posYi+', '+sens+', '+i+')', 20);
}
move(2, 50, 5, document.body.clientWidth, posYi, posYi, 1, 0);
</script>
</body>

EDIT : j'ai amélioré aussi la gestion de la vitesse.

krn59

Je vais retester ça. Un grand merci en tout cas !
Est-ce que ça va marcher sur tous les navigateurs ? C'est le côté chiant de JScript, la compatibilité... Et j'ai toujours galéré pour piger comment on reconnaît les navigateurs, ce qui passe ou ne passe pas selon les versions, etc...

Pourquoi vous mettez des + dans les paramètres ? "+amplitude+" par exemple

Message édité par krn59 le 17-10-2013 à 23:39:06

MaybeEijOrNot

but someone at least

Un peu fatigué hier soir, j'ai nettoyé un peu ça :

Code :

<body>
<img src="http://www.billets.ca/uploads/artists/justin-bieber.jpg" id="JB" alt="Justin Bieber" style="position: absolute; top: 100px; left: 0px;" />
<script type="text/javascript">
el = document.getElementById('JB');
posYi = parseInt(el.style.top);
function move(amplitude, periode, vitesse, larg, posY, sens) {
el = document.getElementById('JB');
posX = parseInt(el.style.left);
if (posX+parseInt(el.width) >= larg && sens == 1) {
sens = -sens;
} else if (posX <= 0 && sens == -1) {
sens = -sens;
}
posX = posX+sens*vitesse;
posY = posY + sens*amplitude*vitesse*Math.cos(posX/periode);
posYc = Math.round(posY + sens*amplitude*vitesse*Math.cos(posX/periode));
el.style.top = posYc + 'px';
el.style.left = posX + 'px';
setTimeout('move('+amplitude+', '+periode+', '+vitesse+', '+larg+', '+posY+', '+sens+')', Math.round(60/vitesse));
}
move(2, 50, 2, document.body.clientWidth, posYi, 1);
</script>
</body>

Pourquoi?

Code :

setTimeout('move('+amplitude+', '+periode+', '+vitesse+', '+larg+', '+posY+', '+sens+')', Math.round(60/vitesse));

Tout simplement car setTimeout() prend 2 paramètres : setTimeout(string action, int temps). La fonction appelée est donc passée en string mais si j'écris :

Code :

setTimeout('move(amplitude, periode, vitesse, larg, posY, sens)', Math.round(60/vitesse));

Mes variables ne sont pas reconnues en tant que variables mais en tant que strings.
Du coup je découpe ma chaine, et je concatène mes variables à la chaine à l'aide du +.

FORUM HardWare.fr

Programmation

HTML/CSS

faire onduler une image

Sujets relatifs
Probléme IMAGE pour mon site	convertir un fichier image raw en format lisible
enregistrer image dans BDD	css mettre image en fond d’écran sur tout la page
Cadre ( image ) sous une autre.	image php mysql
Agrandissement d'une image au passage de la souris	probleme d'insersion d'image
matlab image processing toolbox : redressement d'image	Comment charger une image d'une base de données
Plus de sujets relatifs à : faire onduler une image

Page générée en 0.111 secondes