XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hover Animation f (http://xhtmlforum.de/showthread.php?t=72706)

irenehofer 04.03.2016 12:13

Hover Animation f
 
Auf einer Seite werden mehrere Bilder untereinander dargestellt:

http://i63.tinypic.com/2j49hn8.jpg

Wird ein Bild gehovert, sollen weitere Bilder dazu angezeigt werden, mit einer Animation (ein Bild nach dem anderen, jeweils weniger Deckkraft):

http://i64.tinypic.com/ix5b95.jpg

http://i64.tinypic.com/ofu7nn.jpg

http://i68.tinypic.com/ftg1og.jpg

http://i66.tinypic.com/2s7xssh.jpg

Klickt man dann auf das Bild, wird dann eine Seite mit einer grossen Galerie geöffnet.

Ich habe bereits nach einer Lösung für die "aufpoppenden" Bilder gegoogelt, allerdings nichts passendes gefunden (vielleicht habe ich die falschen Suchbegriffe verwendet)... Irgendwelche Tipps?

cloned 04.03.2016 12:15

Tipp: Versuche es mit CSS3 Animationen. Du wirst aber für jedes Bild eine eigene Animation erstellen müssen, bzw. zeitversetzt starten müssen. Wrappe alle Bilder einer Zeile in einer Liste, fährst du nun über das erste Element blendest du nach und nach die Elemente mit CSS ein.

cgpro 08.03.2016 05:09

Ein Beispiel auf die Schnelle, kann man natürlich noch optimieren ;)
Hover Animation

Zuerst baust du das von der Optik so auf das alle Elemente sichtbar sind. Dann vergibst du den divs die nicht gezeigt werden sollen ein display none mit der Klasse .hidden. Den Rest erledigst Du dann mit jQuery und der hover-Funktion.


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023