[JS]画像を使用しないで、背景などにストライプ柄を手軽に適用できるスクリプト -jQuery Stripes

指定したエレメントにストライプの背景を設置できるjQueryのプラグインを紹介します。
ストライプは画像なしで、カラーや幅や角度を簡単に変更できます。

デモのキャプチャ

jQuery.Stripe -GitHub

jQuery Stripesのデモ

デモページではストライプを簡単に試すことができます。
もちろん、画像無しです。
※Canvas対応ブラウザでご覧ください。

デモのキャプチャ

デモページ

デモページはHTML, CSS, JavaScriptを変更して試すこともできます。
テキストを加え、カラーを半透明のグリーン(rgba(0,190,0,0.2))にしてみました。

デモのキャプチャ

デモページ:コードを変更

jQuery Stripesの使い方

Step 1: 外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。



Step 2: HTML

ストライプを適用するエレメントを配置します。

<img id="stripes" style="background:#888" />

Step 3: JavaScript

jQueryのセレクタでストライプを適用するエレメントを指定し、ストライプの定義をしスクリプトを実行します。


$('#stripes').stripes({
    lineWidth: 10,
    separation: 10,
    angle: 45, // degrees
    degrees: true, // false for radians
    foregroundColor: "#000", // takes any css color;
    backgroundColor: null //transparent by default
});

オプション

スクリプトのオプションでは、ストライプの幅や角度、カラーを定義できます。

lineWidth
ストライプの幅
separation
区切り幅
angle
角度
degrees
falseでラジアンに
foregroundColor
前景色
backgroundColor
背景色

top of page

©2017 coliss