Webanimation | Auftauchen anhand Trigger-Objektes

alextappert schrieb am 02.02.2016 um 19:54 Uhr

Hallo zusammen, ich mal wieder ;-9

Folgende Aufgabenstellung:

Ich möchte, dass am oberen Browserrand ein Bild erscheint, aber erst nachdem ein anderes Objekt im Fenster auftaucht, bzw. ein Thema beginnt.

Hatte das mit der Funktion Web-Animation unter Berücksichtigung eines Trigger-Objektes versucht, dann erscheint das Bild aber bereits, wenn das Trigger-Objekt am unteren Browser-Rand erscheint.

Ich würde es gerne so haben, dass das Bild erst erscheint, wenn das Thema oben fixiert ist. Hat da jemand ne Lösung?

Kommentare

BilderMacher schrieb am 02.02.2016 um 19:59 Uhr

Das "Trigger-Objekt" muss dann entsprechend unten liegen, dass es erst auftaucht, wenn der Text (das Thema) vollständig angezeigt wird.

alextappert schrieb am 02.02.2016 um 20:06 Uhr

Das ist insofern nicht möglich, da die Browsergrößen variieren. Wenn ich eine höhere Auflösung am Bildschirm habe, stimmt es ja wieder nicht. Gut wäre, wenn ich dem Objekt sagen könnte, wenn das Objekt mit dem Namen "Thema News" an Position XYZ erscheint, tauchst Du auf... Also einen festen Punkt im Browser von oben links an definiere...

Aber ob das funktioniert...

BeRo schrieb am 02.02.2016 um 21:47 Uhr

[...] Ich würde es gerne so haben, dass das Bild erst erscheint, wenn das Thema oben fixiert ist [...]

Das geht leider nicht mit der Trigger Objekt Funktion des WD, wie Du selbst schon festgestellt hast...

[...] Wenn ich eine höhere Auflösung am Bildschirm habe, stimmt es ja wieder nicht [...]

Genau. Aber es gibt Abhilfe, wenn Du einen anderen Lösungsansatz wählst.
Stellst Du z. B. eine Funktion so ein, dass der Inhalt einer popup Ebene nur dann eingeblendet wird, wenn eine bestimmte Scrollposition (von oben) erreicht wird, hast Du die Lösung.

Wie das geht, das habe ich hier erklärt.
Die dazu gehörende online Demo findest Du hier und die lauffähige Projektdatei für eigene Experimente gibt's hier.

Vorteil der Lösung: Das Ein-/Ausblenden des Objekts ist nur von der Scrollposition in Pixeln abhängig, also völlig unabhängig von der Höhe des Browserfensters...

Viel Erfolg