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



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 thisData = $(this).data();
		var srSettings = {};

		for (var key in thisData) {
			if (key.indexOf('sr') === 0) {
				var slicedKey = key.slice(2).toLowerCase();
				srSettings[slicedKey] = thisData[key];
			}
		}
		sr.reveal(this, srSettings);
	});
})();

CodePenサンプル

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

使い方

ScrollRevealを適用したい要素に「js-sr」クラスを付与し、カスタムデータ属性「data-sr-【オプション名】」にデフォルトから変更したいオプション名と値(例:data-sr-distance="100px"など)を指定します。

まとめ

個別の設定値などは、HTML側に持たせたほうが分かりやすかったり、変更が容易だったりするので、カスタムデータ属性はどんどん利用していきたいところです。
また便利なスニペットができましたら、ご紹介したいと思います。