Text auf Bild nacheinander sliden/einblenden?

[Anja555]

Hallo zusammen,

ich suche nach einer Lösung, mit der ich ganz in dem Stil eines Sliders auf meiner Startseite Elemente auf ein Bild einblenden/sliden lassen kann. Was ich vor habe, soll in etwa so aussehen:

1. Bild wird angezeigt
2. Text wird darüber geslidet/gefadet
3. ein weiterer Text wird auf die beiden Elemente geslidet/gefadet

Das i-Tüpfelchen wäre, wenn dann alle Elemente verschwinden und ich mit einer neuen Serie beginnen kann. Sprich, ich möchte eine Art Geschichte erzählen: Bild + Information 1 + Information 2. Ich habe bereits subcolumns und caroufredsel als verschachtelten Slider im Einsatz. Allerdings ist ja die Idee eines Sliders die, dass ein neues Element ein altes Element ersetzt (oder?). Und ich möchte ja ein altes Element durch ein neues Element ergänzen und nicht ersetzen. Am Ende der Einblendungen sollen also alle bisher eingeblendeten Elemente zu sehen sein.

Auch nach mehreren Tagen und stöbern im www habe ich keine passende Idee gefunden. Vielleicht könnt ihr mir mit ein paar Ideen/Ansätzen helfen? Das wäre großartig!

Vielen Dank und schöne Grüße
Anja

[varix]

Hallo Anja,

wenn ich dich richtig verstanden habe, willst du eine Animation mit verschiedenen Ebenen (wie. z.B. Photoshop) die ein eigenes Verhalten (sliden, etc.) haben?

Hab damals auch nach einer solchen Lösung gesucht und keine Extension gefunden. Vielleicht gibt es mittlerweile eine....

Wenn nicht, entweder:
1) Selber schreiben mit Javascript (Mootools, jQuery,...)
2) Fertige Lösung einbinden, hier mal eine Lösung, die ich im Einsatz habe (kostenpflichtig, aber bezahlbar ): Beispiel

Schau dir mal die Demo an (jQuery). Meintest Du das? Ein wenig HTML und deren Anleitung und dann sollte das gehen.....

Hier wurde der Slider auch auf einer Contao-Seite eingesetzt.

Grüße,
varix

[Dirch]

Hallo Anja,

das was du machen möchtest geht evtl. hiermit: http://daneden.me/animate/

Siehe auch die Diskussion in diesem Thema: https://community.contao.org/de/show...ente-animieren

Wenn du das ganze mit unterschiedlichen CSS-Animations-Startpunkten verknüpfst hast du genau das was du haben möchtest und kannst bei deiner bestehenden Umsetzung bleiben.

Liebe Grüße...
...Dirk

[varix]

@dirch: Danke für den Hinweis. Eine schöne Sache. Allerdings <IE10 scheint das nicht zu laufen = CSS3.

Oder hab ich da was übersehen?

varix

[Dirch]

@dirch: Danke für den Hinweis. Eine schöne Sache. Allerdings <IE10 scheint das nicht zu laufen = CSS3.

Oder hab ich da was übersehen?

Denke nicht. Was die einzelnen IEs davon unterstützen habe ich mir nicht im Detail angeschaut. Vieles davon geht auch schon in IE9. Weiß allerdings auch nicht was passiert, wenn sie es nicht tun. Kommt allgemein eben auch immer darauf an für welche Zielgruppe man die Seite gestalten möchte. Da muß Anja schauen welche Unterstützung sie unbedingt braucht.

Grüße...
...Dirk

[Anja555]

Hallo Varix,
Hallo Dirch,

mensch - tausend Dank für Eure schnelle und kompetente Hilfe!

In der Tat bin ich leider kein JS-Guru, daher ist sie selbstschreiben-Option eher keine Eure anderen Ideen gefällen mir aber sehr gut - ggf. langt es mir auch schon den Carousel ein wenig zu modifizieren, wie im Diskussions-Link von Dirch. Ich werde Eure Anregungen die Tage mal genauer betrachten und mich dann wieder melden.

Viele Grüße
Anja