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