html5 - animierte bilder

hi,
ich suche schon ne ewigkeit nach beispielen, einer möglichkeit ein bild über einem anderen zu bewegen. es soll das canvas objekt von html5 benutzt werden. dabei soll das unterliegende bild erhalten bleiben, wenn das obere drüber fährt.
links/beispiele erbeten.

dominik_the_fischjunge

Hi imgv,

mit canvas habe ich mich noch nicht auseinandergesetzt, also kann ich dir da nicht helfen. Aber so wie ich dein Problem jetzt verstanden habe, kannst du dies auch mit JavaScript und CSS3 realisieren. Dazu musst du einfach eine "transition" (engl. für Übergang) in CSS definieren und dann mit JavaScript die Position verändern. Dadurch kannst du im Nu Animationen erstellen, die in allen modernen Browsern funktionieren - auch auf iPad und co.

Ein Beispiel:

<style type="text/css">
#img-container-1 {
  /* Bild 1 drehen */
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  transform:rotate(10deg);

  width:200px;
  height:300px;
  background-color:yellow;
  color:blue;
}

#img-container-2 {
  /* Bild 2 drehen */
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  transform:rotate(-10deg);

  width:100px;
  height:150px;
  background-color:red;
  color:yellow;

  /* Last, but not least - der wichtigste Part: Transition */
  -webkit-transition:2s ease-in-out all;
  -moz-transition:2s ease-in-out all;
  -o-transition:2s ease-in-out all;
  -ms-transition:2s ease-in-out all;
  transition:2s ease-in-out all;
}

#img-container-1, #img-container-2 {
  position:absolute;
  top:50px;
  right:50px;

  /* Schatten für die divs */

  -webkit-box-shadow:5px 5px 15px black;
  -moz-box-shadow:5px 5px 15px black;
  -o-box-shadow:5px 5px 15px black;
  -ms-box-shadow:5px 5px 15px black;
  box-shadow:5px 5px 15px black;
}
</style>

<div id="img-container-1">
Image 1 here
</div>
<div id="img-container-2">
Image 2 here
</div>

<h2>Do it, do it!</h2>
<button onClick="document.getElementById('img-container-2').style.right = '600px';">Press my, yeah!</button>

Viele Grüße und viel Spaß beim Probieren
Dominik

ShadowTurtle

imgmv schrieb:

hi,
ich suche schon ne ewigkeit nach beispielen, einer möglichkeit ein bild über einem anderen zu bewegen. es soll das canvas objekt von html5 benutzt werden. dabei soll das unterliegende bild erhalten bleiben, wenn das obere drüber fährt.
links/beispiele erbeten.

Ich würde fast sagen, dass geht mit DIV-Containern und CSS3 einfacher als mit Canvas und Javascript. Warum ich gleich mit CSS3 komme? Weil das natürlich zu HTML5 irgendwie dazu gehört...

Edit: Übrigens ist CSS3 wirklich extrems mächtig und stellt im Web-Universum gar fast eine eigene vollständige 2D-Engine dar. Wenn du mehr über CSS3 Animationsmöglichkeiten wissen möchtest, dann besuche für den Einstieg einfach folgende Links:

http://css3.bradshawenterprises.com/
http://css3.bradshawenterprises.com/transitions/