Jquery >> faire un slide boxe fluide

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Jquery >> faire un slide boxe fluide

MisteR WarE

Allons plus loin =>

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

Publicité

czh

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

Code :

$('.dh_work, .dh_work-last').mouseover(function () {
$(this).find('.thumb').stop().animate({
top: "-240px"
}, {
duration: 300,
specialEasing: {
top: 'easeOutExpo'
}
})
}).mouseout(function () {
$(this).find('.thumb').stop().animate({
top: "0px"
}, {
duration: 400,
specialEasing: {
top: 'easeInOutExpo'
},
complete: function () {
$(this).css({
top: "0"
})
}
})
})

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

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

MisteR WarE

Allons plus loin =>

czh a écrit :

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

Code :

$('.dh_work, .dh_work-last').mouseover(function () {
$(this).find('.thumb').stop().animate({
top: "-240px"
}, {
duration: 300,
specialEasing: {
top: 'easeOutExpo'
}
})
}).mouseout(function () {
$(this).find('.thumb').stop().animate({
top: "0px"
}, {
duration: 400,
specialEasing: {
top: 'easeInOutExpo'
},
complete: function () {
$(this).css({
top: "0"
})
}
})
})

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

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

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

MisteR WarE

Allons plus loin =>

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

sebi

le rapport avec Java ?

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

MisteR WarE

Allons plus loin =>

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

czh

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

FORUM HardWare.fr

Programmation

HTML/CSS

Jquery >> faire un slide boxe fluide

Sujets relatifs
Jquery et autocomplete	JQUERY / AJAX Recréer une requête httpRequest avec JQUERY?
Jquery - Copier contenu Span dans TextArea	problème de lancement de mon menu jquery
utilliser un datatable jquery dans application JEE	Galeries jquery Ui Tools
[jquery] Question un peu bateau sur les boucles	jquery 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

Page générée en 0.059 secondes