wireview.js

Examples

たくさんの設定値があります。色々試してみると新たな発見があるかもしれません。

1. クリックで再生

再生する

$(function() {
	var wire = $('.js-content-01').wireview({
		autoStart: false
	});
	$('.js-btn-01').on('click', function() {
		wire.startAnimation();
	});
});

2. 上にレイヤーを乗せない

再生する

$(function() {
	var wire = $('.js-content-02, .js-content-02 h1, .js-content-02 p').wireview({
		autoStart: false,
		isLayer: false
	});
});

3. 速度を変更

再生する

$(function() {
	var wire = $('.js-content-03, .js-content-03 h1, .js-content-03 p').wireview({
		// 基本設定
		autoStart: false,					// 自動再生するか否か
		// 上に乗せるレイヤーの設定
		isLayer: false,					// 上にレイヤーをのせるか否か
		layerHideSpeed: 1500,			// レイヤーが消える速度
		// ボーダーの設定
		isLine: true,					// ボーダーのアニメーションを行うかどうか
		isLineWhile: false,				// 表示したままか否か
		lineSpeed: 500,					// アニメーション速度
		lineLastTimeMin: 500,				// 線が消えるときの最小時間
		lineLastTimeMax: 1500,			// 線が消えるときの最大時間
		// アニメーションの設定
		startDelay: 100,					// アニメーション開始までのディレイ
		hideWait: 100,					// フレームを消すまでの待機時間
	});
	$('.js-btn-03').on('click', function() {
		wire.startAnimation();
	});
});

4. 線の見た目を変更

再生する

$(function() {
	var wire = $('.js-content-04, .js-content-04 h1, .js-content-04 p').wireview({
		// 基本設定
		autoStart: false,					// 自動再生するか否か
		// 上に乗せるレイヤーの設定
		isLayer: false,					// 上にレイヤーをのせるか否か
		// ボーダーの設定
		isLine: true,					// ボーダーのアニメーションを行うかどうか
		lineSpeed: 1500,				// アニメーション速度
		lineColor: '#0000ff',			// 枠線の色
		lineStrokeSize: 6,				// 枠線の太さ
		linePositionGapMin: 0,			// 線の配置ずれの最小値
		linePositionGapMax: 0,			// 線の配置ずれの最大値
		lineGapMin: 6,					// 線の長さのずれの最小値
		lineGapMax: 12,					// 線の長さのずれの最大値
		lineAlphaGapMin: 1.0,			// 線の透明度のずれの最小値(0〜1.0)
		lineAlphaGapMax: 1.0,			// 線の透明度のずれの最小値(0〜1.0)
		// 二重線の設定
		isLineDouble: false,			// 二重線を引くかどうか
		// 薄いボーダーの設定
		isLineAlpha: false,				// 薄い線を引くかどうか
	});
	$('.js-btn-04').on('click', function() {
		wire.startAnimation();
	});
});
</script>

5. 矩形で描画

「isRect」をtrueにすると、アニメーション終了時に四角形を上下に移動させることができます。

再生する

$(function() {
	var wire = $('.js-content-05, .js-content-05 h1, .js-content-05 p').wireview({
		// 基本設定
		autoStart: false,					// 自動再生するか否か
		// 上に乗せるレイヤーの設定
		isLayer: false,					// 上にレイヤーをのせるか否か
		// 四角形の設定
		isRect: true,					// 四角形のアニメーションを行うかどうか
		isRectWhile: false,				// 表示したままか否か
		rectSpeed: 500,					// アニメーション速度
		rectStartScale: 1,				// アニメーション開始時のスケールサイズ
		rectColor: '#000',				// 枠線の色
		rectStrokeSize: 5,				// 枠線の太さ
		rectFillColor: '#999',			// 塗りつぶしの色
		rectFillWidthMax: 1000,			// 設定サイズ以下なら塗りつぶしをしない
		rectFillHeightMax: 300,		// 設定サイズ以下なら塗りつぶしをしない
		rectFillRandPer: 100,			// 塗りつぶしランダムの割合(20なら20%)
		rectLastPosRandYMin: 50,			// 四角形が消える際のY座標のずれ最小値
		rectLastPosRandYMax: 100,			// 四角形が消える際のY座標のずれ最大値
		rectLastTimeMin: 500,			// 四角形が消えるときの最小時間
		rectLastTimeMax: 1500,			// 四角形が消えるときの最大時間
		// ボーダーの設定
		isLine: false,					// ボーダーのアニメーションを行うかどうか
		// 二重線の設定
		isLineDouble: false,			// 二重線を引くかどうか
		// 薄いボーダーの設定
		isLineAlpha: false,				// 薄い線を引くかどうか
	});
	$('.js-btn-05').on('click', function() {
		wire.startAnimation();
	});
});

6. コールバックでイベント制御

再生する

$(function() {
	var wire = $('.js-content-06, .js-content-06 h1, .js-content-06 p').wireview({
		// 基本設定
		autoStart: false,					// 自動再生するか否か
		// 上に乗せるレイヤーの設定
		isLayer: false,						// 上にレイヤーをのせるか否か
		// 四角形の設定
		isRect: false,						// 四角形のアニメーションを行うかどうか
		// コールバック
		endAnimation: function () {			// アニメーション後、消えた直後のコールバック
			alert('アニメーションが終了しました');
		}
	});
	$('.js-btn-06').on('click', function() {
		wire.startAnimation();
	});
});