An die Javascript Gurus : slide-effect wie bei iTMS

[danlo]

ich gestalte gerade eine neue seite, und bin auf der suche nach ner möglichkeit so etwas wie bild gezeigt zu realisieren.
(zu finden auf der startpage des iTMS)
ich würd mich auch über etwas weiterführende hilfe freuen, da ich nur über grundkenntnisse in javascript verfüge und sicherlich nicht "nur" mit dem source klarkommen würde.

 

[pichfl]

hmm, das selbe javascript nutzt apple unter anderem auch für die gallery bei Aperture, einfach mal da in den quellcode schaun ;-)

 

[danlo]

hmm, das selbe javascript nutzt apple unter anderem auch für die gallery bei Aperture, einfach mal da in den quellcode schaun ;-)

Wie denn?

 

[wegus]

Nur mal so am Rande:

Java != Javascript

 

[Jakob]

hmm, das selbe javascript nutzt apple unter anderem auch für die gallery bei Aperture, einfach mal da in den quellcode schaun ;-)

Ist ein Flash bei Aperture. Da siehst Du im Quelltext nix. Ich würde mir mal das Skript der scrollenden iPods auf der Startseite ansehen. Ist ja so ähnlich.

 

[danlo]

Da komm ich irgendwie nicht mit klar. Könnte mir jemand da etwas weiterhelfen?

 

[pichfl]

öhm, sry.
Ich hab dieses system irgendwo schonmal gesehen, hmmm.

Ich schau auf alle Fälle nochmal, vielleicht find ich ja was.

 

[moses_78]

in diesem buch gibts eine anleitung dazu, wie man vertikal den inhalt
eines kleinen kastens scrollen kann.

ich hatte mir das buch mal in der kölner stadtbibliothek ausgeliehen, weiss aber
nicht mehr genau, wie das ging...ich meine, da war ein div-container, der absolut
positioniert war, und zum scrollen verschoben wurde. damit man nur den bereich
in der mitte sah, wurde der anzeigebereich mit clip:rect beschnitten...

also wenns dir ernst ist, kauf dir das buch, ist auch sonst gut zum einstieg in
javascript

 

[ThaHammer]

Wo ist da das Problem?

Ne es gibt eine Funktion um Elemente per JS zu verschieben. In einer Schleife kannste das Element dann wegschieben. Wenn das innerhalb z.B. eines Divs geschieht der keinen Überlauf gestattet müßte er das Bild abschneiden. Nebenbei schiebst Du das Zweite Bild an der anderen Seite mit rein.

 

[Hilarious]

Eine nette Umsetzung in Form einer endlosen Verschiebung nach links findest Du derzeit auf http://www.apple.com/de. Derzeit wird per Zufall ermittelt, ob Du die iMac G5-Werbung oder die iPod-Anzeige siehst. Und dieses verschiebt sich, indem um die Bilder eine CSS-ID names "billboard" und darin eine CSS-ID mit der Bezeichnung "scroller" per JavaScript nach links verschoben wird. Der äußere Rahmen ("billboard") legt fest, wieviel jeweils zu sehen ist, der Rest wird "abgeschnitten" (overflow: hidden).

Ein Skript names scrollinator.js sorgt dann in Verbindung mit der universellen Browserweise browserdetect.js für den Bewegungseffekt.

 

[julians]

Sehr einfach geht das mit mooFX, einer kleine Javascript-Effektbibliothek, die auf Prototype aufbaut. Man muss eigentlich nur drei oder vier Zeilen schreiben und fertig ist's.