Jquery >> faire un slide boxe fluide

Jquery >> faire un slide boxe fluide - HTML/CSS - Programmation

Marsh Posté le 26-10-2012 à 19:43:55    

Bonjour tout le monde,
 
je suis, malgré mes recherches, dans une impasse. En effet je cherche à reproduire un slide boxe aussi fluide que sur le lien suivant :
 
http://dhanai.net/#/work
 
De plus je trouve des démos type http://buildinternet.com/2009/03/s [...] th-jquery/  mais je ne trouve pas le type de défilement slide boxe comme dans dhanai.net.
 
Avez-vous des renseignements ou les bons tutos pour ce type d'exercice?
 
Merci par avance de vos aides.
 
Reivax


Message édité par MisteR WarE le 31-10-2012 à 12:19:43

---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 26-10-2012 à 19:43:55   

Reply

Marsh Posté le 26-10-2012 à 21:50:50    

D'après la source, c'est du jquery.animate css avec du specialEasing à "easeOutExpo".
 

Code :
  1. $('.dh_work, .dh_work-last').mouseover(function () {
  2.         $(this).find('.thumb').stop().animate({
  3.             top: "-240px"
  4.         }, {
  5.             duration: 300,
  6.             specialEasing: {
  7.                 top: 'easeOutExpo'
  8.             }
  9.         })
  10.     }).mouseout(function () {
  11.         $(this).find('.thumb').stop().animate({
  12.             top: "0px"
  13.         }, {
  14.             duration: 400,
  15.             specialEasing: {
  16.                 top: 'easeInOutExpo'
  17.             },
  18.             complete: function () {
  19.                 $(this).css({
  20.                     top: "0"
  21.                 })
  22.             }
  23.         })
  24.     })


 
Exemples : http://matthewlein.com/experiments/easing.html

Message cité 1 fois
Message édité par czh le 26-10-2012 à 22:03:54
Reply

Marsh Posté le 27-10-2012 à 17:12:28    

czh a écrit :

D'après la source, c'est du jquery.animate css avec du specialEasing à "easeOutExpo".
 

Code :
  1. $('.dh_work, .dh_work-last').mouseover(function () {
  2.         $(this).find('.thumb').stop().animate({
  3.             top: "-240px"
  4.         }, {
  5.             duration: 300,
  6.             specialEasing: {
  7.                 top: 'easeOutExpo'
  8.             }
  9.         })
  10.     }).mouseout(function () {
  11.         $(this).find('.thumb').stop().animate({
  12.             top: "0px"
  13.         }, {
  14.             duration: 400,
  15.             specialEasing: {
  16.                 top: 'easeInOutExpo'
  17.             },
  18.             complete: function () {
  19.                 $(this).css({
  20.                     top: "0"
  21.                 })
  22.             }
  23.         })
  24.     })


 
Exemples : http://matthewlein.com/experiments/easing.html


 
 
Merci beaucoup czh. Je vais tester cette solution ce soir.


---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 30-10-2012 à 21:21:09    

Bonsoir tout le monde,
 
czh, je ne sais pas comment intégrer ton code. J'aimerais savoir d’où tu le sors. Pour la précision "specialEasing" tu m'as appris son existence, merci   :hello: .
Le principe des slides boxes que je connais de Jquery c'est une image allant sur une autre. Mais sur http://dhanai.net/#/work c'est une image qui cède à une autre image par le mouvement.
 
Si d'autres personnes à d'autres idées n'hésitez pas.
Et merci tout de même czh.
 
reivax
 

Message cité 1 fois

---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 31-10-2012 à 09:01:11    

le rapport avec Java ?


---------------
A religious war is like children fighting over who has the strongest imaginary friend.
Reply

Marsh Posté le 31-10-2012 à 12:16:21    

J'ai posté au mauvais endroit confondant Java et Javascript. Désolé


Message édité par MisteR WarE le 31-10-2012 à 12:19:11

---------------
http://www.reivaxbook.fr
Reply

Marsh Posté le 01-11-2012 à 02:26:09    

MisteR WarE a écrit :

Bonsoir tout le monde,
czh, je ne sais pas comment intégrer ton code. J'aimerais savoir d’où tu le sors. Pour la précision "specialEasing" tu m'as appris son existence, merci   :hello: .


 
De là : http://dhanai.net/_/js/functions.js
 

MisteR WarE a écrit :


Le principe des slides boxes que je connais de Jquery c'est une image allant sur une autre. Mais sur http://dhanai.net/#/work c'est une image qui cède à une autre image par le mouvement.


 
En fait, c'est simplement un "overflow:hidden" avec du contenu plus gros à l'intérieur (l'image). L'effet c'est de scroller à l'aide d'un animate css. Le specialEasing, c'est l'algorithme qui calcule les phases d’accélération et de décélération du scrolling.
 
Par exemple :
 
La première image en haut à gauche c'est :
<li class="dh_work"><a rel="previewPic" href="_/img/projects/big/chinesetheatre.jpg"><img src="_/img/projects/tmb/chinesetheatre.jpg" class="thumb" style="top: 0px; "></a></li>
 
Le CSS de .dh_work c'est :
.dh_work {
float: left;
width: 310px;
height: 240px;
overflow: hidden;
}
 
Le contenant fait 310 x 240, et contient une image (http://dhanai.net/_/img/projects/tmb/chinesetheatre.jpg) de 310 x 480. Il suffit donc de scroller de haut en bas pour donner l'impression de slider sans coupure.
 
Pour en savoir plus, tu peux inspecter le HTML à l'aide de Firebug sur Firefox, ou l'inspecteur web de Webkit (Safari / Google Chrome).

Reply

Sujets relatifs:

Leave a Replay

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