[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay

ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。

実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。

サイトのキャプチャ

plainOverlay
plainOverlay -GitHub

plainOverlayのデモ

デモではページ上のさまざまな要素、そしてページ全体にオーバーレイを適用しています。
まずは、一番上のdiv要素から。

デモのキャプチャ

デモ

角丸のパネルに綺麗にオーバーレイを重ねて表示し、ローディングのアニメーション(SVG)を表示しています。

iframeのウインドウにもオーバーレイを適用できます。

デモのキャプチャ

iframeにオーバーレイ

もちろん、ページ全体にも。

デモのキャプチャ

ページ全体にオーバーレイ、アニメーションでカウントダウン

plainOverlayの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="jquery-1.11.0.min.js"></script>
  <script src="jquery.plainoverlay.min.js"></script>
</head>

Step 2: HTML

HTMLはオーバーレイを適用する時に指定できるようidをつけておくと便利です。

<body>

  <div id="demo">パネル</div>

</body>

Step 3: JavaScript

jQueryのセレクタで要素を指定し、スクリプトを実行します。基本書式は下記のようになります。


//show
  element.plainOverlay('show'[, options])

//hide
  element.plainOverlay('hide')

ページ全体にオーバーレイを適用する時は、下記のようになります。

$('body').plainOverlay('show'); 

スクリプトのオプションでは、オーバーレイのさまざまな設定ができます。

duration
オーバーレイが適用される時間(default: 200)
color
オーバーレイのカラー(default: #888)
opacity
オーバーレイの不透明度(default: 0.6)
progress
オーバーレイに表示する要素(default: 無し)
zIndex
オーバーレイのz-indexの値(default: 9000)

sponsors

top of page

©2018 coliss