対象をオンマウスする事で、ポップアップのように吹き出しが出現する
ウェブページを作る事になりました。

そこで利用するのがJavaScriptなのですが、
そのまま普通に書いていくと、じつに大変でしょう。
しかしここで、「jQuery」というフレームワークを利用する事で、
欲しい機能がそこに集約されており、それを呼び出す事で、
凝ったエフェクトなどの作成も可能となります。

jQueryを入手するにはこちら。

また、参考になるサイトはこちら。

自分も最初は、ウェブページの概念を習ったときには、
JavaScriptは無理だなと思っていたぐらいなのですが、
次の訓練でJavaプログラミングを習った後、このjQueryに触れてみると、
ある程度の困惑はあったものの、実際に動いているのを見て、
案外簡単に入る事ができました。
「Java」と「JavaScript」dではほぼ別物なのですが、
大体は似通った部分があるため、プログラムの動作が見えるようになれば、
ほぼ同じ要領でこなせます。

ただし、もちろんながら大きな勘違いをしていたときもありました。
それは、jQueryのみで全てをまかなえること。
そう思っていたうちは、あらゆる動作をjQueryの参考資料のみで探そうとしていました。
しかしそれは間違いであり、変数や関数、if文など、
本来のJavaScriptも組み合わせて使うべきだという事を、知りました。

最初の頃は、サムネイル画像をクリックする事で、
大きく表示された写真が切り替わるページを作ってみたり、
常時スクリプトを回す方法がわかってからは、
時間で切り替わる仕組みなんかも作ってみました。
写真切り替えのスライドショーなら、たくさんのプラグインが出ているようですが、
あえてそれらを使わず、自分で作ってみようと思っていました。

今回作ったのは、オンマウスで出現する吹き出しなのですが、
最初はオンマウスした時点で、パッと出る吹き出しでした。
しかし、それでは寂しく拡大縮小の要素も付けてみようと思いました。

吹き出しを出すだけならさほど難しくはないのですが、
拡大縮小のアニメーションを付与させる事で、
そのアニメーション中の動作も考える必要があります。
つまり、アニメーション中にさらに命令を与えると、
命令がそのオブジェクトに対して過剰に蓄積されていき、
動作が変になってしまいます。
アニメーションがなければ一瞬で終わるので、それを配慮する必要もないのですが、
アニメーションを導入すると、閲覧者の人はそれまで操作を待ってくれるとは限りません。
なるべく、あらゆる操作に対して対策を取っておきたいところです。

そして今回取った対策は、アニメーション開始時に、
現在動作中の命令を、すべて削除してから行おうという方法です。
こうする事で、拡大縮小のアニメーション中でも、
その時点の状態から動作が逆転するという、
意外と自然な流れになりました。

下にそのサンプルを置いてみましたので、ぜひオンマウスしてみてください。

Tweet