SVGモーフィングで、図形を徐々に変化させてみよう
2015年12月28日 SVG モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね（懐かしい！）。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能！さっそく挑戦してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記（2015年12月28日）：SMILはSVG次期バージョンから非推奨となるようです。 Intent to deprecate: SMIL – Google Groups SVGモーフィングを使った例 SVGモーフィングとはなんぞや？ってことで、まずは以下の作例をご覧ください。徐々に変化していく様子がおもしろいですね！ リンク先ではバットマンの
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
CreateJS発表
Grant Skinner氏が、blog記事「Announcing CreateJS」でCreateJSを発表しました。公式サイトも間もなく公開されるようです。氏のblogから内容をかいつまんでご紹介します。 CreateJSは、いくつものライブラリモジュールとツールを統合したものです。HTML5にもとづくリッチなインタラクティブコンテンツがつくれます。これらのライブラリはそれぞれ独立して使えますし、ニーズに応じて組合わせることもできます。まずは、EaselJSとTweenJS,、SoundJS、PreloadJSが提供されます。 公式サイトcreatejs.comでは、デモやドキュメント、チュートリアル、コミュニティ、ショーケースなどが公開される予定です。 EaselJS EaselJSはHTML5のCanvasに表示リストやインタラクティブな仕組みを加えます。扱い方も、Flashのデベ
CSS3 OF THE DEAD - jsdo.it - Share JavaScript, HTML5 and CSS
http://d.hatena.ne.jp/ndruger/20110428/1304021590 「javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた」に触発されて。 クリックしてゾンビをやっつけろ･･･！ ポリスマンのような見た目にだまされるな！ 全部倒すとゲームクリアだ･･･！ 注意事項 * Chromeでしか動きません * Windows7 Chrome 13 dev でしか確認していません。 メモ * アニメーションの中でrotateX(10deg)とかするとクリックできなかった。 * 画像は全てdataURI * クリア画面を出すのは工夫した DATA URI Playground2 重宝してます！ http://jsdo.it/tsmallfield/datauriplayground2 m9( ﾟдﾟ)第二弾 CSS PANIC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
