Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1580 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Jquery >> faire un slide boxe fluide

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Jquery >> faire un slide boxe fluide

n°2161592
MisteR War​E
Allons plus loin =>
Posté le 26-10-2012 à 19:43:55  profilanswer
 

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
mood
Publicité
Posté le 26-10-2012 à 19:43:55  profilanswer
 

n°2161604
czh
Posté le 26-10-2012 à 21:50:50  profilanswer
 

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
n°2161655
MisteR War​E
Allons plus loin =>
Posté le 27-10-2012 à 17:12:28  profilanswer
 

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
n°2162030
MisteR War​E
Allons plus loin =>
Posté le 30-10-2012 à 21:21:09  profilanswer
 

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
 


---------------
http://www.reivaxbook.fr
n°2162053
sebi
Posté le 31-10-2012 à 09:01:11  profilanswer
 

le rapport avec Java ?


---------------
A religious war is like children fighting over who has the strongest imaginary friend.
n°2162078
MisteR War​E
Allons plus loin =>
Posté le 31-10-2012 à 12:16:21  profilanswer
 

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
n°2162157
czh
Posté le 01-11-2012 à 02:26:09  profilanswer
 

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).


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Jquery >> faire un slide boxe fluide

 

Sujets relatifs
Jquery et autocompleteJQUERY / AJAX Recréer une requête httpRequest avec JQUERY?
Jquery - Copier contenu Span dans TextAreaproblème de lancement de mon menu jquery
utilliser un datatable jquery dans application JEEGaleries jquery Ui Tools
[jquery] Question un peu bateau sur les bouclesjquery et selection de div a partir de leur nom
pb interprétation jquery dans ajax prototype[RESOLU] pb ajax, jquery, variable session
Plus de sujets relatifs à : Jquery >> faire un slide boxe fluide


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR