[UI] scroll + bounce

scroll + bounce

Bonjour à tous et à toutes !

Je débute en jQuery et je rencontre un petit problème. Je travaille sur un site ou les éléments (des images) de la home doivent "flotter" à la manière des cases sur ce site, quand on scroll :

http://panoplie.fr/

Sauf que bon, là, c'est du flash... Alors j'ai testé un milliard de plugins et je me suis finalement dit, pourquoi pas faire beaucoup plus simple et faire légèrement bouncer tout ça lorsqu'on scroll.

Ca fait un peu solution du pauvre, mais bon... (au passage si vous savez comme obtenir un résultat plus proche de ce site, je suis PRENEUR ! :) )

Donc j'ai testé rapidement le scroll+bounce, mais je rencontre un petit problème. Quand je scroll un tout petit peu, ça rebondit bien et ça s'arrête. Par contre, si je scroll comme un bourrin, l'image ne s'arrête plus de bouncer, comme sil enchainait les fonctions.

J'aimerais tout simplement que le bounce s'arrête une fois qu'on ne scroll plus. Que ça bounce pendant qu'on scroll et que ça s'arrête DES qu'on arrête de scroller. Que dois-je faire ?

Voici mon code, si vous pouviez me donner un coup de pouce je vous en serais très reconnaissant !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!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"> #total{ background-color: grey; width: 100%; height: 1400px; } </style> <script> $(document).ready(function() { $(window).scroll(function () { $("#total img").effect("bounce", { times:3 , distance:3}, 500); }); }); </script> </head> <body> <div id="total"> <img src="images/pins1.png" alt=""> </div> </body> </html>

Vous devriez trouver votre bonheur sans devoir réinventer la roue.

Au hasard d'une recherche rapide avec Google: :

http://www.spritely.net/
http://www.wizzud.com/jqDock/
http://www.dynamicdrive.com/dynamici...agebubbles.htm
https://github.com/heygrady/transform/wiki/
http://djdesignerlab.com/2011/09/02/...and-tutorials/

Merci beaucoup de ta réponse!

Même si j'avoue que je ne vois pas trop le lien de certains liens. Je n'en connaissais pas certains et c'est toujours bon à prendre.

En fait ma demande n'est pas tant sur l'effet, je me contenterai de peu finalement. Mais le problème est le scroll. As-tu pu essayer mon code?

Je ne comprends pas comment arrêter l'animation DES qu'on ne scroll plus. Plus le scroll est long, plus il enchaine les fonctions.

J'ai cherché les vers les .stop() et d'autres fonctions qui sont censées arrêter une animation, mais rien n'y fait.

Je me demande vraiment comment faire arrêter l'animation des lors qu'on ne scroll plus, sans qu'il enchaine un tas de fois les animations comme si on avait 1000 scroll...

:cry:

Citation:

Envoyé par CptFlamme

J'ai cherché les vers les .stop() et d'autres fonctions qui sont censées arrêter une animation, mais rien n'y fait.

Je me demande vraiment comment faire arrêter l'animation des lors qu'on ne scroll plus, sans qu'il enchaine un tas de fois les animations comme si on avait 1000 scroll...

:cry:

Pas mieux !