[Karlos]

Ich programmiere schon länger mit HTML & PHP, möchte nun aber eine bestimmt Animation haben:

Ich habe ein Bild das 200x800 pixel groß ist.

Dieses Bild möchte ich aber nur 100 Pixel hoch anzeigen lassen, also nur ein achtel vom Gesamtbild. Das schaff ich auch noch so.

Nun aber zum eigentlichen Problem:
Das Bild soll in der 100px großen box runterscrollen so das man das ganze Bild nacheinander sieht, immer in 100 pixel-Schritten, anschließend soll es von vorne anfangen bis eine gewisse zeit abgelaufen ist oder eine Usereingabe das ganze abbricht.

Ich hab jetzt leider keine Ahnung womit ich das am besten machen kann, Java, JavaScript oder eine ganz andere Sprache. Wichtig ist nur das ich beim Aufruf des Bildes eine Variable mit übergeben kann, aber das sollte wohl in jeder Sprache über den Link möglich sein.

Was denkt ihr welche Sprache da die richtige wäre?

Und wie gehe ich das am besten an? (ein paar befehlsbeispiele wären schon toll, muss kein ganzes Script sein ;) )

Danke euch schonmal,

Karlos

[$traight-$hoota]

Tja, ich würde dir empfehlen, das mit Javascript umzusetzen, am besten mit nem Framework wie jQuery.
grob könnte ein entsprechendes skript etwa so aussehen (komplett ungetestet und ohne usereingabe):

<div id="anim"></div>
<script type="text/javascript">
$(document).ready(function(){
    var interval = 1000;
    window.setInterval(animate, interval);
    $('#anim').css({'background-image': 'url(image.png)', 'background-position': '0px 0px', 'height': '100px', 'width': '200px'});
 
});
function animate() {
    var offset = $('#anim').css('background-position');
    offset = offset.substring(4, offset.length - 2);
    offset = ((+offset) + 100) % 800;
    $('#anim').css('background-position', '0px ' + offset + 'px');
}
</script>
 

schau mal, ob du damit was anfangen kannst... aber wenn du keinerlei erfahrung damit hast, ist das vielleicht alles andere als einfach.

[robo47]

Die Frage ist was steht dir zur Verfügung, woher kommen die Bilder und was setzt du bei deinem Usern vorraus ?

1) Wenn imagemagick (als PHP-Extension oder via exec) vorhanden ist kannst du das Bild in mehrere Teile schneiden und daraus ein animiertes gif erstellen, nur mit php + gdlib ist das leider nicht möglich.
-> Sollte imho eigentlich jeder Browser mit klar kommen und man kann beim erstellen angeben wie oft das ganze abläuft, Keine Interaktion wie stoppen ohne weiteres JavaScript möglich und GIF-Limits (256 Farben).

2) Das Bild als Hintergrund eines 100px großen Blocks setzen und mittels Javascript das Bild scrollen, erfordert JS, erlaubt aber stoppen jeder Zeit und auch dort weitermachen.

3) CSS 3 sollte meines Wissens nach Animationen können, denke das könnte damit auch möglich sein, bin mir aber nicht sicher.
-> Nachteil ist halt dass es nur mit halbwegs aktuellen Browsern funktionieren würde die CSS 3 können, dafür braucht man kein imagemagick und muss keine bilder erstellen, etc

4) JAVA-Applet oder Flash-Film, Vorrausgesetzt du Hast ne Flash-Lizenz und kannst damit umgehen (ActionScript programmieren) oder du kannst Java programmieren.
-> Erfordert dass User JAVA oder Flash hat, ist dafür flexibler als variante 1, weil man server-seitig kein imagemagick braucht, keine bilder erstellen muss sondern einfach jedes vorhandene bild nutzen kann und nicht die GIF-Limits hat.

[Neq']

5) Du verwendest Canvas (in Verbindung mit JavaScript). Der Vorteil ist hier, dass du immer Bilder, also mehr oder weniger eine wirkliche Animation zurückbekommst. Funktioniert mittels excanvas sogar im InternetExplorer.