Besoin d'avis sur ce code

Salut,

Sur twitter je suis tombé sur un lien vers ce code CSS3 que je trouve visuellement assez génial, j'aimerais savoir ce que les experts en pensent:

http://css3.jmperso.eu (je n'ai sélectionné que l'effet qui me plaisait mais l'archive est beaucoup plus complète, il y a beaucoup plus d'options).
En revanche, cela ne fonctionne pas sur un notebook et je me demande pourquoi, si vous pouviez m'éclairer.

Merci d'avance.

Salut,

Tout à fait dans le même genre mais avec des effets supplémentaires : http://tympanus.net/Development/ImageTransitions/index.html

Pour le plaisir des yeux

Je connais, cela m'arrive aussi, sinon tu as une idée du pourquoi cela ne fonctionne pas sur des résolutions plus faibles?

Non, je n'ai rien vu dans le code qui pourrait expliquer cela

Une galerie à utiliser que dans des situations bien précises...

Hello

audrasjb a écrit :
Par contre, je trouve que ce genre d'effets devrait plutôt être l'apanage de JS, notamment s'il s'agit de construire des présentations type diaporama, etc. De toutes façon, il me semble que leur faible support par les navigateurs (même récents !) est déterminant sur le choix entre CSS3 et JS sur ce point.

Si le côté dynamique est géré par JS (ex un simple changement de classe .show ou .hide) et que les animations sont déléguées à CSS, ça ne me choque pas. J'ai plus de mal avec le full CSS à base de :target.
De plus, les animations sur la page de démo de jmlapam seraient quasi impossible à réaliser autrement (transformation 3D) et ça reste propre sur les autres navigateurs.

jmlapam a écrit :
Sinon tu as une idée du pourquoi cela ne fonctionne pas sur des résolutions plus faibles?

Avec quoi as-tu testé? Il n'y a pas de média-queries dans le code (ou je les ai raté ), et en réduisant la fenêtre de chrome au minimum, ça fonctionne quand même (donc apparemment pas de détection via JS). Peux-être que tu tourne sur une vieille version de webkit qui ne supporte pas encore les transfos 3D? Les browsers sur mobiles utilisent rarement une version très récente de Webkit (voir les commentaires de ce post).

Salut Florian_R,
Merci de ton passage.
Effectivement, j'étais parti dans l'optique de rajouter des media queries pour que cela marche partout et j'ai centré le tout sinon. Le problème est effectivement que cela ne marche pas sur Chromium, sur un notebook j'ai fait tourner une version très légère de Ubuntu et sur un autre un XP light, cela marche très bien avec le XP light et la dernière version de Chrome mais pas avec Chromium

Je pense que tu as raison, Chromium ne doit pas intégrer les transformations 3D.
Je suis allé voir le post, je n'avais même pas encore testé sous Android, bon à connaître ce genre de limite, de toute façon j'aurais le 4.0 vu que j'ai un Nexus S
Modifié par jmlapam (21 Dec 2011 - 11:42)

J'ai vu, mais je suis pas tout à fait d'accord. Quand le CSS3 n'existait pas, et que c'était Flash ou JS, les gens disaient sans doute aussi que c'était Flash qui était fait pour ce genre de galeries (cf. le nombre de sites photos faits en Flash il y a plusieurs années et encore aujourd'hui) mais maintenant, Flash meurt ...

Et donc comment tu gérerais le boutons next dans le cas présent?

EDIT: Et oui je suis d'accord, les animations avec jQuery, Scripty ou autre ne sont qu'un hack dégueu, et une intrusion de la présentation dans le comportement (du CSS dans le JS).
Modifié par Florian_R (21 Dec 2011 - 12:16)

stephanelam a écrit :
Flash meurt...

Du moins, l'exemple montre que l'on peut se passer de lui pour arriver aux mêmes effets mais je crois qu'il a encore du sursis ce bon vieux Flash.

stephanelam a écrit :
Et pour le coup de la résolution, j'ai pas vu de mq dans leur code donc normal à priori ...

Je crois que non en fait, j'ai eu cette logique mais ce n'est pas la bonne, je pense que Florian_R a raison, c'est Chromium qui ne suit pas.
Modifié par jmlapam (21 Dec 2011 - 12:16)

Confirmation :

J'ai installé la version Linux en question via Virtual Box, au passage cet outil est décidément très fiable, et c'est bien Chromium qui ne suit pas la cadence ! Bien vu Florian_R.