Warp drive jQuery pluginは、ワープするようなかっこいいエフェクトを実装することができるjQueryプラグインです。ファイル容量も軽量なほか、HTML5のCanvasをベースにしているとのこと。
マウスを動かせばそれに合わせて視点が追従
以下、Warp drive jQuery pluginの実際のデモページになります。
デモページにはいくつかのデモが設置されており、各デモにマウスオーバーすると、まるで宇宙空間をワープしているかのようなエフェクトを体感できます。マウスを上下左右に動かすことで、視点もそれに追従して移動します。
ワープ中はかなりダイナミックな動きになるので、ユーザーにも強い印象を与えることができそうですね。
デモには黒、青、赤、緑、紫など、いろんな色のタイプが用意されています。1番下のデモには真ん中にロゴも表示させています。SFチックなデザインを採用しているサイトにはピッタリのプラグインといえるのではないでしょうか?
セッティングできるパラメーターはかなり豊富で、widthやheightをはじめ、autoResize、addMouseControls、addTouchControls、hideContexMenu、starCount、starBgCount、starColor、starfieldBackgroundColor、starDirection、starSpeed、starFov、starRotationPermission、starWarpLineLength、starFollowMouseSensitivityなど、他にもたくさんの項目が用意されています。
というわけで、ワープするようなSFっぽいエフェクトを実装したい人は、ぜひ「Warp drive jQuery plugin」をチェックしてみてください。
ライセンスはMITとのこと。Warp drive jQuery pluginの詳しい使い方やダウンロードは、以下からどうぞ。