Javascriptで特殊効果

昔だと、画像の文字だけを変えたい場合はGIFアニメで作り込むしか方法が無かったと思います。
例えばこの「愛生会病院」のページではGIFファイルでアニメの効果を出しています。

このテクニックは非常に簡単ですが、同時に非常にケイパビリティが低い物となっています。 もし、診療科が一つ減った場合はまたGIFアニメを作り直す必要があります。

私が作ったスクリプトのサンプルは文字をテキストで持っているため、文字の内容や大きさ、色を後から変えることが出来ます。 このため非常にケイパビリティーが高いです。

デモおよびコードのダウンロードはこちらから

アクセスしにくいホームページ

最近のホームページは落ち着いていますが、昔は新しい技術が闇雲に使われていたような感じがします。 音楽が流れたり、文字がスクロールしたりしていたと思います。

それがいつの間にか無くなりシンプルな物が多くなりました。 ここで改めて昔のページを見てみるととっても鬱陶しいと思います。 以下のサイトはそれを体験するのに非常に便利なサイト?だと思います。

ジャズ紳士
愛生会病院
ながくんのホームページ
なおくんのホームページ
じゅんちゅん

今見るとインパクトが大きいですが、昔はこのようなページばかりだったと思います。

マウスストーカーを作ってみました。

最近、ホームページ上でマウスに画像が付いてくることがありませんか? ブラウザの新機能?かなと思っていましたが、Javascriptで実装していると最近教えてもらいました。

と同時に興味が出てきたので、簡単に実装してみました。 サンプルでは無味乾燥な画像が追従するだけですが、遅延プログラムやアニメを行うプログラムを実装すると面白いかもしれません。

行っていることは

HTMLの17行目で外部ファイルを宣言しています。
スクリプトでは、ウィンドウロード時にマウスが動いたときのイベントを関数に結び付けています。

マウスストーカーを作りたい人はダウンロードして改造してみてください。

マウスストーカーサンプル(デモとダウンロード)

JavascriptでCSSを書き換え

CSSを使っていると、自動的にプロパティの値をスクリプトで変えてみたくなると思います。
ただ、分かりやすいサンプルがあまり無いため私も苦労しました。 そのため、簡単なサンプルをダウンロード可能な形式で作りましたので参考にしてください。

簡単なサンプル
超簡単なサンプル

簡単なサンプルでは、CSSの高さや幅、マージンなどの多くの要素をフォームから変更出来ます。
超簡単なサンプルでは幅のみを変更します。 まずは超簡単な方をダウンロードして理解してみてください。
   


 

グーグルアドセンスで稼ぐ
人気ブログランキングへ
にほんブログ村 写真ブログ 風景写真へ
にほんブログ村

follow jihei at http://twitter.com