CSS Bildausschnitt statt verzerren

[marctrix]

Hej Christoph,

[Slider] Genauso wie auf dieser Webseite, möchte ich es hinbekommen: http://www.kanzlei-dr-klein.de

Hat jemand eine Idee wie dies mache?

Hatte mal Lust dazu - ich mache wenig mit Animationen. Den Effekt auf der Homepage kannst du übrigens ohne Animation hinbekommen. Dafür reicht es, allen li die opacity auf durchsichtig zu setzen und einem nach dem anderen ein opacity 1 zu geben. Das geht mittels transitions, animation ist dafür wie gesagt nicht nötig.

Hier mal ein Beispiel, wenn es richtig "sliden" soll - an allen Parametern kann natürlich beliebig gedreht werden. Beim Überfahren mit der Maus oder beim fokussieren der Liste wird die animation angehalten. Das ist noch nicht der Weisheit letzter Schluss, weil die Animation wieder anfängt, wenn man sich weiter durch den Slides tabbt.

Damit das Ganze mit der Tastatur bedienbar wird, müsste man noch etwas mehr Gehirnschmalz investieren. Das Beispiel kann gerne geformt oder ins Wiki übernommen werden. Aber bitte nur, wenn einer eine Idee hat, wie das auch mit der Tastatur vernünftig bedient werden könnte.

Schön wäre natürlich ohne JS, aber im Moment fehlt mir noch die zündende Idee. Ich würde es mal mit Checkbox-Hack versuchen, auch um Punkte zu erstellen (1. Slide, 2.Slide usw), die direkt angesprungen werden können.

Das geht natürlich recht simpel, wenn man die Animation bei gechecktem Knopf komplett anhält ( animation-play-state: paused;)

Aber wie dann an die anderen Slides per Tastatur kommen? - Man kann die zwar dadurch erreichen, dass man eine andere Box checked, aber Dummerweise sind ja alle Slides nur verborgen, aber per Tastatur erreichbar. Die müsste man also sichtbar machen, wenn drin herumgetappt wird. Leider fällt mir dazu nur JS ein...

Zum Beispiel "Simpler CSS-Slider"

Marc