動きのあるホームページブログ!!

  • TOP
  • ブログ
  • JQueryとSVGフィルタを使用したぼかしビュー「bluroverlay.js」の作成方法
jQuery bluroverlay.js Plugin Demo

動くホームページブログ!!

JQueryとSVGフィルタを使用したぼかしビュー「bluroverlay.js」の作成方法

bluroverlay.jsはCSS3やSVGぼかしフィルタは特定のコンテンツをカバーするiOSスタイルブラーオーバーレイマスクを作成することを可能にするJQueryのプラグインです。

bluroverlay.js作業手順

HEAD内に最新のJQueryのバージョンbluroverlay.jsを読み込みます。

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/bluroverlay.min.js"></script>

このプラグインを使用してぼかすヘッダーを作成します。

<header id="header">
  <h1>This is Blurred Header</h1>
</header>

コンテンツのCSSクラスを持つDIV要素にメインのコンテンツを挿入します。

<div class="content-wrapper">
  ...
</div>

プラグインの初期化をします。

blurOverlay = $("#header").bluroverlay();

また、効果を適用したいデフォルトの選択することができます。

$("#header").bluroverlay({
  contentWrapperClass: "content-wrapper"
});

次にオプションを使用してぼかし効果をカスタマイズ!!

$("#header").bluroverlay({
  blur: 10,
  opacity: 0.4,
  background: "#fff",
  height: "60px"
});

表示/ぼかし効果を非表示にします。

blurOverlay.showBlurmask();
blurOverlay.hideBlurmask();

下の写真はこのプラグインを使用した例です。
わかりやすくするため、ぼかし部分を縦幅を広げています。

ice_screenshot_20160827-104544

 

デモサイトはこちらから確認
ファイル一式ダウンロードはこちら

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

  2. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!

    JQueryの登場で最近よく見受けられる背景動画を用いたWEBサイト。…

  3. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  4. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

  5. 20160204blog

    動くホームページブログ!!

    WEB上で本をめくるような電子カタログプラグインのご紹介!!

    本をめくるような電子カタログプラグイン「turn.js」のご紹介です。…

  6. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

    レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 20160204blog

    動くホームページブログ!!

    WEB上で本をめくるような電子カタログプラグインのご紹介!!
  2. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン④
  3. 9eebd6ae3e003dafbcb134405e540da0_s

    制作ツールブログ!!

    OSの入ったSSD(Cドライブ)をコピー(クローン)、交換方法!!
  4. 20160721blog_img1

    WEBデザイン

    WEBデザインには欠かせないフォント特集!!
  5. _shared_img_thumb_PAK85_kakomaretairoenpitu1278_TP_V

    WEBデザイン

    ホームページの見やすさの視認性と読みやすさの可読性!!