flash代替キャッチアニメについての考察

原森が使っているFFではflashアニメを動作させない設定にしてますので、flash広告が動作しようとするたびに、動かすかどうかのメッセージが表示されたりしますが、基本的にflashアニメは動作させません。
web制作業界で言えば、flashムービーは（かつてDirectorで作っていたshockwaveやQuickTimeムービーと同様に）中身が解析できない仕様なので飯のタネとして専門家がたくさん登場する技術なのですが、プラグインが必要だったので動作しない人がいる場合もあったりなかったりで、企業サイトで使う時には、昔はわざわざプラグインダウンロードページを作っていました。さらにリンクを貼ったり、プラグインのインストールや設定方法を説明するページを用意したりする感じでかなり面倒な状態でした。

FLASHもMacromedia shockwave flashとして登場した頃からいろいろあって、ライバルのAdobeの商品になってしまいましたが、googleさんやyoutubeさんとW3C策定のHTML5への各ブラウザベンダーの対応のおかげで、flashで作らなくてもHTML5＆CSS3でムービーが作れるようになりましたし、javascriptでcanvasに次々と絵を描写して動かしたりするアニメも作れるようになりました。

canvasのアニメについては、イラストレータ的な絵が描けるsvgと違い、ドット絵的手法で色を塗るタイプなのですが、1pxのラインが描けない点がドット絵職人にはいまいち不満な点かもしれません、と思う今日この頃です。
(※canvasについては、原森が2013年頃にその実験をしてた頃の情報です)

サンプル2以降はページの仕様上、繰り返しアニメにしています。

主なcssやテクニック

background-image: url(…);

ボックスに背景画像を配置する等でposition , top , left と組み合わせたり

position

ボックスに背景画像の時は absolute を指定してtop,leftなどで位置指定

top

top位置

left

left位置

animation

アニメを指定するcssプロパティ

@keyframes

アニメのキーフレーム指定

transform

要素の変形を指定するcssプロパティ

ページトップへ