[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ

縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。

面白い仕掛けや便利な機能を実装できるスクリプトのまとめ

プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。

デモのキャプチャ

Brazzers Carousel
Brazzers Carousel -GitHub
デモページ

レスポンシブ対応の操作が軽快なカルーセル。ホバーでの操作にも対応しているので、GIFアニメーションのようにコマ送りで再生させることもできます。

デモのキャプチャ

Iory
Iory -GitHub
デモページ

スマホなどのタッチデバイス対応、ハードウェア アクセラレータのアニメーションが気持ちいい、ミニマルにデザインされた素敵なスライダー。

デモのキャプチャ

Slick
Slick -GitHub
デモページ

画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示する自由度の高いカルーセル。「last carousel」と副題がついているくらいに、最後にたどり着くのはこれという出来です。

デモのキャプチャ

Pogo Slider
Pogo Slider -GitHub
デモページ

divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。

デモのアニメーション

Zoom.js -GitHub
デモページ

lightboxの進化形、Mediumで採用されているような気持ちいい操作で画像を拡大するシンプルなスクリプト。画像の拡大はクリック・タップ、元に戻すのはクリック・タップ・Esc・スクロールに対応しています。

デモのキャプチャ

Superbox
Superbox -GitHub
デモページ

上記の画像拡大はシンプルで素敵ですが、こちらもlightboxの進化形。lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示します。

デモのキャプチャ

PACE
PACE -GitHub
デモページ

さまざまなデザインのプログレスバー、上部に細いライン、サークル、カウント、バウンド、回転などを簡単に設置できます。カラーはテーマファイルで簡単に変更できます。

デモのアニメーション

Raindrops
Raindrops -GitHub
デモページ

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できます。水面の高さや色、滴の数や間隔や勢いなどを調整可能。

デモのキャプチャ

Midnight.js
Midnight.js -GitHub
デモページ

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

デモのキャプチャ

Youtube Background Video
デモページ

YouTubeの動画をページいっぱいの背景として表示します。

デモのアニメーション

ScrollMe
デモページ

スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用します。スクリプトは外部ファイルを加えるだけ、アニメーションはHTMLに記述する簡単実装です。

デモのキャプチャ

Animsition
Animsition -GitHub
デモ: ページ遷移デモ: オーバーレイ

ページを表示する時やリンクをクリックした時に、スライド、フェード、回転、ぱたりなどのかっこいい58種類のアニメーションを加えます。jQueryのプラグインだけでなく、WordPressのプラグインも用意されています。

デモのキャプチャ

jQuery Scroll Path
デモページ

ページをスクロールすると、コンテンツをパスに沿って、次々に表示します。
パスは直線だけでなく、曲線も可能で、デモの右下「Show Path」でパスが表示されます。

デモのキャプチャ

ScrollMenu.js
ScrollMenu.js -GitHub
デモページ

縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装します。

デモのキャプチャ

SMINT
デモページ

スクロールしてもナビゲーションが最上部に配置され、各セクションにアニメーションのスクロールで移動するナビゲーションを実装します。

デモのキャプチャ

jQuery SectionMenu -GitHub
デモページ

縦長ページで垂直に配置されたセクションに対応したシンプルなメニューを実装します。

デモのキャプチャ

OnePageR -GitHub
デモページ

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させます。

デモのキャプチャ

jQuery.panelSnap
jQuery.panelSnap -GitHub
デモページ

1ページに複数のパネルを垂直に配置した際、スクロールして次のパネルを表示する時にずれたポジションでスクロールをやめても、ベストなポジションに自動でスナップさせます。

デモのアニメーション

Flow Up
デモページ

ふわりとした追従のアニメーションが気持ちいいです。ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されます。

デモのキャプチャ

gridscrolling.js
gridscrolling.js -GitHub
デモページ

メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置します。

デモのキャプチャ

roll.js -GitHub
デモページ

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化されたスクリプト。これ系のシンプルなライブラリはおそらくこれだけです。

top of page

©2017 coliss