page-parallax


Install
bower install page-parallax

Documentation

###这个lib使用AMD方式加载,基于Jquery,TweenMax开发。

Demo: http://www.xzfblog.com/demo/page-parallax/demo/index.html

config 文件:

requirejs.config({
	baseUrl: "../dev",
	paths: {
		"jquery" : 'http://code.jquery.com/jquery-1.10.1.min',
		"TweenMax": "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min",
		"smooth_mousewheel": "smooth_mousewheel",
		"parallax": "parallax"
	},
	shim: {
	    "smooth_mousewheel" : ["jquery"],
	    "parallax" : ["jquery"]
	}
});

require(['jquery', "smooth_mousewheel", "parallax"], function($, SmoothMousewheel, Parallax) {
	$(function (){
		Parallax.init($("section"));
		Parallax.addTo($(".left-box"), "section-1", [{stone: 0.5, duration:0.4 , vars: { x: '+=100' ,y: '+=400'}}]);
		Parallax.addTo($(".right-box"), "section-1", [{stone: 0.5, duration:0.4 , vars: { x: '-=100' ,y: '+=400'}}]);
		$(window).on("SmoothScroll", function (e){
			 console.log(e.scrollTop);
			 Parallax.update(e.scrollTop);
		});

		SmoothMousewheel.enable();
	});
});

####API: ######Parallax.init($elems);

要加视差的单元,如: $("selction");

######Parallax.update(top);

Current scroll top

######Parallax.addTo($el, timeline, parallaxArr);

手动添加, $el:添加对象,timeline:对应单元的id名,parallaxArr:视差参数

#####parallaxArr 视差参数说明 Demo:{stone: 0.5, duration:0.4 , vars: { x: '+=100' ,y: '+=400'}}]

stone: 开始的时间点,(0-1之间) duration: 动画时间间隔,(0-1之间与stone相加不能大于1) vars: TweenMax 动画参数

#####注意: 第一个section stone的区间0.5-1 最后一个section stone的区间0-0.5