Transformer un effet de page avec du contenu html, pas seulement des images! Utilisation de jQuery

Question

J'ai une page Web et je veux ajouter un joli effet de page tournant. J'ai vu beaucoup de plugins jQuery mais j'ai eu quelques problèmes et dégoûts.

C'est ce que je veux:

• Alors que l'animation est en cours d'exécution, je dois être en mesure de voir le contenu de la page tournant.
• Je ne veux pas simplement faire glisser le contenu. J'ai besoin de quelque chose qui ressemble à une page de livre tournant.

Le plugin que j'ai le plus aimé est jFlip, mais il ne fonctionne qu'avec des images. Je voudrais cet effet, mais en travaillant avec du code HTML standard.

Est-ce que quelqu'un sait comment faire cela?

Merci!

Answer 1

Est-ce que le plugin jQuery Sexy Curl s répond à vos besoins? (en gardant à l'esprit que personne ne va avoir exactement ce que vous voulez)

Answer 2

Vous devez utiliser une image pour donner l'impression qu'une page tourne.

Answer 3

À l'origine, j'ai écrit ceci: AFAIK il n'y a pas un seul grand effet de rotation de page pour jQuery. Tous (quelques) ont des lacunes. Voici mes conclusions:

EDIT: J'ai reconsidéré cela et maintenant je pense que imBookFlip est en effet un excellent effet de changement de page écrit en jQuery. Pourquoi j'ai changé d'avis? C'est parce que je l'ai modifié moi-même script pour surmonter une lacune de l'animation comme mon original post Bellow montre ...

imBookFlip:http://grasshopperpebbles.com/ajax/jquery-plugin-imbookflip-page-turning-without-flash/

C'est exactement ce que nous recherchons ... Je veux dire, c'est presque! Ce serait parfait si l'effet de retournement de page ne laissait pas l'ancienne image en place, en la remplaçant seulement pour la nouvelle page après que le retournement soit terminé. Mais ce n'est pas tant que ça d'un problème (voir ci-dessous POUR MON SCRIPT MODIFIÉ AVEC CE NUMÉRO RÉSOLU)

Il est bon à bien des égards parce que même si tous les échantillons sur la page (imBookFlip Demo) utilise apparemment seulement des images, cela fonctionne avec des balises div, donc tout contenu est possible (dans les exemples, ils ont utilisé des éléments div vides avec des images d'arrière-plan, de sorte que vous pouvez combiner les images et le contenu). Je crée un portfolio pour ma femme, qui est bibliothécaire, et j'utilise ce composant pour créer un livre avec ses informations, c'est encore un travail en cours, les polices utilisées étaient juste pour une vitrine, mais vous pouvez Laisser l'idée jeter un oeil à: http://lucianasciammarella.com.br

EDIT: Je viens de mettre à jour le script pour rendre l'animation plus lisse en ne laissant pas l'ancienne image en place lors de l'animation de la page flip. Maintenant, il semble beaucoup plus réaliste. La page du portfolio de ma femme est déjà en cours d'exécution et peut être téléchargée directement ici: http://lucianasciammarella.com.br/jquery.imBookFlip-0.6A.js

EDIT2: J'ai contacté l'auteur original et posté un commentaire sur le site avec mon script mis à jour, mais il a étrangement effacé mon poste sans réponse ... Je veux vraiment m'assurer que je ne veux pas s'approprier la création de quiconque, comme je l'ai dit ci-dessous tout le crédit va à lui seul!(Gardez à l'esprit que tout ce que j'ai fait était d'ajouter deux lignes de code, tous les crédits vont à l'auteur original, et puisque je n'ai rien changé d'autre, pour apprendre à l'utiliser, s'il vous plaît se référer à la site d'origine, ou voir mon code source de la page de femme ...)

Sponsor Retourner mur avec jQuery:http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

Ceci est un flip simple, mais étonnante à bien des égards. Il peut être étendu pour fonctionner comme un livre de pages. Cela fonctionne avec n'importe quel contenu aussi. Le seul problème est actuellement qu'il retourne au centre de la page, pas comme une page de livre ... (après tout, il n'était pas destiné à un effet de bascule de page ...)

Espérons que ces deux peuvent vous aider. .. Maintenant, si vous voulez un effet de retournement de page vraiment soigné, vous pouvez utiliser le composant livre DevExpress Silverlight (allez à http://demos.devexpress.com/AgCoreDemos/ cliquez sur Contrôles sur la gauche, puis choisissez la démo Livre ou Livre Calendrier)