À quel point pouvons-nous obtenir cet effet Flash sans utiliser Flash?

Question

S'il vous plaît jeter un oeil sur le site Web Cheese & Burger.

Plus précisément, jetez un coup d'œil au curseur de la relation du fond avec les panneaux flip ci-dessus.

Je sais que je peux skin jQuery UI Slider pour faire le curseur relativement facile. Je suis plus préoccupé par la façon dont vous pouvez obtenir l'effet de retour sans avoir recours à Flash.

Je ne veux pas utiliser Canvas, car je ne le connais pas et je n'ai pas le temps de l'apprendre (pour l'instant).

Je peux utiliser n'importe quel contenu CSS3 supporté par les derniers Gecko et WebKit, à condition qu'il se dégrade légèrement pour IE (peut-être pourrait-il simplement changer pour IE).

Les panneaux devraient idéalement être div avec un contenu (raisonnable). Ce genre d'exclure l'animation de la propriété height de l'élément img pour l'effet.

Il ne doit pas nécessairement parcourir en route panneaux si vous ne le faites pas séquentiellement (comme le fait le Flash).

J'ai pensé que je pourrais peut-être animer la hauteur de overflow: hiddendiv s avec jQuery, et faire un sprite des bits qui ressortent pendant l'animation (car il n'y a pas de contenu dans ces pièces). Je pouvais franchir les cadres avec setInterval().

Je suppose que cela n'aurait pas l'effet de mise à l'échelle car la page vient vers vous et loin, mais je pense que je pourrais être en mesure de s'en tirer avec. Je vais utiliser jQuery 1.4. Avant de sauter dans ce domaine, pensez-vous qu'il vaudrait la peine d'essayer ou est-ce simplement impossible sans Flash (à partir de maintenant)?

Si c'est faisable, avez-vous des suggestions? Je ne cherche pas le code de travail (bien que les extraits seraient bien), plus le long des lignes de suggestions pour les choses que j'ai peut-être oublié.

Answer 1

Il existe plusieurs plugins pageturn pour jQuery, qui peuvent obtenir un effet similaire. voici un example. Il y en a plusieurs autres.