釣魚不全
■つまらないモノですが!
■JavaScriptを使ったアニメーション(1)
水槽でのタナゴの観察のページで使っていたスクリプトです。
タイリクバラタナゴが沈む餌を見つけて食べる様子を表現しようと試みました。
パラパラ漫画のようにもっとたくさんの画像を用意すればよいのですが、
スクリプトの実行と画像の読み込み（インターネット上での転送）に時間がかかり、
どうしてもぎこちない動きにしかなりませんでした。
捨てるのももったいないのでこの物置きに収納しておくことにしました。
(2005年5月26日)
このスクリプトはこのページのソースをご覧になって、
<!-- JavaScriptでのパラパラ漫画 はじまり -->
<!-- JavaScriptでのパラパラ漫画 おわり -->
の間にあるものがそれです。どこでみつけて拾ってきたのか忘れましたが
、どなたかがWEBでJavaScriptのサンプルとして公開されていたものそのままのはずです。
ぎこちない動きですが、これでも13枚の画像を使っています。画像はタナゴ以外は透過になっている
透過GIF画像です、PhotoEditorで一枚一枚作りました。ここでは、このページのHTMLファイルが
あるのと同じフォルダの中に"tgif"というフォルダを設けてその中に"1-0.gif"から"1-15.gif"までの
名前を付けた16枚の画像を順番に呼び出しています。
ただ、無料のGeocitiesのサーバーなど動く広告が挿入される仕様のサーバーでは、
ブラウザが画像をいちいち呼び出す段階で、ブラウザが1個しか持っていないタイマーを、
動く広告表示のスクリプトと当スクリプトが奪い合っているようで時々変な動きになります。
一度これと同じスクリプトで当サイトのトップページの看板のロゴを動かしていたのですが、
ローカルでは問題無く動作していたのですが、無料のGeocitiesのサーバーにアップロードしたファイルを
呼び出すと変になりました。時に最初から動かなかったり、途中で止まってしまったりなどしました。
結局、この現象はやはりブラウザのタイマーを使うスクリプトが二つあったのが原因のようです。
尚、原画はディレクトリ
ware-house/discontinued/tgif/
で一覧できます。
(2007年01月04日追記)
■JavaScriptを使ったアニメーション(2)
次も同じようなものですが、こんどは閲覧にこられた方のパソコンのブラウザに 「あらかじめ画像を読み込んでもらう」 という処理をしてから画像を呼び出すスクリプトにしました。これは■菊地さんの工作室■というWEBサイトで 公開されていました。それで、使う時も出典を表示してくださいということでしたのでソースに記述してあります。 このページでこの記述をしている時点ではまだ没になっていませんが、将来没になるかもしれませんので (でも、たぶん、そうならないと思いますが、)ここに掲載しておきます。
トップページ(home)では今はこのJavaScriptは
外部ファイル
になっていますが、
このページではスクリプトを<head>と</head>の間に記述しています。また、ここでは
ループを無限ループとして動きがいつまでも見られるようにもしています。
このページでは、
<head>と</head>の間の、
<!-- JavaScriptでの釣魚不全看板 はじまり -->と、
<!-- JavaScriptでの釣魚不全看板 おわり -->の間の記述、そして、
<body>と</body>の間の、
<body onload="slideShow()">がセットになっています。
さらに、画像を表示する場所には、
<img alt="" src="" name="slideimg" height="" width="">
と記述しています。これだと確実に動くようです、ブラウザで画面外からスクロールして表示した場合は再読み込みして下さい。
尚、原画はディレクトリ
ware-house/discontinued/title/
で一覧できます。
(2007年01月04日)
■JavaScriptを使ったマウスストーカー
私のブログ"釣魚不全Weblog"の個別記事ページに設置したスクリプトです。 イヌでもわかるJavaScript講座 で紹介されていたものを採用させていただきました。 マウスカーソルから一定距離で少し離れたところに画像が表示するようになっています。 マウスカーソルの位置を動かすとそれに追随してくる画像で、"マウスストーカー"というものであるらしいです。 なお、画像自体がピクピク動くのはアニメーションGIFという画像形式を使っているためです。 これは、いくつかの画像からGIMPというソフトを使って合成して作ったものです。
このページでは、
<head>と</head>の間の、
<!-- JavaScriptを使ったマウスストーカー はじまり -->と、
<!-- JavaScriptを使ったマウスストーカー おわり -->の間の記述、そして、
<body onload="slideShow()">がセットになっています。
(実際には他の関数名も呼出していますので、<body onload="◯◯◯◯;slideShow()">となっています。)
さらに、画像を表示する場所には、
<!-- JavaScriptを使ったマウスストーカーの原画表示 はじまり -->と、
<!-- JavaScriptを使ったマウスストーカーの原画表示 おわり -->の間の記述があります。
この画像は、ブラウザでJavaScriptを無効にして閲覧するとCSSで指定された場所に表示されますが、
その位置をJavaScriptで変更しているようです。
これも「動く」ということでは面白いのですが、あまりよい趣味だとは言えないかもしれません。
今のところは削除するつもりはありませんが、
ビワコチビタナゴがチビじゃなくなってオトナになれば没にするかもしれません。
(2008年08月24日)
