イメージホバーにさまざまなエフェクトを加えるjQueryプラグイン「picBeautifier 3000」

プラグインのダウンロード&読み込み

プラグインを下記URLからダウンロードするかCDNから使用します。

malditoprotozoo/picBeautifier-3000

使用するのは「src/app.js」です。
使用するHTMLでjQueryと一緒に読み込みましょう。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.rawgit.com/malditoprotozoo/picBeautifier-3000/dev/src/app.js"></script>

使用方法

HTMLは下記のようにfigureで囲む形でimgを配置します。

<figure>
	<img src="img/01.jpg">
</figure>

JavaScriptです。
たとえばホバーでセピア調にしたい場合下記のようにします。

<script type="text/javascript">
(function($) {
	$(function() {
		objFunctions.applyFilteryHover('figure', 'sepia', '100')
	});
})(jQuery);
</script>

拡大スケールの場合はhoverLargeScaleを使用します。

objFunctions.hoverLargeScale('figure', '1.3');

2つ記述することで、セピア調にしつつ拡大させることもできます。

objFunctions.applyFilteryHover('figure', 'sepia', '100');
objFunctions.hoverLargeScale('figure', '1.3');

その他にもいろいろエフェクトがありますので、下記デモページをご確認ください。

Pic Beautifier Demo