11540 sujets

JavaScript, DOM et API Web HTML5

Jquery -> Plugin Parallax avec inertie

Bonjour à tous et à toute!


Je viens à vous car je suis à la recherche d'un plugin. Je suis entrain de bosser sur un site de bijoux fantaisie, et sur la home, nous avons un mur de bijoux (la cliente en rajoutera au fur et à mesure). En gros ça donne à peu près ça:

http://img42.imageshack.us/img42/8728/chulachawebsite0000home.jpg

L'idée est d'animer un petit peu le tout. J'ai pas vraiment de directive quant à "l'animation". J'avais penser, soit à du hover avec un peu de mouvement (je suis allé voir du côté de JQfloat, Parallax, Dynamic Shadows etc.). Le but étant de donner un truc assez réaliste.

J'aimerais donc que lorsqu'on passe la souris sur un élément, celui-ci bouge légèrement dans la direction de la souris. Le parallax semble la solution, non? Mais ce que j'aimerais c'est une impression d'inertie, que le parallax ne s'arrête pas dés qu'on est plus en hover. Qu'il continue un peu sa course, voire qu'il rebondisse contre sa frontière imaginaire...

Existe-t-il, à votre connaissance un plugin qui s'en rapprocherait? Sinon, que me conseillez vous?

Merci d'avance pour toute lecture et toute aide apportée! Smiley smile
Modifié par Novembers (18 Aug 2012 - 15:54)
J'ai trouvé exactement ce que je voudrais faire, le problème c'est que c'est en flash.

http://panoplie.fr/

Je parle des petites cases, qui quand on scroll donne une impression de glissement. Comment obtenir un tel résultat avec jquery? De quel côté dois-je regarder?

Un grand merci pour toute aide apportée! Smiley smile
Je galère un peu!

J'ai tenté la solution du pauvre avec du Scroll et du bounce. A la limite si je trouve rien de mieux, je me contenterai de ça...

Mais j'ai tout de même un problème. Lorsque je scroll, le bounce de ma div se lance, mais ne s'arrête pas, ou une fois sur deux. En fait, j'ai la sensation qu'un scroll c'est une petite distance. Si je scroll sur toute ma page, j'ai l'impression que le script se relance et se relance comme si j'avais scrollé 50 fois.

Voilà mon code: 


<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div.rebond{ margin-top: 100px;margin-left:200px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }

  #total{
  	background-color: grey;
  	width: 100%;
  	height: 1400px;
  }
</style>

  <script>
  $(document).ready(function() {
    
$(window).scroll(function () {
      $("div.rebond").effect("bounce", { times:3 , distance:3}, 500);
});

  });
  </script>
</head>
<body>
	<div id="total">
 <div class="rebond"></div>
  </div>
</body>
</html>


Je suis plutôt débutant en jquery, je sèche, y'a une histoire de stop à placer, quelque part? A l'aide! Smiley biggrin
Sujet clos
Aller à