他ではあまり見かけることのないユニークな見せ方や動きを実装したい時、遊び心あるイースターエッグを仕込んでおきたい時などに個人的に使えそうだなと思ったスクリプトをまとめてみました。ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 目次
- 窓に水滴がついていく様子を表現できる「rainyday.js」
- 水面に滴が落ちているような感じを表現できる「Raindrops.js」
- 背景に波紋エフェクトを実装できる「jQuery WebGL Ripples」
- ステッカーを剥がす（めくる）ような動きを実装できる「Sticker.js」
- 画像をジグソーパズルにしてしまう「snapPuzzle」
- 画像にチルトエフェクトを実装できる「Image Tilt Effect」
- サイトにイースターエッグを実装できる「Egg.js」
- オーバースクロール部分に仕掛けを実装できる「Overscroll.js」
- アンダーラインをギターの弦のようにできる「underline.js」
- 要素にスポットライト演出を実装できる「Spotlight」
1. 窓に水滴がついていく様子を表現できる「rainyday.js」
とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。
水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。
2. 水面に滴が落ちているような感じを表現できる「Raindrops.js」
コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプラグインです。
パラメータも幾つか用意されていてエフェクト時の長さや高さを調整できる他、頻度・スピード・位置などに関しても任意のものに設定することができます。
3. 背景に波紋エフェクトを実装できる「jQuery WebGL Ripples」
こちらも水に関連するエフェクトを実装できるjQueryプラグインで、ページ全体が水面のようになり、カーソルの動きやクリックに反応して波紋が広がるようになります。
4. ステッカーを剥がす（めくる）ような動きを実装できる「Sticker.js」
画像や要素にホバーすると、それらがステッカーが剥がれるようにめくれていく動きを実装できるスクリプトです。
上からホバーすると上から剥がれていくというように、ホバーする際の方向によって上下左右のいずれかからめくれるようになっています。
5. 画像をジグソーパズルにしてしまう「snapPuzzle」
画像を分解してジグソーパズルのようにしていまうことができるjQueryプラグインで、rowsとcolumnsのパラメータを変更することでピース数を増やすこともできます。
ピース化された画像はドラッグ&ドロップで動かすことができ、完成後のコールバックなども設定できるので、パズルが完成すると何か特別なコンテンツを出したりすることも可能です。
6. 画像にチルトエフェクトを実装できる「Image Tilt Effect」
文章では伝わり辛いと思うので実際にデモをみてほしいのですが、画像にホバーすると少しぼかし効果が付加されたり傾いたりして、ただの平面画像を少し立体的な感じで見せることができます。
ただ、ホバーに対しての動きなのもあってタッチデバイスでは実装できないので注意が必要です。
7. サイトにイースターエッグを実装できる「Egg.js」
いわゆるコナミコマンドのようなイースターエッグを実装できるスクリプトです。
キーを指定する際によくこの手のプラグインはJavaScriptのキーコードを入力する必要がありますが、このプラグインは「↑」の場合は「up」、「←」の場合は「left」、普通のアルファベットに関してもそのまま入力というように、キーコード指定せずに実装することができます。（キーコードでの指定もできます）
8. オーバースクロール部分に仕掛けを実装できる「Overscroll.js」
OSやブラウザによっては確認ができないので使用範囲はかなり限られてしまいますが、オーバースクロールした際に画像を出現させるといった仕掛けを実装できるスクリプトです。
デモでは上下それぞれでオーバースクロールした際に猫が出現するようになっており、動きが見たい場合はOS XやiPhoneなどで閲覧すれば確認できます。
9. アンダーラインをギターの弦のようにできる「underline.js」
それぞれのテキスト下に表示されているアンダーラインにホバーするとギターの弦を弾くようなアニメーションで動き、更に実際に弦を弾いた時のような音まで出るスクリプトです。
※デモは音が出る注意してください。
10. 要素にスポットライト演出を実装できる「Spotlight」
その名の通りスポットライトのアニメーションを実装できるjQueryプラグインです。
パラメータも幾つか用意されており、スピード・イージング・位置・方向・ライトの大きさなどをそれぞれ調整することができます。