【jQuery】テキストで背景を切り抜く［TextHoler.js］の使い方

今回ご紹介する［TextHoler.js］を使うと、テキストで背景画像をマスキングして切り抜き表示してくれます。

まずはサンプルをご覧ください。

DEMO : https://on-ze.com/demo/jquery-textholer.js

このサンプルのように、画像形式はGIFも指定できるので動きのある表現も可能です。

使い方は以下より。

［TextHoler.js］の使い方

最初に必要なデータファイルをダウンロードします。

GitHub : https://github.com/diegodalbosco/TextHoler.js

こちらのサイトから「Download ZIP」をクリックすると、「textHoler.js」というファイルを入手できます。
このファイルをHTMLの適当な箇所で読み込みます。

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="textHoler.js"></script>

このプラグインはjQueryに依存しますので、上記サンプルコードのように先にjQueryの本体ファイルも読み込んでおきましょう。
今回はGoogleのCDNにホストされている「jquery.min.js」を使うことにしました。

続いては［TextHoler.js］を効かせるテキスト部分を作ります。

HTML

<span id="test">SAMPLE TEXT</span>

ここでは仮に「id="test"」と名付けてあります。
この要素に対して初期設定を行います。

jQuery

$('#test').textHoler({
	background: "http://example.com/sample.png"
});

このように textHoler(); の引数内で背景として使用する画像を指定して準備完了。

記述したコードをまとめると次のようになっています。

<body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="textHoler.js"></script>
<script>
$('#test').textHoler({
	background: "http://example.com/sample.png"
});
</script>
<span id="test">SAMPLE TEXT</span>
</body>

なお背景画像の「background-repeat」や、フォントサイズ、フォントウェイトなどはCSSではなく、スクリプト側で設定することになります。

オプション設定

オプションで指定できる項目は次のとおり。

$('#test').textHoler({
	background: "http://example.com/sample.png"
	color: "transparent",
	size: "48px",
	family: "arial",
	repeat: "repeat",
	weight: 700
});

フォントサイズを指定する「size」では、「px」だけではなく「vw」などの単位でも指定可能。
また「font-family」も任意のものに変更できます。

基本的にはスクリプト側で［TextHoler.js］を効かせたい要素を指定するだけなので、使い方も簡単。
ぜひお試しください。