Compatibilité:

Galerie en CSS3 et jQuery avec les transformations 3D.

visuel

Experimentation - Galerie en CSS3 et jQuery avec les transformations 3D.

Utiliser les flêches "droite" ou "gauche" pour naviguer à travers les images. Les touches "haut" et "bas" permettent de zoomer ou dézoomer

Démo

DEMO

Tweet Partager

Commentaires

Jerome2012-04-16 22:22:34

@thomas le coz : tout d'abord merci pour l'intérêt que tu portes à mes billets, ça fait plaisir.

Merci également pour le bout de code que tu fournis même si je le connais déjà ;)

Comme tu l'as compris au définitif, cet exemple utilise du javascript pour changer la transformation des éléments HTML mais les animations sont gérées par les transitions en CSS3 et c'est tout l'intérêt de cette petite expérience que de gérer un maximum de chose avec le CSS3.

thomas le coz2012-04-16 20:17:50

Désolé pour le post, je viens de checker le code et de voir que tu ne gère pas les anims toi même (from scratch), mais ce bout de code est valable dans plein de cas de figure ; cela fait des années que je l'utilise pour interpoler n'importe quoi dans des anims flash

thomas le coz2012-04-16 20:12:23

Hello ! Merci pour cet exemple qui pourrait m'être bien utile :)
Tu pourrais améliorer le rendu de l'animation très facilement cela dit. Actuellement, lorsqu'on passe d'une image a une autre, la vitesse s'amplifie petit à petit jusqu'a s'arreter net à la position finale. Cela pose 2 problèmes (que l'on peut voir dans la démo) : - la fin de l'animation semble trop brutale - si on appuis rapidement sur la fleche droite ou gauche, cela casse l'animation (car la vitesse de depart de l'anim est fixe).
Comme dit plus haut, pour corriger ce problème, c'est très simple, il suffit d'appliquer en permanence (même quand rien ne bouge (car en fait tout bougera en permanence même si l'oeil ne le verra pas)) cette formule :
positionX -= (positionX - endPositionX) * speed;
//speed est compris entre 0 // et1 (en général 0.3 ça le fait //bien (ca dépend de ton //framerate en fait, si tu es a 60 //utilise plutot 0.1)
Ce calcul crée une forte accélération suivi d'une décélération jusqu'a atteindre son point d'arrivée. L'intérêt est que la vitesse n'est pas fixe : elle dépend de la position de depart et d'arrivée de l'élément ce qui permet d'enchainer les actions sans aucun soucis.
Tu verras, cela permet d'obtenir le même genre d'effet que sur iphone/ipad
Bon courage pour la suite, et merci pour les bout de code que tu partage sur ton blog !

jerome2011-11-21 21:41:55

Bonjour,
ce module ne fonctionne pas sur Firefox car celui ci ne gère pas les CSS3 transforms (c'est indiqué compatibilité chrome et safari uniquement en haut de la page)

chych2011-11-21 19:48:50

Slt j'ai voulu tester ton module sur firefox ca fonctionne pas tu as utilisé quel version de ff pour faire tes tests ? moi je suis sur la version 8 C'est pas trop chiant de maintenir un module avec les mises a jours frequentes des navigateurs ??? Merci pour la rep

Laissez un commentaire

Veillez à bien remplir tous les champs.

Les commentaires sont modérés. Ils n'apparaiteront que lorsqu'ils seront acceptés. merci