blurify.jsを使って画像をぼかす方法をご紹介します。
Contents
画像をぼかす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>
blurify.jsを使って画像をぼかすデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告