[JS]特定の要素にブラー効果(ぼかし)を与えるjQueryプラグイン「Foggy」
スポンサード
オプションの
Foggy で背景画像にブラー効果を効かせたデモはこちらです。
Foggyで、特定の要素にブラー効果(ぼかし)を与えるデモ
スポンサード
スマホアプリ起動時のスプラッシュ画像などにもよく見る「磨りガラス風のぼかし」効果ですが、
特定の要素に対してこのぼかし効果を与えることができるというjQueryプラグイン「Foggy」のご紹介です。
Foggy のダウンロード
以下のページより、Foggy のファイルをダウンロードします。Foggy の設置方法
<head> タグ内に、jquery ファイルと一緒にjquery.foggy.min.js ファイルを設置します。<script src="./jquery.min.js"></script> <script src="./jquery.foggy.min.js"></script> <script> $(document).ready(function(){ $('.blur').foggy({ blurRadius: 5, opacity: 0.5, cssFilterSupport: true }); }); </script>上記例では、
blur
というクラス名の要素に対してブラー(ぼかし)効果を与えます。オプションの
blurRadius
は「ぼかしの強さ」です。値が大きいほどぼかしがきつくになります。opacity
は「透明度」です。値が大きいほどはっきり表示されるようになります。CSS で背景画像を指定したDIV 要素をぼかす
例として、background-image
で背景画像を指定したDIV 要素にブラー(ぼかし)効果を与えてみました。<style> .blur { width:640px; height:480px; background-image:url(./images/foggy01.jpg); background-position:50% 0; background-repeat:no-repeat; } </style> <div class="blur"></div>
Foggy で背景画像にブラー効果を効かせたデモはこちらです。
Foggyで、特定の要素にブラー効果(ぼかし)を与えるデモ
スポンサード
コメント