1.概要
「マーキー」 いろいろのページで目にしていると思います
文字が右から左に電光掲示板のように表示されるものです。以前はIE専用のタグであったが最近になって Firefox、Opera でも表示されるようになりました
ここで Javascript と marquee を使用して画像を反転して移動する方法を作ってみました
現在トップページに使用しています

マーキー(marquee)については様々なページで紹介されています
今回は下記のページを参考にしました
■ GIFアニメーション スクロールタイプ
■ 同じ画像を右から左へ左から右へと続けて移動させたい。
■ マーキーで動くひな形・基本編
■ 流れる文字タグ/フォントタグ/みんなのタグ辞書/HTMLタグ辞書

移動方向、速度等々のパラメーターについては上記のページを参考にしてください
2.反転して左右に移動する方法
まずサンプルをご覧下さい

■ サンプル1
2つのアニメーション画像が左から右方向に移動します
更にアニメーションを変えて右から左に移動します


■ サンプル2

複数のアニメーションが左から右方向に移動します
更にアニメーションを変えて右から左に移動します


下記をクリックすると新しいウインドウで同じものが表示されます
ブラウザからソースを表示してごらんください

サンプル1   サンプル2

3.アニメーション画像について

サンプル1について説明しましょう
サンプル1のソースを見ると次のような記述があります
これは2つのアニメーションで、 "ファイル名<>幅<>高さ<>",  の形式でデータを記述します
サンプル1では5種類のアニメーションが任意の順番に変わります
2番目のアニメーションについても同様です

//-- 先頭のアニメーション file_name , width , height
var mq_anime1 = new Array(
   "dangomushi<>32<>18<>",
   "kame<>32<>20<>",
   "katatumuri<>36<>24<>",
   "pig<>28<>18<>",
   "cho<>32<>31",

   "<><><>"
)

//-- 2番目のアニメーション file_name , width , height
var mq_anime2 = new Array(

   "suika<>62<>32<>",
   "tombo<>64<>42<>",
   "summer<>62<>32<>",
   "denden1<>40<>46<>",
   "denden2<>40<>46<>",
   "denden3<>40<>46<>",
   "car<>32<>32<>",

   "<><><>"
)

これらのアニメーションファイルは image というフォルダーを作成してこの中に入れてあります



ファイル名を見ると car_l.gif car_r.gif ・・・とあります。これは右方向、左方向の画像です

car_l.gif car_r.gif

4.反転するアニメーション画像の作り方
アニメーションは「フリーの素材」から探してきます

この画像は自動車が左から右方向に移動します
これを左方向に移動させるために画像を左右に反転させます
反転させるためのツールとして「ホームページ・ビルダー」の中のツール「ウェブアニメータ」を使います

ファイルを開きます。素材から探してきたファイルを指定します

ファイルを読み込んだ状態

[編集(E)] → [すべて選択(A)] を実行します

次に[反転(F)] → [左右反転(H)]を実行します

1:イメージ、2:イメージが選択されて向きが変わります

[名前を付けて保存(A)] します
名前は次のように付けます。これは約束ごとです
左側から移動するファイルには [ ファイル名_l.gif ] (註 l : 小文字のエルです)
右側から移動するファイルには [ ファイル名_r.gif ] とします

反転させた画像は image のフォルダーに入れます
この中で使用しているアニメーション画像の一括ダウンロード


5.まとめ
アニメーションが左右で反転して表示する方法は下記でも紹介しています
これはすべて javascript で作成しています
■ 画像が移動するアニメーション

今回は marquee (マーキー)を使って作成してみました
どうぞ、活用してみてください
2010/11/07