✔ Animation innerhalb der Grenzen eines <div> tags

[axe van ecks]

Hallo,

ich bin gerade dabei für eine Seite eine kleine Photogallerie zu erstellen. (Und ums zu lernen will ich auch kein fertiges Skript nehmen).

Ich hab soweit alles Photos zusammen und kann mit zwei Pfeilen navigieren (links / rechts). Zusätzlich würde ich das ganze noch gerne animiere0n, so dass ein Bild entweder nach links oder rechts rausfährt und das nächste gleich hinterherkommt.

So wie hier: http://coffeescripter.com/code/ad-gallery/

Ich weiß jetzt nicht wie ich die Animation innerhalb eines bestimmten Rahmens beschränken kann. Kann mir jemand helfen? Ich brauche keinen fertigen Algorithmus, sondern eher eine Wegbeschreibung wie ichs denn schaffen könnte.

Danke!

 

[Sven Mintel]

Moin,

wenn du dem Rahmen die CSS-Formate overflow:hidden und position:relative gibst,

1. wird alles auf diesen Rahmen beschränkt sein(vorrausgesetzt, er besitzt auch Grössenangaben)
2. kannst du Kindelemente innerhalb dieses Rahmens absolute positionieren und dann ihre Position innerhalb des Rahmens durch Änderung der CSS-Werte für top und left ämdern.

 

[axe van ecks]

sowas hatte ich schon probiert, aber ohne Größenangaben hat es mein Layout zerlegt. Vielen Dank für die prompte und gute Antwort.
Noch was weißt du warum man die Größenangaben unbedingt braucht bzw. was passiert wenns sie fehlen?

 

[Sven Mintel]

Noch was weißt du warum man die Größenangaben unbedingt braucht bzw. was passiert wenns sie fehlen?

Naja, mit overflow:hidden wird ja festgelegt, dass der Anzeigebereich des Rahmens abgeschnitten wird, wenn sein Inhalt mehr als die festgelegten Maße einnimmt. Das macht natürlich keinen Sinn, wenn man diese Maße nicht angibt.
Das wäre wie ein Verkehrsschild "fahren sie nicht zu schnell" ....ohne Angabe, wie schnell man maximal fahren darf