カテゴリー別

お絵描き、デザイン

写真、動画関連ソフト

アメーバピグ専用ソフト

ホームページ関連

画像処理

スキャナー用

SEO 関連

お楽しみ

その他

過去ログ

2017年08月29日(火)

javascript で jpeg アニメーション

もうそろそろ、Flash コンテンツとは
おさらばしといた方がよさそうですね。

私のホームページでは、ミルノ PC フォトフレーム とかで
使用しているアニメーションが Flash (swf) なので、
javascript で実行可能な形式に書き替えました。
(ローカルでの話。まだ、公開してません)

javascript がオフの場合は、先頭フレームが正常に表示できること。
できれば、img タグを使用したいってな要件で作りました。

ココ とかでも使われているように、
動画はフレームを横方向に連結した
普通の画像をスクロールさせることで実現すれば OK ですね。

ちなみに、画像を横方向に連結する方法はこちら に書いてあります。

で、最初のフレームだけを表示するには、
画像を html でトリミングすることで実現できます。

調べてみると、css の object-fit プロパティを使うと
img タグのみでできそうなのでよさそうですが、
IE とかが対応していないみたいなので却下です。

あんまり美しくないですが、img を 親要素で
トリミングする方法を採用しました。

やり方はここ にありますね。

で、あとは、img の位置 (left) を javascript の
タイマー処理で左方向にずらしていけば OK です。

とりあえず、img タグの onload プロパティで javascript
オジェクトのインタンスを作成して実行してみましたが、
このサイトで HTML を検証 してみると、
there is no attribute "ONLOAD"
っていわれるから、あんまよくないのかも。

・・・

IE でも chrome でもちゃんと動くけど、どしよっかな。

ブログ著者のホームページはこちら です。


コメント
コメントする