Bonjour a tous,

Je dois reproduire ce slider:

https://ikusei.helloworldinc.jp/

Pour cela, j'utilise les Css transition sur l'attribut width :

		div.active {
			width: 100%;

		    -webkit-transition-property: width; /* Safari */
			-webkit-transition-duration: 1.5s; /* Safari */
			-webkit-transition-timing-function: cubic-bezier(.895,.03,.685,.22); /* Safari */

			transition-property: width;
			transition-duration: 1.5s;
			transition-timing-function: cubic-bezier(.895,.03,.685,.22);
		}

Quelqu'un pourrait il m'aider a avoir a peu pres le meme comportement ? (C'est a dire l'espece d'accelaration).
Pour dire vrai j'ai essaye plusieurs courbe de bezier mais aucun resultat ne me convient donc si l'un de vous a des doigts de fee je suis preneur.

PS: Vous pouvez vous aider de cette page:

http://cubic-bezier.com/

PS2: Il y a egalement un leger effet de zoom mais ca c'est bon je m'en occupe.

Merci

-
Edité par Scion 16 octobre 2018 à 9:25:47

Je suis sûr téléphone du coup je peux pas t'aider mais je vois pas pourquoi tu testes pas sur ton générateur de courbe de Bézier jusqu'à que ton résultat te conviennent non ? En plus ça t'entrainera. En plus tu as un site d'exemple alors pourquoi tu ne vas pas dans l'inspecteur de code du site que tu fournit pour voir quelle courbe de Bézier ils ont utilsie eux ?

Pour info, voia ce que j'ai fais : http://kakunin.org/jojo/heroslider/

Pour te repondre : oui j'ai un peu fouille le code source bien sur, mais sur le site modele, ils n'utilisent pas la meme methode que moi (ils se prennent la tete je trouve).

Pourquoi je demande un peu d'aide : Tout simplement parce que je n'ai pas l'oeil d'un designer (meme si j'essaie) + en reprenant exactement leur valeur (ex: les valeurs de la courbe de bezier et/ou leur transition-duration, je n'obtiens pas du tout quelque chose de ressemblant).