molily: Fade-in Zielseite bei Seitenwechsel

Beitrag lesen

Hallo,

ich möchte einen fade-in Effekt beim Klicken auf einen Link erzeugen.

Ich hab’s mal ohne Klick mit CSS-Keyframe-Animationen demonstriert:

http://dabblet.com/gist/7502432

Hier werden im Grunde nur die Inhalte nacheinander eingefadet und die Aufmerksamkeit des Nutzers gelenkt.

Wenn der Browser Animationen nicht unterstützt, sind die Inhalte direkt sichtbar.

Du kannst die Animation auch auf Klicken auslösen. Dazu fügst du einem Element einen click-Handler hinzu, der beim einzublendenden Element eine Klasse setzt. Diese Klasse bekommt die CSS-Eigenschaft animation: …;, womit die Animation startet. Dann muss man aber dafür sorgen, dass in Browsern, die Animationen nicht unterstützen, die Inhalte gar nicht erst ausgeblendet werden. Das lässt sich mit JavaScript herausbekommen, z.B. mit Modernizr. Die Feature-Abfrage heißt »CSS Animations«.

Einige Browser brauchen noch sogenannte Hersteller-Präfixe (Vendor-Prefixes); in meinem Beispiel habe ich welche für Webkit/Blink (Chrome/Safari) hinzugefügt. Das sollte eigentlich reichen.

Ich poste das hier, um die Diskussion zu versachlichen und auf eine technische Ebene zurückzuführen. Für Verbesserungsvorschläge bin ich offen.

Ich stelle mir vor auf der index.html nur das Logo mit einem Slogen anzuzeigen (Positionierung irgendwo oben links). Wenn man dann auf den Link drückt faded die 2. Seite ein wo das Logo/Slogan an genau der gleichen Stelle steht, allerdings mit dem ganzen restlichen Content auf de Seite.

Einen ähnlichen Aufbau hat mein Beispiel.

Grüße,
Mathias