概要

指定した要素が画面中央に来た時にパララックス表示させるjQuery plugin.
@dependent jquery.js
@dependent jarallax.js - http://jarallax.com

設定方法

JavaScript側

data属性を使って指定する場合: $('[data-easyParallax]').easyParallax();
classを使って指定する場合:    $('.easyParallax').easyParallax();

html側

data属性を使って指定する場合: data-easyParallax="true"
classを使って指定する場合:    class="easyParallax"

demos

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

data-easyParallax-animation="rightToLeft"

data-easyParallax-animation="bottomToTop"

タイミング変更

data-easyParallax-animationStart="0.2" data-easyParallax-animationEnd="0.1"

6
data-easyParallax-animationStart="0.2" data-easyParallax-animationEnd="0.1"

グループ指定

親要素を指定すると、その中の子要素を自動的にパララックス表示させる。
最初の子要素の反応後、指定px毎に次の子要素を反応させる(画面中央に来るのを待たずに反応させる)

JavaScript側

data属性を使って指定する場合: $('[data-easyParallax-group]').easyParallaxGroup();
classを使って指定する場合:    $('.easyParallax-group').easyParallaxGroup();

html側

data属性を使って指定する場合: data-easyParallax-group="true"
classを使って指定する場合:    class="easyParallax-group"

aaa bbb ccc

3
data-easyParallax-animation="bottomToTop"

子要素を手動で指定

parent: data-easyParallax-specifyChild="true" | [plugin option] specifyChild: true
child:  data-easyParallax-child="true" | [plugin option] childClassSelector: '.ui-easyParallax-child'

aaa

callback

パララックスアニメーション完了後に実行

$('.ui-carousel').liquidCarousel({
	autoPlay:             false // {boolean} - true: autoplay
	,autoPlayHoverStop:    false // {boolean} - true: itemにマウスオーバー中はautoplayをストップ
	,autoPlayInterval:     1000 // {number} (milli second) - autoplayの間隔
});

(function () {
	var easyParallax = $('.ui-easyParallax-trigger').data('easyParallax');
	var carousel = $('.ui-carousel').data('carousel');
	var isMoved = false;
	easyParallax.$elm.on('easyParallaxEnd', function () {
		if (isMoved === false) {
			isMoved = true;
			carousel.autoPlay();
			carousel.moveBind(carousel.index + 1);
		}
	})
})();

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

easyParallax [DEMO]

概要

設定方法

JavaScript側

html側

demos

タイミング変更

グループ指定

JavaScript側

html側

子要素を手動で指定

callback