[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」

1枚の背景画像をいくつかのセグメントに区割りして、それぞれがちょっと浮き上がるような面白いオープンソースのJavascriptモジュールを見つけたのでご紹介します。

このモジュールは、Filippo Bello’s Portfolio から着想を得て作られたとのこと。

ダウンロード、ソースコードはこちら。

表示例

ベーシック(オプション指定なし)な表示例

See the Pen Background Segment Effect Sample #1 by digistate (@digistate) on CodePen.

「Segment Effect」を利用するには、ダウンロードファイルに含まれる以下のスクリプトをロードしておきます。

<script src="imagesloaded.pkgd.min.js"></script>
<script src="anime.min.js"></script>
<script src="main.js"></script>

imagesloaded.pkgd.min.js : 画像ファイルの読み込み完了を検知するために必要なスクリプト。
anime.min.js : アニメーション用のスクリプト。
main.js : 「Segment Effect」のメインスクリプト。

CSSは「component.css」が必要です。

<link type="text/css" rel="stylesheet" href="component.css" />

エフェクトを施す背景画像の指定はフルスクリーンサイズにした要素に任意のセレクタやID(以下では class=”segmenter”)を付けてbackground-imageで画像を指定するだけです。

<div class="segmenter" style="background-image: url(segment-bg.jpg)"></div>

オプションなしで、ページロード後にエフェクトを実行する一番シンプルな記述は以下のようにします。

(function() {
	var target = '.segmenter',	// 背景画像用の要素に指定したセレクタまたはID
		segmenter = new Segmenter(document.querySelector(target), {
			onReady: function() {
				segmenter.animate();	// ページロード後に animate() で実行
			}
		});
})();

「Segment Effect」で用意されているオプションとデフォルト値は以下のとおり。

// 区分けするセグメントの数
pieces: 4, 
// 既にレンダリングされていてもセグメント表示するか
renderOnLoad: false,
// 要素にシャドウをつけるか
shadows: true,
// シャドウのアニメーション(opacity, translateX, translateYが指定可)
shadowsAnimation: {
	opacity: 1,
	// translateX: 20,
	// translateY: 20
},
// パララックス効果を有効にするか
parallax: false,
// パララックス効果の視差レベルの最小値と最大値
parallaxMovement: {min: 10, max: 40},
// セグメントのアニメーション(duration, easing, delay, opacity, translate[XYZ]が指定可)
animation: {
	duration: 1500, // アニメーション時間
	easing: 'easeOutQuad', // イージングエフェクトの種類
	delay: 0, // セグメントごとのアニメーション遅延
	// opacity: 0.5, // 不透明度
	translateZ: {min: 10, max: 65}, // Z軸方向の移動範囲
	// translateX: {min: -100, max: 100}, // X軸方向の移動範囲
	// translateY: {min: -100, max: 100} // Y軸方向の移動範囲
},
// コールバック関数
onReady: function() { return false; }, // ロード後
onAnimationComplete: function() { return false; }, // アニメーション完了後
onAnimationStart: function() { return false; },  // アニメーション開始時
// セグメントの各位置(positions:"random" とするとランダムで位置が決まる) 
positions: [
	{top: 80, left: 10, width: 30, height: 20},
	{top: 2, left: 2, width: 40, height: 40},
	{top: 30, left: 60, width: 30, height: 60},
	{top: 10, left: 20, width: 50, height: 60}
]

オプションを指定して実行する場合は以下のようにします。

var segmenter = new Segmenter(document.querySelector('.segmenter'), {
	// オプションを指定
	pieces: 4,
	animation: {
		duration: 1500,
		easing: 'easeInOutExpo',
		delay: 100,
		translateZ: 100
	},
	parallax: true,
	positions: [
		{top: 0, left: 0, width: 45, height: 45},
		{top: 55, left: 0, width: 45, height: 45},
		{top: 0, left: 55, width: 45, height: 45},
		{top: 55, left: 55, width: 45, height: 45}
	],
	// ロード後のコールバック関数
	onReady: function() {
		// 実行
		segmenter.animate();
	}
});

[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」

表示例

ベーシック(オプション指定なし)な表示例

四隅にセグメントを分けてパララックス効果を施した例

左上から右下にセグメントをずらしながら重ね合わせた例

ぶれ(ブラー)効果を施した例

９つのセグメントに分けて浮き上がる深度を深くした例