[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ

最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。

デモのキャプチャ

Midnight
デモページ

ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。
デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。

デモのキャプチャ

Off Canvas Menu Effects
デモページ

メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。

デモのキャプチャ

pagePilling.js
デモページ

IE8対応、セクションごとにフルスクリーンでコンテンツを表示させる縦長スクロールページを作るjQueryのプラグイン。各セクションはハッシュリンク対応。

デモのキャプチャ

Respontent
デモページ(左:適用、右:非適用)

画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて最適化する自動レスポンシブ化するjQueryのプラグイン。

デモのキャプチャ

Parallax + Blur +Fixed Menu

パララックスのエフェクトで、コンテンツが指定位置の時はくっきり表示させ、スクロールしてフォーカスが変わる時にぼやけた感じになります。

デモのキャプチャ

Rollerblade.js
デモページ

プロダクト画像などを360度回転させて表示できるjQueryのプラグイン。商品写真をぐるぐるさせるだけでなく、キャプチャのようにパノラマビューのように横長画像をアニメーションで表示させることもできます。

デモのキャプチャ

Paricleground
デモページ

ヘッダやコンテンツの背景に、Canvasで描かれた幾何学模様をパララックスエフェクトでアニメーション表示するjQueryのプラグイン。

デモのキャプチャ

Endless.JS
デモページ

ページを無限スクロール対応にするjQueryのプラグイン。下方向に増やすだけでなく、キャプチャのように上方向(マイナス)や横方向に増やすこともできます。一度スクロールを始めると、終わりがありませんw

デモのキャプチャ

Morphing Buttons Concept
デモページ

普通のフラットなボタンをクリックすると、さまざまなモーフィングのアニメーションでコンテンツが表示されます。ソーシャルコンテンツとかログインフォームとか。

デモのキャプチャ

Animsition
デモページ

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグイン。

デモのキャプチャ

Vide
デモページ

.mp4, .webm などの動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグイン。レスポンシブ対応です。

デモのキャプチャ

Fort.js
デモページ

ユーザーがフォームに入力する際、その進捗をサイトのデザインを損なわないよう上部にアニメーションで美しく表示するスクリプト。
ソリッドなラインだけでなく、グラデやセクションごとに区切るのとかもあります。

デモのキャプチャ

Page Loading Effects
デモページ

ページのローディング時に、かっこいいさまざまなSVGのアニメーションを与えます。

sponsors

top of page

©2018 coliss