[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
Post on:2015年11月25日
sponsors
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
Brazzers Carousel
Brazzers Carousel -GitHub
デモページ
レスポンシブ対応の操作が軽快なカルーセル。ホバーでの操作にも対応しているので、GIFアニメーションのようにコマ送りで再生させることもできます。
スマホなどのタッチデバイス対応、ハードウェア アクセラレータのアニメーションが気持ちいい、ミニマルにデザインされた素敵なスライダー。
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示する自由度の高いカルーセル。「last carousel」と副題がついているくらいに、最後にたどり着くのはこれという出来です。
Pogo Slider
Pogo Slider -GitHub
デモページ
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。
lightboxの進化形、Mediumで採用されているような気持ちいい操作で画像を拡大するシンプルなスクリプト。画像の拡大はクリック・タップ、元に戻すのはクリック・タップ・Esc・スクロールに対応しています。
Superbox
Superbox -GitHub
デモページ
上記の画像拡大はシンプルで素敵ですが、こちらもlightboxの進化形。lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示します。
さまざまなデザインのプログレスバー、上部に細いライン、サークル、カウント、バウンド、回転などを簡単に設置できます。カラーはテーマファイルで簡単に変更できます。
Raindrops
Raindrops -GitHub
デモページ
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できます。水面の高さや色、滴の数や間隔や勢いなどを調整可能。
Midnight.js
Midnight.js -GitHub
デモページ
ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。
デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。
Youtube Background Video
デモページ
YouTubeの動画をページいっぱいの背景として表示します。
スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用します。スクリプトは外部ファイルを加えるだけ、アニメーションはHTMLに記述する簡単実装です。
Animsition
Animsition -GitHub
デモ: ページ遷移、デモ: オーバーレイ
ページを表示する時やリンクをクリックした時に、スライド、フェード、回転、ぱたりなどのかっこいい58種類のアニメーションを加えます。jQueryのプラグインだけでなく、WordPressのプラグインも用意されています。
ページをスクロールすると、コンテンツをパスに沿って、次々に表示します。
パスは直線だけでなく、曲線も可能で、デモの右下「Show Path」でパスが表示されます。
ScrollMenu.js
ScrollMenu.js -GitHub
デモページ
縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装します。
スクロールしてもナビゲーションが最上部に配置され、各セクションにアニメーションのスクロールで移動するナビゲーションを実装します。
jQuery SectionMenu -GitHub
デモページ
縦長ページで垂直に配置されたセクションに対応したシンプルなメニューを実装します。
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させます。
jQuery.panelSnap
jQuery.panelSnap -GitHub
デモページ
1ページに複数のパネルを垂直に配置した際、スクロールして次のパネルを表示する時にずれたポジションでスクロールをやめても、ベストなポジションに自動でスナップさせます。
ふわりとした追従のアニメーションが気持ちいいです。ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されます。
gridscrolling.js
gridscrolling.js -GitHub
デモページ
メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置します。
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化されたスクリプト。これ系のシンプルなライブラリはおそらくこれだけです。
sponsors
