jQuery Scroll Path是一个基于滚动条的jQuery插件，它将内容串成一条线索，当用户开始滚动页面时，整个内容就开始沿线索进行动画滚动，效果令人赞叹。

如何使用

jQuery Scroll Path使用HTML5的canvas风格API，用户在JS当中只需指定线索化路线即可。

HTML

	

		
jQuery Scroll Path
		↓ A Quick Demo ↓
	

	

		It's a plugin for defining custom scroll paths.
	

	

		It uses canvas flavored syntax to draw lines and arcs.
	

	

		It comes with a custom scrollbar.
	

	

		It also does rotations
		in supported browsers.
	

	

		It's available with documentation on GitHub.
	

	

		Feel free to follow me on Twitter. You can also be a kind person and tweet this.
	

JavaScript

$.fn.scrollPath("getPath")
		// 移动到start元素
		.moveTo(400, 50, {name: "start"})
		//连至description元素
		.lineTo(400, 800, {name: "description"})
		// 转至syntax元素
		.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)
		.lineTo(600, 1600, {
			callback: function() {
				highlight($(".settings"));
			},
			name: "syntax"
		})
		.lineTo(1750, 1600, {
			callback: function() {
				highlight($(".sp-scroll-handle"));
			},
			name: "scrollbar"
		})
		.arc(1800, 1000, 600, Math.PI/2, 0, true, {rotate: Math.PI/2 })
		.lineTo(2400, 750, {
			name: "rotations"
		})
		// 翻转
		.rotate(3*Math.PI/2, {
			name: "rotations-rotated"
		})
		.lineTo(2400, -700, {
			name: "source"
		})
		.arc(2250, -700, 150, 0, -Math.PI/2, true)
		.lineTo(1350, -850, {
			name: "follow"
		})
		.arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});

许可证

jQuery Scroll Path使用MIT进行许可发行。