nicht angemeldet
"Schwingendes Bild"
0 
JürgenB
0
"Schwingendes Bild"
Gunnar BittersmannHi,
schwer zu beschreiben, was ich suche:
Stellt Euch mal bitte ein Bild im Rahmen an der Wand vor, am besten das hier: 
Wenn Ihr das unten links oder unten rechts "anstoßen" würdet, würde es ja schwingen, schaukeln, sich von links nach rechts bewegen.
Geht soetwas mit Jquery und wenn ja, habt Ihr einen Link, Tipp o.ä.?
Das hier geht ja nicht, dann würde der Haken, an dem das Bild hängt, ja mitwandern, was unrealistisch wäre.
Vielen Dank schon einmal!
-
Hallo Rudi,
von jquery habe ich keine Ahnung, daher nur ein paar Ideen:
-
CSS3 transform:rotate und dann mit Javascript den Winkel "drehen lassen"
(geht das evtl. auch mit canvas?), ist aber nur für moderne Browser. -
Trickfilmtechnik: viele Bilder und dann eine JS-Animation (Bildwechsel)
-
Animiertes GIF
Gruß, Jürgen
-
Hi,
- CSS3 transform:rotate und dann mit Javascript den Winkel "drehen lassen"
(geht das evtl. auch mit canvas?), ist aber nur für moderne Browser.
Ginge auch mit Canvas, aber Browser die Canvas können sollten auch CSS-transforms beherschen. Und damit ist es wesentlich einfacher.
http://jsfiddle.net/9n2h8/201/
~dave
-
Herzlichen Dank!
Ich muss aber mal nachfragen: Heißt das, dass die gepostete Variante nur in "modernen" Browsern geht?
Danke und Gruß!
-
Hi,
Ich muss aber mal nachfragen: Heißt das, dass die gepostete Variante nur in "modernen" Browsern geht?
Ja, und zwar in diesen hier aufgelisteten.
Im IE<10 funktionierts auch, wenn der Benutzer Chrome Frame installiert hat.
~dave
-
-
@@dave:
nuqneH
… sollten auch CSS-transforms beherschen. Und damit ist es wesentlich einfacher.
Du meinst CSS-Animationen.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Hi,
Du meinst CSS-Animationen.
Beides.
Du hast den Hinweis vergessen, dass ich die Präfixfreie-Version vergessen habe!
~dave
-
@@dave:
nuqneH
Du meinst CSS-Animationen.
Beides.Ja, natürlich.
Du hast den Hinweis vergessen, dass ich die Präfixfreie-Version vergessen habe!
Ja, natürlich. Wie konnte ich nur?
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-
- CSS3 transform:rotate und dann mit Javascript den Winkel "drehen lassen"
-