キャンバスの勉強No.23(canvasでのお絵かきNo.07)

2021.07.12.07:00



 キャンバス内でお絵かきする第七弾です。

 皆さんはHeeさん枠をご参照されてブログ記事

 を作成されていますね。

 小生もHeeさんの記事を拝読して勉強していま

 す。その中で最近CSSアニメーションの記事を

 読みました。これはJavaScriptを使用しなくて

 もCSSの設定により画像や文字列のアニメ風の

 動きを表現する事が出来ることです。

 そこで、小生もCanvas以外にCSSの設定だけで

 画像やキャラクタのアニメーション画像の作成

 にトライしてみました。

 



 先ず初めに画像枠よりも横幅の広い画像を

 背景として配置します。ここでは昭和記念公園

 のパノラマ画像を採用して、CSSの設定により

 左右にゆっくりスクロールして行く画像を配置

 します。ここではそれぞれの両端に接すると反

 転するように設計しています。次に、前回作成

 したsvg画像を9VAeに取り込んで、アニメgifに

 出力したまここまさんのgif画像を背景の上に配

 置します。右向きと左向きの歩行パターンがある

 ので、以下の様に2枚の背景画像の上で歩行する

 ように配置しました。ご参照下さい。



 このようにすれば、皆さんもお手持ちの画像

 やキャラクタ等のgif画像を利用して、CSSの設定

 だけでアニメーション画像を容易に作成出来る

 のではないでしょうか?

 ご参考までに、これらの作成に記述したhtml文章

 を下欄に表記しておきますので、ご利用下さい。

 使用する背景画像やアニメgifを変更して、後は

 サイズ等の数値を変更するだけで作成出来ます。

 皆様のユニークな画像を掲載されるのを期待し

 ます。





まここまさんの9VAeからのアニメ

gifによる歩く姿No.1





まここまさんの9VAeからのアニメ

gifによる歩く姿No.2





 まここまさんの9VAeからのアニメ

 gifによる歩く姿No.1





 まここまさんの9VAeからのアニメ

 gifによる歩く姿No.2



関連記事

comment

Secret

不完全ですが

2021.07.12.17:03

こんにちは(^o^)丿
とりあえず ペッタンコ ペッタンコして
アップしてみました。
2番目もアップしようとしましたが
1番目の画像と入れ替わってしまい
何がいけないのか ソースを見直す気力が
もうないので今日はここまでとしました。
面白いソースをご提供いただき
ありがとうございますm(__)m

まここまさんへ

2021.07.13.11:51


 何をおっしゃっているのか良く分かりませんが
 画像が切り替わらないのは、前のファイル
 のキャッシュが残っているからでは無いですか?
 
 何度もリロードするか、ファイル名を変更
 してアップロードすれば解消されると思います。

プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR