[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
Post on:2014年9月29日
sponsors
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。
ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。
デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。
メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
IE8対応、セクションごとにフルスクリーンでコンテンツを表示させる縦長スクロールページを作るjQueryのプラグイン。各セクションはハッシュリンク対応。
Respontent
デモページ（左：適用、右：非適用）
画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて最適化する自動レスポンシブ化するjQueryのプラグイン。
パララックスのエフェクトで、コンテンツが指定位置の時はくっきり表示させ、スクロールしてフォーカスが変わる時にぼやけた感じになります。
プロダクト画像などを360度回転させて表示できるjQueryのプラグイン。商品写真をぐるぐるさせるだけでなく、キャプチャのようにパノラマビューのように横長画像をアニメーションで表示させることもできます。
ヘッダやコンテンツの背景に、Canvasで描かれた幾何学模様をパララックスエフェクトでアニメーション表示するjQueryのプラグイン。
ページを無限スクロール対応にするjQueryのプラグイン。下方向に増やすだけでなく、キャプチャのように上方向（マイナス）や横方向に増やすこともできます。一度スクロールを始めると、終わりがありませんｗ
Morphing Buttons Concept
デモページ
普通のフラットなボタンをクリックすると、さまざまなモーフィングのアニメーションでコンテンツが表示されます。ソーシャルコンテンツとかログインフォームとか。
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグイン。
.mp4, .webm などの動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグイン。レスポンシブ対応です。
ユーザーがフォームに入力する際、その進捗をサイトのデザインを損なわないよう上部にアニメーションで美しく表示するスクリプト。
ソリッドなラインだけでなく、グラデやセクションごとに区切るのとかもあります。
ページのローディング時に、かっこいいさまざまなSVGのアニメーションを与えます。
sponsors
