scroll-parallax-effect

このプラグインには3つの機能があります。

Timing
指定したタグを通過したときに指定のクラスを追加する
Speed
スクロール量に応じてcssを変化させる
Fit
移動距離に応じてcssを変化させる

Install

npm install scroll-parallax-effect

yarn add scroll-parallax-effect

Timing

指定したタグを通過したときに指定のクラスを追加するまた、上から下、下から上に向かって通過したときにそれぞれ関数を実行することもできます。

const timing = new parallaxTiming([
	(e) => {
		console.log('上から下')
	},
	(e) => {
		console.log('下から上')
	}
])

Speed

スクロール量に応じてcssを変化させます。スクロール1に対して、どのぐらい移動するかをspeedで指定することができます。

const speed = new ParallaxSpeed({
	style: 'top',
	speed: 2,
	fixScrollPosition: 500
})

Fit

移動距離に応じてcssを変化させます。
スクロールがstartからendまで移動したときに
fromStyleからtoStyleにcssが変化していきます。
easingを指定することも可能です。

const fit = new ParallaxFit([{
	start: 0,
	end: 200,
	fromStyle: {
		opacity: 0
	},
	toStyle: {
		opacity: 1
	},
	easing: 'easeOutCubic'
}]