blurify.jsを使って画像をぼかす方法 DAD UNION

blurify.jsを使って画像をぼかす方法をご紹介します。

Contents

画像をぼかすCSSの記述
blurify.jsを使って画像をぼかすHTMLの記述
blurify.jsを使って画像をぼかすJavaScriptの記述
blurify.jsを使って画像をぼかすデモページ

画像をぼかすCSSの記述

※ここは特に重要ではないので、必要に応じて変更して下さい。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
</style>

blurify.jsを使って画像をぼかすHTMLの記述

※ぼかすjpg画像（1.jpg）を用意します。画像のimgタグにclass=”blurify”を指定します。

<h1>blurify.jsを使って画像をぼかす</h1>

<img data-src="1.jpg" class="blurify" width="800">

blurify.jsを使って画像をぼかすJavaScriptの記述

※blurify.jsファイルを読み込みます。blurify({オプション})を記述します、オプションにはぼかす画像タグ要素（.blurify）やブラー値等を設定します。

<script src="blurify.js"></script>
<script>
    (function () {
        blurify({
            images: document.querySelectorAll('.blurify'),
            blur: 6,
            mode: 'auto',
        });
    })();
</script>