【jQuery】スクロールの様々なイベントを利用したパララックスエフェクトjquery.scrollParallax

jQuery

jquery.scrollParallax

February 16, 2018

jquery.scrollParallaxはスクロールの様々なイベントを利用したパララックスエフェクトを実装するjQueryプラグイン。

Usage

Initial setting

$.parallax({
	stage: window,
	direction: 'y',
	debugMode: true
});

If you are using a jquery.dataExtend

$('.parallax-timing').dataExtend('parallaxTiming');
$('.parallax-speed').dataExtend('parallaxSpeed');
$('.parallax-fit').dataExtend('parallaxFit');

timing

Initial setting

$.parallaxTiming({
	timingLinePercent: 50
});

Behavior

$(el).parallaxTiming(
	fixScrollPosition: null,
	start: null,
	end: null,
	toggle: []
);

speed

$(el).parallaxSpeed({
	style: 'top',
	speed: 2,
	min: -999999,
	max: 999999,
	fixStyleValue: String($element.css(style)),
	fixScrollPosition: 0
});

further practice

$(el).parallaxSpeed {
	sytle: ['top', 'left', 'background-color'],
	speed: [0.5, 2, 2],
	min: [100, 100, [100,10,0]],
	max: [500, 500, [255,255,200]] //rgb(100, 100, 100)
	fixScrollPosition: 300
}

If you are using a jquery.dataExtend

<p class="parallax-speed"
	data-style="['top', 'left', 'background-color']"
	data-speed="[0.5, 2, 2]"
	data-min="[0.5, 2, 2]"
	data-max="[500, 500, [255,255,200]]"
	data-fix-scroll-position="300">Test</p>

fit

$(el).parallaxFit({
	start: 0,
	end: 500,
	fromStyle: {
		top: '100px'
	},
	toStyle: {
		top: '700px'
	},
	easing: 'easeInOutBack',
});

If you are using a jquery.dataExtend

<p class="parallax-fit"
	data-start="0"
	data-end="500"
	data-from-style="{'top': '100px'}"
	data-to-style="{'top': '400px'}"
	data-easing="easeInOutBack">Test</p>

further practice

$(el).parallaxFit({
	start: 0,
	end: 500,
	fromStyle: {
		top: '100px'
	},
	toStyle: {
		top: '400px'
	},
	easing: 'easeInOutBack',

	motion1End: 700,
	motion1FromStyle: {
		left: '300px'
	},
	motion1ToStyle: {
		left: '400px'
	},
	motion1Easing: 'easeInOutBack',
});

MIT

Latest Posts

Related Posts