Wackelpudding
0 
Der Martin
0 0 0 
O'Brien
0 
Gunnar Bittersmann
0 0 
Matthias Apsel
0 O'Brien
Wackelpudding
Hallo Zusammen,
ich versuche mir gerade zusammenzureimen, wie ich eine Idee programmiertechnisch umsetze. Und zwar möchte ich gern ein Bild so animieren, dass es sich beim berühren mit dem Mauszeiger, oder auch nur beim klicken, verhält wie Wackelpudding, der mal kräftig eins mit dem Finger bekommt.
Es soll halt am Anfang stark gedehnt werden und dann mit drei oder vier Schwüngen in die Ausgangspositin/Größe zurückkehren.
Gibts da eventuell was vorgefertigtes für/mit jQuery oder kennt jemand ein Javascript was genau das macht?
Wüsste auch nicht, worunter ich da sonst noch bei Google suchen sollte...
Grüße,
Stefan
-
Moin,
ich versuche mir gerade zusammenzureimen, wie ich eine Idee programmiertechnisch umsetze. Und zwar möchte ich gern ein Bild so animieren, dass es sich beim berühren mit dem Mauszeiger, oder auch nur beim klicken, verhält wie Wackelpudding, der mal kräftig eins mit dem Finger bekommt.
nette Idee ...
Es soll halt am Anfang stark gedehnt werden und dann mit drei oder vier Schwüngen in die Ausgangspositin/Größe zurückkehren.
Gibts da eventuell was vorgefertigtes für/mit jQuery oder kennt jemand ein Javascript was genau das macht?Also eine gedämpfte Schwingung. Und mit der Auslenkung x(t) modulierst du die width- und/oder height-Eigenschaft des Bildes.
Allerdings wird das visuell noch weit vom Wackelpudding entfernt sein, weil das Bild seine starre rechteckige Form beibehält. Das Typische beim Wackelpudding ist ja, dass die Form eben nicht stabil bleibt, sondern in sich schwankt und wabbelt. Das bekommst du aber mit Javascript nicht hin, weil Javascript nicht die Bilddaten selbst manipulieren kann.
Möglicherweise leistet irgendeine CSS-Transformation oder für den IE ein filter-Effekt etwas Vergleichbares; sonst bleibt nur noch, den Effekt als Bildsequenz vorzurechnen. Entweder als animiertes GIF, oder als Video. Oder Flash, was ja gern für solche Effekte verwendet wird.Ciao,
Martin--
F: Was ist schneller: Das Licht oder der Schall?
A: Offensichtlich der Schall. Wenn man den Fernseher einschaltet, kommt immer erst der Ton, und dann erst das Bild.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
Das bekommst du aber mit Javascript nicht hin, weil Javascript nicht die Bilddaten selbst manipulieren kann.
Doch, mit Canvas.
~dave
-
Moin,
Allerdings wird das visuell noch weit vom Wackelpudding entfernt sein, weil das Bild seine starre rechteckige Form beibehält. Das Typische beim Wackelpudding ist ja, dass die Form eben nicht stabil bleibt, sondern in sich schwankt und wabbelt. Das bekommst du aber mit Javascript nicht hin, weil Javascript nicht die Bilddaten selbst manipulieren kann.Hm..., die Infos zur Schwingungsberechnung sind schon mal ein guter Anfang. Darauf kann man das sicherlich aufbauen.
Das Bild dann noch ein wenig zu quetschen und zu stauchen müsste ja eigentlich schonmal in die Richtung gehen, es "wabbelig" zu machen.Danke!
Stefan
-
Hi.
Also eine gedämpfte Schwingung.
So wie hier. :)
Schönen Sonntag noch!
O'Brien--
"Haalloo! Willkommen in der Show! Ihr kommt spät, aber es sind noch Plätze frei."
-
-
@@Stefan:
nuqneH
Wüsste auch nicht, worunter ich da sonst noch bei Google suchen sollte...
Nach "CSS animation". Nicht nach JavaScript.
Was in modernen Browsern möglich ist, siehst du auf http://daneden.me/animate/.
Nett anzusehen ist auch http://tympanus.net/Development/ImageTransitions/. (Es wackelt bei Others, Example 7.)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Nach "CSS animation". Nicht nach JavaScript.
Ist natürlich auch ne Möglichkeit, sofern es denn (fast) überall unterstützt wird. Werde ich mal als Alternative durchtesten. Danke für den Tipp!
Grüße,
Stefan-
@@Stefan:
nuqneH
Werde ich mal als Alternative durchtesten.
JavaScript wäre die Alternative, wenn der Effekt denn unbedingt auch in alten Browsern laufen muss.
Die CSS-Variante dürfte performanter sein: flüssiger laufen, weniger Rechenleistung verbrauchen, d.h. weiniger Strom (bei mobilen Geräten könnte das wichtig sein).
CSS first. JavaScript eventuell zusätzlich.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
@@Stefan:
nuqneH
Kam gerade übern Ticker: http://www.netmagazine.com/tutorials/get-more-out-your-css-transitions-jquery
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Was in modernen Browsern möglich ist, siehst du auf ...
http://tympanus.net/Development/ImageTransitions/.FF 4.7 ist wohl kein moderner Browser :-(
Matthias
--
1/z ist kein Blatt Papier.
-
Hi.
Was in modernen Browsern möglich ist, siehst du auf ...
http://tympanus.net/Development/ImageTransitions/.FF 4.7 ist wohl kein moderner Browser :-(
Opera 11.61 auch nicht. Oder mache ich was falsch?
Schönen Sonntag noch!
O'Brien--
"Haalloo! Willkommen in der Show! Ihr kommt spät, aber es sind noch Plätze frei."-
Hallo,
Was in modernen Browsern möglich ist, siehst du auf ...
http://tympanus.net/Development/ImageTransitions/.
FF 4.7 ist wohl kein moderner Browser :-(argh
Opera 11.61 auch nicht. Oder mache ich was falsch?
Chrome kann's, ist halt experimentell. Stimmt auch. Im IE 9 und Opera 11.61 gibts einen Hinweis "Webkit only!" ... im Firefox bleibts beim display: none; für das entsprechende Element.
Freundliche Grüße
Vinzenz
-
-
-