今回ご紹介する[TextHoler.js]を使うと、テキストで背景画像をマスキングして切り抜き表示してくれます。
まずはサンプルをご覧ください。
このサンプルのように、画像形式はGIFも指定できるので動きのある表現も可能です。
使い方は以下より。
[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]を効かせたい要素を指定するだけなので、使い方も簡単。
ぜひお試しください。
Via : TextHoler.js