jQuery

【jQuery】パララックス背景画像アニメーションを作成するjQuery.backgroundParallax

August 30, 2018
jQuery.backgroundParallax.js

jQuery.backgroundParallax.jsはパララックス背景画像アニメーションを作成するための軽量のjQueryプラグイン。

Usage

Markup

<div class="parallax-panel" data-src="images/01.png"></div>

Styles

.parallax-panel {
  min-height: 400px;
}

Initialization

$('.parallax-panel').backgroundParallax();

Options

css カスタムスタイルを追加する

{
  backgroundSize: 'cover',
  backgroundPosition: '50% 0',
  backgroundRepeat: 'no-repeat',
  overflow: 'hidden'
}

isMobile モバイルデバイスでディセーブルにします。

Options example

$('.parallax-panel').backgroundParallax({
	css: {
		backgroundSize: 'cover',
		backgroundPosition: '50% 0',
		backgroundRepeat: 'no-repeat',
		overflow: 'hidden'
	},
	isMobile: false
});

MIT