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

サイト構築 -JavaScript

Post on:2013年1月21日

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: 背景色

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

jQuery Stripesのデモ