faire onduler une image

faire onduler une image - HTML/CSS - Programmation

Marsh Posté le 17-10-2013 à 18:13:47    

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 !
 

Reply

Marsh Posté le 17-10-2013 à 18:13:47   

Reply

Marsh Posté le 17-10-2013 à 18:34:14    

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

Reply

Marsh Posté le 17-10-2013 à 19:18:43    

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"><!--
 you = 'creep'
 browserName = navigator.appName;
 browserVer = parseInt(navigator.appVersion);
     if (browserName == "Microsoft Internet Explorer" && browserVer <= 3) { you = 'crash'}
 var x = 0;
 var y = 0;
 var r1 = 0;
 var r2 = 0;
 
 function houle() {
  if ( you == 'creep' ) {
   window.scroll(x,y);
   r1 = r1 + 0.007;
   r2 = r2 + 0.011;
   x = 60 + 50 * Math.sin(r1) ;
   y =  60 + 50 * Math.sin(r2) ;
   setTimeout('houle()', 1);
   }
  }
 --></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
Reply

Marsh Posté le 17-10-2013 à 20:39:14    

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)

Reply

Marsh Posté le 17-10-2013 à 21:25:29    

Version plus évoluée :
 

Code :
  1. <body>
  2.  <!-- attention nous violons les droits d'auteur de l'image à défaut de violer l'auteur! -->
  3.  <img src="http://www.billets.ca/uploads/artists/justin-bieber.jpg" id="JB" alt="Justin Bieber" style="position: absolute; top: 100px; left: 0px;" />
  4.  <script type="text/javascript">
  5.   function move(amplitude, frequence, vitesse, larg, posYi, sens) {
  6.    el = document.getElementById('JB');
  7.    posX = parseInt(el.style.left);
  8.    posY = parseInt(el.style.top);
  9.    if (eval(posX+el.width) >= larg && sens == 1) {
  10.     sens = -sens;
  11.    } else if (eval(posX) <= 0 && sens == -1) {
  12.     sens = -sens;
  13.    }
  14.    posX = eval(posX+sens*vitesse);
  15.    posY = Math.round(posY + sens*amplitude*Math.cos(posX/(frequence*vitesse)));
  16.    el.style.top = posY + 'px';
  17.    el.style.left = posX + 'px';
  18.    setTimeout('move('+amplitude+', '+frequence+', '+vitesse+', '+larg+', '+posYi+', '+sens+')', 20);
  19.   }
  20.   move(6, 10, 5, document.body.clientWidth, eval(parseInt(document.getElementById('JB').style.top)), 1);
  21.  </script>
  22. </body>

Reply

Marsh Posté le 17-10-2013 à 22:16:34    

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

Reply

Marsh Posté le 17-10-2013 à 22:23:16    

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

Reply

Marsh Posté le 17-10-2013 à 22:23:51    

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.

Reply

Marsh Posté le 17-10-2013 à 22:29:08    

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.

Reply

Marsh Posté le 17-10-2013 à 22:38:53    

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
Reply

Marsh Posté le 17-10-2013 à 22:38:53   

Reply

Marsh Posté le 17-10-2013 à 23:17:18    

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 :
  1. <body>
  2.  <!-- attention nous violons les droits d'auteur de l'image à défaut de violer l'auteur! -->
  3.  <img src="http://www.billets.ca/uploads/artists/justin-bieber.jpg" id="JB" alt="Justin Bieber" style="position: absolute; top: 100px; left: 0px;" />
  4.  <script type="text/javascript">
  5.   el = document.getElementById('JB');
  6.   posYi = parseInt(el.style.top);
  7.   function move(amplitude, frequence, vitesse, larg, posY, posYi, sens, i) {
  8.    el = document.getElementById('JB');
  9.    posX = parseInt(el.style.left);
  10.    if (posX+parseInt(el.width) >= larg && sens == 1) {
  11.     sens = -sens;
  12.    } else if (posX <= 0 && sens == -1) {
  13.     sens = -sens;
  14.    }
  15.    i += sens;
  16.    posX = posX+sens*vitesse;
  17.    posY = posY + sens*amplitude*vitesse*Math.cos(i*vitesse/frequence);
  18.    posYc = Math.round(posY + sens*amplitude*vitesse*Math.cos(i*vitesse/frequence));
  19.    el.style.top = posYc + 'px';
  20.    el.style.left = posX + 'px';
  21.    setTimeout('move('+amplitude+', '+frequence+', '+vitesse+', '+larg+', '+posY+', '+posYi+', '+sens+', '+i+')', 20);
  22.   }
  23.   move(2, 50, 5, document.body.clientWidth, posYi, posYi, 1, 0);
  24.  </script>
  25. </body>


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

Reply

Marsh Posté le 17-10-2013 à 23:36:48    

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
Reply

Marsh Posté le 18-10-2013 à 09:41:39    

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

Code :
  1. <body>
  2.      <!-- attention nous violons les droits d'auteur de l'image à défaut de violer l'auteur! -->
  3.      <img src="http://www.billets.ca/uploads/artists/justin-bieber.jpg" id="JB" alt="Justin Bieber" style="position: absolute; top: 100px; left: 0px;" />
  4.      <script type="text/javascript">
  5.       el = document.getElementById('JB');
  6.       posYi = parseInt(el.style.top);
  7.       function move(amplitude, periode, vitesse, larg, posY, sens) {
  8.        el = document.getElementById('JB');
  9.        posX = parseInt(el.style.left);
  10.        if (posX+parseInt(el.width) >= larg && sens == 1) {
  11.         sens = -sens;
  12.        } else if (posX <= 0 && sens == -1) {
  13.         sens = -sens;
  14.        }
  15.        posX = posX+sens*vitesse;
  16.        posY = posY + sens*amplitude*vitesse*Math.cos(posX/periode);
  17.        posYc = Math.round(posY + sens*amplitude*vitesse*Math.cos(posX/periode));
  18.        el.style.top = posYc + 'px';
  19.        el.style.left = posX + 'px';
  20.        setTimeout('move('+amplitude+', '+periode+', '+vitesse+', '+larg+', '+posY+', '+sens+')', Math.round(60/vitesse));
  21.       }
  22.       move(2, 50, 2, document.body.clientWidth, posYi, 1);
  23.      </script>
  24.     </body>


 
Pourquoi?

Code :
  1. 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 :
  1. 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 +.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed