matchHeight.js・ScrollReveal.jsをより便利に使えるスニペット。

こんにちは、アンドレです。
いろいろなJSプラグインを見ていて、1つ気付いたことがあります。
それは、設定にdata属性をうまく利用しているプラグインは、より使いやすいということです。
そこで今回は、社内でも使用頻度の高いJSプラグイン、matchHeight.jsおよびScrollReveal.jsを、data属性を利用して、より便利に使えるようになるスニペットをご紹介します。

【補足】

matchHeight.jsは要素の高さを揃えるプラグイン、ScrollReveal.jsはスクロールに応じてアニメーションさせるプラグインです。
また、コードにはjQueryのセレクタ・メソッドを使用しています。

matchHeight.js用スニペット

JSスニペット


(function() {
	var $jsMh = $('.js-mh');

	if ($jsMh.length) {
		$(window).on('load', function() {
			$jsMh.each(function() {
				var $this = $(this);
				var arrayMhTarget = $this.data('mh-target').split(' ');

				for (var i = 0; i < arrayMhTarget.length; i++) {
					$this.find(arrayMhTarget[i]).matchHeight();
				}
			});
		});
	}
})();

CodePenサンプル

See the Pen matchHeight.js用スニペット使用例 by Takamasa Okada (@NP-okada) on CodePen.

使い方

matchHeightを適用したい要素の親要素に「js-mh」クラスを付与し、カスタムデータ属性「data-mh-target」に適用したい要素のセレクタを指定します（スペース区切りで複数指定可）。

ScrollReveal.js用スニペット

JSスニペット


(function() {
	var sr = ScrollReveal();

	$('.js-sr').each(function() {
		var dataObj = $(this).data();
		var srParams = {};

		for (var key in dataObj) {
			if (key.indexOf('sr') === 0) {
				var srKey = key.slice(2);
				srKey = srKey.charAt(0).toLowerCase() + srKey.slice(1);
				srParams[srKey] = dataObj[key];
			}
		}
		sr.reveal(this, srParams);
	});
})();