Ein Element aufrollen

curdface · 13.02.2014

Hallo Community,

es geht um folgendes: Ich stehe vor der Realisierung eines Kontaktformulars, welches als Postkarte gestaltet ist. Nach dem Betätigen des Submit-Buttons soll sich die Postkarte inkl. Formular einrollen, als wenn man ein Blatt Papier aufrollt. Highlight wäre, dass die eingerollte Postkarte in eine Flasche gestülpt wird (als Flaschenpost) und das Absenden zu visualisieren. Letzteres wird ganz sicher ohne Flash nicht machbar sein. Da ich allerdings auf keinen Fall Flash einsetzen möchte, bin ich auf der Suche nach eine Lösung zumindest die Postkarte aufrollen zu lassen. Ich war mit bis vor zwei Tagen sicher, dass es mit CSS3 oder jQuery zu realisieren ist, aber meine Suche war bisher erfolglos ..

Hat jemand eine Ansatz zur Realisierung?

Grüße
Nicole

Duddle · 14.02.2014

Hmmm, ich habe nichts unmittelbar gefunden, weder im Deutschen noch im Englischen (paper roll? rolling paper?). Es gibt Ansätze, Buchseiten umblättern zu lassen und diese könnte man mglw. für ein "aufrollen" anpassen, aber ich finde kein einfach einsetzbares PlugIn oder Tutorial für deinen Zweck.

Das einfachste wäre vielleicht, diese Animation als .gif bzw. animiertes .png zu erstellen und dann beim Absenden diese Animation über dem Formular einzublenden (im Hintergrund natürlich das Formular selbst verstecken). Das könnte, wenn gut gemacht, recht überzeugend wirken. Im Idealfall hat das Formular dann eine feste Pixelgröße, was zwar allgemein nicht nett ist, aber im vorliegenden Beispiel besser aussehen würde.

Duddle

curdface · 14.02.2014

Hi Duddle,
erstmal danke für deine Antwort. Die feste Pixelbreite ist natürlich im responsive Zeitalter nicht optimal, aber das ist in diesem Fall kein Problem da die Seite eh nicht responsive ist. Ich habe gestern noch mal recheriert und mich für das absolute "downgrade" für eine CSS3 animation entschieden, in dem ich im außerhalb des formulars eine Bild einer Flasche habe und das formular zu dem Punkt hin klein werden lassen..

Vielleicht gibt es aber noch weitere Vorschäge?!... Ich habe ernsthaft geglaubt, dass ist nicht die erste bin, die ein Script mit dem "aufrollen" von Papier nutzen möchte...