これは流行りそう!あらゆるHTMLエレメントをぼかす「Vague.js」

「Vague.js」はあらゆるHTMLエレメントをぼかすことの出来るjQueryプラグインです。ぼかすというだけの機能ですが、うまく使うとかなりオシャレな感じがだせます。

Vague.js

vague-js

これはとてもオシャレですね。何となく流行りそうな効果な気がします。SVGを使ってぼかしを実現しているようです。SVGって何ぞという方は以下の記事をどうぞ。

10分でわかるSVG 基礎編

 

最初はぼかされている状態です。

vague-js-nonBlur

 

ここで真ん中のボタンを押すと、このようにぼかしがとれ、鮮明な画像があらわれました。うーんとても良いですね。

vague-js-Blur

 

 

他にこんなDemoもありました。固定フッターにぼかしの効果を入れています。

vague-js-footerBlur

 

スライドするとこの通り、ぼかされていた部分が表示されます。色々な使い道が考えられますね。

vague-js-footerBlur-1

 

 

それでは「Vague.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="Vague.js"></script>

 

HTMLはこのようにマークアップします。今回はこのブログをiframeで読み込み、そこにぼかしをかけてみます。containerクラスをつけた要素がぼかしていきます。

<iframe src="http://tecuration.com" class="container"></iframe>
<article>
  <span href="#" class="btn">Toggle Blur</span>
</article>

 

CSSはこのように指定します。

body {
  margin:0;
} 
.container {
  width:100%;
  height:100%;
  background-size:cover;
  position:absolute;
}
figure {
  margin:0;
}
html, body {
  height:100%;
  margin:0;
  background:black;
  overflow: hidden;
}
article {
  position:absolute;
  top:50%;
  left:50%;
  color:white;
  z-index:1;
  width:600px;
  height:200px;
  margin:-100px 0 0 -300px;
  text-align:center;
}
span.btn {
  display:inline-block;
  background: rgba(0,0,0,0.5);
  padding: 15px;
  color: white;
  font-size: 17px;
  cursor:pointer;
}

 

JavaScriptはこのように実装します。containerクラスをぼかすようにしています。

var vague = $(".container").Vague({intensity:30});
vague.blur();
$(".btn").on("click",$.proxy(vague.toggleblur,vague));

 

するとこのように作ることができました。

vague-js-sample-Blur

 

ここで真ん中のボタンを押すと。この通りこのブログが出てきました。面白いです。

vague-js-sample-nonBlur

 

かなり簡単に使うことが出来る上に、面白い効果なのでブログやサイトに取り込んでみてはいかがでしょうか。参考にどうぞ。

 

Home > JavaScript > これは流行りそう!あらゆるHTMLエレメントをぼかす「Vague.js」

Return to page top