Aufbau eines Bildes von unten nach oben?

[chr.flader]

Hallo zusammen,

ich versuche jetzt schon seit geraumer Zeit eine Galerie mit Slideshow zufinden, welche sich von unten nach oben aufbaut (pro Bild).
http://schmidt-bleyl.de/olaf/index.php/index.html

Ich möchte gerne einen Hausbau simulieren.
Dort wird ja auch meistens von unten nach oben gebaut ;-)

Hat da jemand ne Idee?

Vielen Dank

Christian

[tblumrich]

Hi.

Soweit ich weiß, soll die Möglichkeit bei SlideitMoo kommen, das Inhalte vertikal wechseln. Bei mooquee4ward geht das jetzt schon. Alle anderen mir bekannten Slider sliden nur horizontal.

Oder meinst du was anderes?

Gruß
Thomas

[chr.flader]

Hi und danke für die schnelle Antwort. Habe direkt einmal mooquee4ward ausprobiert.
Ich würde gern "Kastenweise" das Haus aufbauen lassen.

Hast du da auch nen Tipp?

[chr.flader]

Also quasi:

Stein für Stein ;-)

[tblumrich]

...nicht wirklich. Mir ist nicht so richtig klar, was du vorhast. Du kannst doch letztendlich nur Bild für Bild (oder Inhalte) nehmen und das wechseln... wie meinst du das mit "aufbauen"?

Gruß
Thomas

[chr.flader]

mein Vorstellung, dass er das Puzzelweise, von unten nach oben, aufbaut.
Die Puzzelteile sind aber kleine Kästchen (120 x 120 px o.ä.).

[tblumrich]

Hmm. Das ist schon etwas speziell - nicht der Effekt ansich, aber das mit einem Slider machen zu wollen...
Aber animierte GIFs wurden ja quasi so ähnlich Frame für Frame auch gemacht.
Insgesamt wäre Flash für sowas wahrscheinlich geeigneter... (auch wenn ich davon keine Ahnung habe).

Nimm halt so viel verschiedene Bilder wie du brauchst, auf jedem Bild ist ein Stein an einer anderen Stelle (Stein an Stein) - des Rest des Bildes ist transparent (JPG fällt daher aus), bis das Ding fertig ist. Ob das mit der Transparenz bei dem Slider so funktioniert, keine Ahnung.
Aber theoretisch sollte das gehen. Verstanden?

Gruß
Thomas

[chr.flader]

Hi, ich habe noch einmal geschaut.

So stelle ich mir das vor (direkt Eingangsseite):
http://www.buddenberg-architekten.de/
allerdings von unten nach oben.

[tblumrich]

Eben... das ist Flash... wie schon angemerkt.

Sowas wird sicher auch einigermaßen mit einem JS Framework nachbildbar sein, aber eher nicht von Haus aus mit entsprechenden Erweiterungen für Contao (ich wüsste jedenfalls nicht wie man einen Slider dafür zweckentfremden könnte).
Da müsste man wohl etwas tiefer in Mootools, jQuery und Co. einsteigen...

Gruß
Thomas

[soweit_ok]

Da wohl keine Umsetzung mit Flash beabsichtigt ist, hätte ich dazu folgende Idee eines ganz anderen Ansatzes:

1. Du baust die Grafik nicht stückchenweise auf, sondern lädst sie in einem Stück.
2. Für den, ich nenne es mal Ziegelstein-Effekt verwendest Du Masken, die Du Dir leicht mit einem Grafik-Programm erstellen kannst. Diese Masken erstellst Du als Gif. Da die Masken keine feinsten Details aufweisen, sollte das Gif-Format völlig reichen. Außerdem kann man auch detailreiche Gifs erstellen, die u. U. komprimierte JPGs qualitativ übertreffen, wenn man nicht den Fehler macht, sie zu komprimieren. Was bei Gifs eh nicht so viel brächte außer heftigem Qualitätsverlust. Also die Masken nicht komprimieren und das Dithering vor dem Speichern auf 0 stellen.
3. Als Grundlage machst Du erstmal ein Gif mit allen Steinen.
4. Für die weiteren Masken nimmst Du diese Vorlage und dann färbst Du mit der Farbwechslerfunktion (Photoshop oder Paint Shop Pro) bei jeder Maske einen Stein mehr in eine Farbe um, die sonst nicht in den Masken vorkommt, z. B. blau. Vor dem Abspeichern stellst Du die Bildtransparenz so ein, dass diese Farbe transparent ist.
5. Im CSS baust Du nun mit z-index einen Stapel und positionierst z. B. absolut, falls das keinen Konflikt mit anderen Elementen gibt. Sonst eben relativ. Oben auf dem Stapel liegt die Grundmaske, welche die gesamte Hauptgrafik abdeckt. Direkt über der Hauptgrafik liegt die Maske, welche nur noch einen Stein abdeckt. Alle anderen logischerweise in der richtigen Reihenfolge zwischen diesen beiden Masken. Außerdem weist Du der Masken-Klasse noch ein display:block zu.
6. Die Ausgabe erfolgt per Javascript in einer simplen Schleife, mit der Du auch die Ablaufzeit des Ganzen gut steuern kannst. Die Namen der verschiedenen Masken notierst Du in einer Array-Variablen. Im Schleifenkörper braucht es dann nur die Anweisung document.getElementById(steineMaske[nr]).style.display="none";
Ich würde mir übrigens überlegen, den Wert für z-index nicht im CSS zuzuweisen, sondern ebenfalls mit document.getElement und Style-Attribut. Hätte den Vorteil, dass Du nicht für jede Maske eine eigene CSS-Klasse bräuchtest. In der Schleife hast Du ja immer das richtige Element im Zugriff und es spricht nichts dagegen dort auch den passenden z-index zu setzen.
Die Schleife beginnt mit der oberen Maske des Stapels und ist fertig, wenn sie die letzte entfernt hat. Dafür musst Du natürlich den entsprechenden Zähler setzen.

Wobei, ich überlege gerade .... vorstehende Vorgehensweise bildet die Aktion Deiner Beispielseite nach. Ich hoffe, dass ich Dich richtig verstand, Du willst genau dasselbe, nur von unten nach oben. Na ja, wie der Ablauf ist, richtet sich bei meinem Vorschlag ja danach, wie Du die Masken stapelst.

Diese Methode hätte den Vorteil, dass Du sie zusammen mit beliebigen Hauptgrafiken wiederverwenden kannst. Du könntest damit dann bei Bedarf auch noch andere Spielereien veranstalten. Beispielsweise statt Ziegelsteinen Puzzlesteinchen, die Du nicht linear, sondern per Random-Funktion zufällig bei jedem Reload anders entfernst. Wenn der sichtbare Teil der Maske die Hintergrundfarbe des Maincontainers hätte, sähe der Betrachter garnicht, das etwas entfernt wird, sondern es wirkt so, als würden die Steine aus dem Nichts entstehen. Könntest auf Deiner Grundmaske auch einen Spruch haben oder ein beliebiges Motiv, was dann quasi steinchenweise vom nächsten Bild überblendet wird. Einziger Nachteil bei Gif-Grafiken, Du könntest die Steine nicht auch noch mit einem Fading belegen. Dafür bräuchtest Du ein anderes Grafikformat, was es etwas komplizierter machen würde, denn Du müsstest dann statt Einzelmasken für jede Ebene zusammengesetzte Maskensets verwenden, die Du jeweils gleichzeitig einblendest. Ginge aber auch und die Erstellung der Grafiken würde noch nichtmal großartig mehr Arbeit verursachen. Denn im Grunde wäre es egal, ob Du bei jeder Maske einen per Farbwechsler umgefärbten Bereich transparent schaltest oder die Ausgangsmaske in die benötigten nicht transparenten Teile zerschneidest, separat speicherst und den offenen Teil wegwirfst.

Eigentlich enthielte die kleine Funktion sogar schon fast alles, was Du für einen Slider dieser Art bräuchtest, also falls Du mehrere auf diese Art aufgebaute Grafiken so hintereinander anzeigen willst. Der Stapel kann schließlich beliebig hoch geschichtet werden. Lediglich falls Du die Hauptgrafiken etwas länger zum Betrachten stehen lassen willst, müsstest Du an der Stelle der Schleife für eine kleine Pause sorgen.

So, nun bin ich mal gespannt, was Du von dieser Idee hältst. Hoffentlich hab ich es halbwegs nachvollziehbar beschrieben, was ich meine. Hab jetzt fast Lust bekommen, mir auch mal selber so einen Spezial-Slider zu bauen. Ich sah derartiges schon öftet, doch konnte man damit nur den jeweiligen Effekt verwenden, aber nicht den Ablauf bestimmen, außer Pausen, Fading und so angeben.

[chr.flader]

Danke soweit_ok!

Aber glaube das ist ne Nummer zu schwer für mich ;-)

Christian

[soweit_ok]

Hi Christian,

ist es eigentlich nicht, schaut anhand der Beschreibung vielleicht nur auf den ersten Blick so aus. Bist ja schließlich schon längst kein Contao-Anfänger mehr.

Was speziell findest Du denn daran schwer, die Erstellung der nötigen JS-Funktion, der Grafiken, oder beides? Oder womöglich die Lesbarkeit meiner Beschreibung? ;-)

HG Andreas