jQuery Scroll Path视差滚动js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery Scroll Path视差滚动js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>jQuery Scroll Path视差滚动插件</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<link rel="stylesheet" type="text/css" href="style/scrollpath.css" /> 
		<link rel="stylesheet" type="text/css" href="style/style.css" /> 
		<meta name="description" content="" /> 
		<meta name="keywords" content="" /> 
	</head>
	<body>
		<div class="wrapper">
			<header id="me">
				<h1> I'm John Doe, </h1>
				<h2> Web Frontend Developer. </h2>
			</header>
			<section id="about">
				<h1>About Me</h1>
				<p>
					I'm a creative web fanatic with ten years of experience under my belt. 
					I strive to create great user experience on the web, 
					both in design and code. By looking at my work, 
					you'll see that I settle for nothing short of perfection.
				</p>
			</section>
			<section id="designed">
				<h1>Things I've Designed</h1>
				<ul class="gallery">
					<li><img src="#/200x140/?t=1" alt="placeholder"></li>
					<li><img src="#/200x140/?t=2" alt="placeholder"></li>
					<li><img src="#/200x140/?t=3" alt="placeholder"></li>
					<li><img src="#/200x140/?t=4" alt="placeholder"></li>
				</ul>
			</section>
			<section id="developed">
				<h1>Things I've Developed</h1>
				<ul class="gallery">
					<li><img src="#/200x140/?t=5" alt="placeholder"></li>
					<li><img src="#/200x140/?t=6" alt="placeholder"></li>
					<li><img src="#/200x140/?t=7" alt="placeholder"></li>
					<li><img src="#/200x140/?t=8" alt="placeholder"></li>
				</ul>
			</section>
			<section id="contact">
				<h1>Contact</h1>
				<p>
					If you want to get in touch, shoot me an email at john@doe.me. I'm also on Twitter, Google+
					and Facebook, in case you feel like saying hello.
				</p>
			</section>
		</div>
		<script src="jquery-1.7.2.min.js"></script>
		<script src="script/min.jquery.scrollpath.js"></script>
		<script>
			// Get the path object from the plugin.
			var path = $.fn.scrollPath("getPath");
			
			// Start the path at the center of #me
			path.moveTo( 300, 150, { name: "me" });
			// Vertical line going right towards the #about section
			path.lineTo( 1600, 150, { name: "about" });
			// Arc down towards the design gallery, rotating a quarter of a circle along the way
			path.arc( 1600, 975, 825, -Math.PI/2, 0, false, { rotate: -Math.PI/2 }); 
			// Short vertical line to the design gallery
			path.lineTo( 2425, 1150, { name: "designed" });
			// Diagonal line down to the development gallery
			path.lineTo( 1050, 1450, { name: "developed" });
			// Another line diagonal going up towards to the contact section
			path.lineTo( -525, 1050, { name: "contact" });
			// Short vertical line upwards
			path.lineTo( -525, 975 );
			// The last arc that connects back to the beginning,
			// going clockwise from the left to the top while rotating.
			path.arc( 300, 975, 825, -Math.PI, -Math.PI/2, false, { rotate: -Math.PI } );
			// Rotate back to original angle.
			path.rotate( 0 );
			
			// Initiate the plugin
			$(".wrapper").scrollPath({ drawPath: false, wrapAround: true });

			// Set navigation link click behavior to animate to the different sections
			// over a duration of 2 seconds.
			$("nav a").click(function(e) {
				e.preventDefault();
				$.fn.scrollPath("scrollTo", this.hash.substring(1), 2000);
			});
		</script>
	</body>
</html>

JS代码(min.jquery.scrollpath.js):

/* jQuery Scroll Path Plugin by Joel Besada (http://joelb.me/scrollpath). Version 1.1,MIT LICENSED */
(function(h,u,s,M){
	function N(a,b){
	function C(a,b){
	e=Math.min(a,e);
	m=Math.min(b,m);
	c=Math.max(a,c);
	f=Math.max(b,f)}
var q=0,k=0,d=0,c=0,f=0,e=0,m=0,v=[{
	method:"moveTo",args:[0,0]}
],n=[],s={
	rotate:null,callback:null,name:null}
;
	this.rotate=function(a,C){
	var j=h.extend({
}
,s,C),g=Math.abs(a-d),g=Math.round(g/b)*o,c=(a-d)/g,r=1;
	if(E){
	for(;
	r<=g;
	r++)n.push({
	x:q,y:k,rotate:d+c*r,callback:r===g?j.callback:null,name:r===g?j.name:null}
);
	d=a%(2*Math.PI)}
else(j.name||j.callback)&&this.moveTo(q,k,{
	callback:j.callback,name:j.name}
)}
;
	this.moveTo=function(a,b,j){
	var g=h.extend({
}
,s,j),c=n.length?o:1;
	for(i=0;
	i<c;
	i++)n.push({
	x:a,y:b,rotate:null!==g.rotate?g.rotate:d,callback:i===c-1?g.callback:null,name:i===c-1?g.name:null}
);
	q=a;
	k=b;
	C(a,b);
	v.push({
	method:"moveTo",args:arguments}
)}
;
	this.lineTo=function(b,c,j){
	for(var g=h.extend({
}
,s,j),f=b-q,r=c-k,e=Math.sqrt(f*f+r*r),e=Math.round(e/a)*o,f=f/e,r=r/e,m=null!==g.rotate&&E,l=m?(g.rotate-d)/e:0,t=1;
	t<=e;
	t++)n.push({
	x:q+f*t,y:k+r*t,rotate:d+l*t,callback:t===e?g.callback:null,name:t===e?g.name:null}
);
	d=m?g.rotate:d;
	q=b;
	k=c;
	C(b,c);
	v.push({
	method:"lineTo",args:arguments}
)}
;
	this.arc=function(b,c,j,g,e,f,m){
	var l=h.extend({
}
,s,m),y=b+Math.cos(g)*j,t=c+Math.sin(g)*j,A=b+Math.cos(e)*j,B=c+Math.sin(e)*j,w,x=g;
	w=e;
	var u=f,D=F(x),p=F(w),z=Math.abs(D-p),O=2*Math.PI-z;
	w=u&&D<p||!u&&D>p||D===p&&x!==w?O:z;
	x=Math.round(j*w/a)*o;
	w=w/x*(f?-1:1);
	D=(u=null!==l.rotate&&E)?(l.rotate-d)/x:0;
	p=1;
	for((q!==y||k!==t)&&this.lineTo(y,t);
	p<=x;
	p++)n.push({
	x:b+j*Math.cos(g+w*p),y:c+j*Math.sin(g+w*p),rotate:d+D*p,callback:p===x?l.callback:null,name:p===x?l.name:null}
);
	d=u?l.rotate:d;
	q=A;
	k=B;
	C(b+j,c+j);
	C(b-j,c-j);
	v.push({
	method:"arc",args:arguments}
)}
;
	this.getPath=function(){
	return n}
;
	this.getCanvasPath=function(){
	for(var a=0;
	a<v.length;
	a++)v[a].args[0]-=this.getPathOffsetX(),v[a].args[1]-=this.getPathOffsetY();
	return v}
;
	this.getPathWidth=function(){
	return c-e+40}
;
	this.getPathHeight=function(){
	return f-m+40}
;
	this.getPathOffsetX=function(){
	return e-20}
;
	this.getPathOffsetY=function(){
	return m-20}
}
function P(){
	l.scrollBar&&(e=h("<div>").addClass("sp-scroll-bar").on("click",function(a){
	var b=Math.round(a.offsetY/e.height()*(d.length-1));
	5<Math.abs(b-c)&&(b=c+5*o*(b>c?1:-1));
	m(b);
	a.preventDefault();
	return!1}
),y=h("<div>").addClass("sp-scroll-handle").on({
	click:function(a){
	a.preventDefault();
	return!1}
,mousedown:function(a){
	if(0===a.button)return G=!0,a.preventDefault(),!1}
}
),h(s).on({
	mouseup:function(){
	G=!1}
,mousemove:function(a){
	if(G){
	var a=a.clientY-e.offset().top,a=Math.round(a/e.height()*(d.length-1)),b=d.length-1,a=a>b?b:0>a?0:a,b=a%o;
	m(b>o/2?a+o-b:a-b)}
}
}
),h("body").prepend(e.append(y)))}
function Q(){
	if(l.drawPath&&R){
	var a;
	a={
	position:"absolute","z-index":9998,left:f.getPathOffsetX(),top:f.getPathOffsetY(),"pointer-events":"none"}
;
	a[n+"user-select"]=a["user-select"]="none";
	a[n+"user-drag"]=a["user-drag"]="none";
	a=h("<canvas>").addClass("sp-canvas").css(a).prependTo(z);
	a[0].width=f.getPathWidth();
	a[0].height=f.getPathHeight();
	a=a[0].getContext("2d");
	var b=f.getCanvasPath(),d=0;
	a.shadowBlur=15;
	a.shadowColor="black";
	a.strokeStyle="white";
	a.lineJoin="round";
	a.lineCap="round";
	for(a.lineWidth=10;
	d<b.length;
	d++)a[b[d].method].apply(a,b[d].args);
	a.stroke()}
}
function J(a){
	var b=a.originalEvent.wheelDelta||-a.originalEvent.detail,b=b/Math.abs(b);
	a.preventDefault();
	h(u).scrollTop(0).scrollLeft(0);
	A(-b*o)}
function S(a){
	if(!/^text/.test(a.target.type))switch(a.keyCode){
	case 40:A(o);
	break;
	case 38:A(-o);
	break;
	case 32:A(5*o*(a.shiftKey?-1:1))}
}
function A(a){
	m(K(c+a))}
function T(a,b,d,q){
	if(!(0===a||B)){
	if(!b||"number"!==typeof b)return"function"===typeof b&&b(),A(a);
	B=!0;
	var e=b/1E3*U,f=c,l=0,n,o=setInterval(function(){
	n=Math.round((h.easing[d]||h.easing.swing)(++l/e,b/e*l,0,a,b));
	m(K(f+n),!0);
	l===e&&(clearInterval(o),"function"===typeof d?d():q&&q(),B=!1)}
,b/e)}
}
function m(a,b){
	if(!B||b){
	var f=d[a].callback;
	z.css(V(d[a]));
	y&&y.css("top",a/(d.length-1)*(e.height()-y.height())+"px");
	f&&a!==c&&f();
	c=a}
}
function K(a){
	if(l.wrapAround)if(B){
	for(;
	0>a;
	)a+=d.length;
	for(;
	a>=d.length;
	)a-=d.length}
else 0>a&&(a=d.length-1),a>=d.length&&(a=0);
	else a=a>d.length-1?d.length-1:0>a?0:a;
	return a}
function V(a){
	var b=a.x-h(u).width()/2,d=a.y-h(u).height()/2,c={
}
;
	0===F(a.rotate)?(c.left=-b,c.top=-d,c[n+"transform-origin"]=c["transform-origin"]="",c[n+"transform"]=c.transform=""):(c.left=c.top="",c[n+"transform-origin"]=c["transform-origin"]=a.x+"px "+a.y+"px",c[n+"transform"]=c.transform="translate("+-b+"px,"+-d+"px) rotate("+a.rotate+"rad)");
	return c}
function F(a){
	for(;
	0>a;
	)a+=2*Math.PI;
	return a%(2*Math.PI)}
var n="-"+function(){
	var a=/^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,b=s.getElementsByTagName("script")[0],c;
	for(c in b.style)if(a.test(c))return c.match(a)[0];
	return"WebkitOpacity"in b.style?"Webkit":"KhtmlOpacity"in b.style?"Khtml":""}
().toLowerCase()+"-",E=function(){
	for(var a=s.createElement("dummy").style,b="transform,WebkitTransform,MozTransform,OTransform,msTransform,KhtmlTransform".split(","),c=0;
	c<b.length;
	c++)if(a[b[c]]!==M)return!0;
	return!1}
(),R=!!s.createElement("canvas").getContext,U=30,o=10,L=!1,G=!1,B=!1,c,f,d,z,e,y,H={
	scrollSpeed:50,rotationSpeed:Math.PI/15}
,l={
	wrapAround:!1,drawPath:!1,scrollBar:!0}
,I={
	init:function(a){
	(1<this.length||L)&&h.error("jQuery.scrollPath can only initialized on *one* element *once*");
	h.extend(l,a);
	L=!0;
	z=this;
	d=f.getPath();
	Q();
	P();
	m(0);
	z.css("position","relative");
	h(s).on({
	mousewheel:J,DOMMouseScroll:J,keydown:S,mousedown:function(a){
	if(1===a.button)return a.preventDefault(),!1}
}
);
	h(u).on("resize",function(){
	m(c)}
);
	return this}
,getPath:function(a){
	h.extend(H,a);
	return f||(f=new N(H.scrollSpeed,H.rotationSpeed))}
,scrollTo:function(a,b,e,f){
	var k;
	a:{
	for(k=0;
	k<d.length;
	k++)if(d[k].name===a)break a;
	k=null}
null===k&&h.error("jQuery.scrollPath could not find scroll target with name '"+a+"'");
	a=k-c;
	l.wrapAround&&Math.abs(a)>d.length/2&&(a=k>c?-c-d.length+k:d.length-c+k);
	T(a,b,e,f)}
}
;
	h.fn.scrollPath=function(a){
	if(I[a])return I[a].apply(this,Array.prototype.slice.call(arguments,1));
	if("object"===typeof a||!a)return I.init.apply(this,arguments);
	h.error("Method "+a+" does not exist on jQuery.scrollPath")}
}
)(jQuery,window,document);

CSS代码(style.css):

body{background:#0DA284;color:#fff;font-family:Helvetica,Arial,sans-serif;text-align:center;overflow:hidden;}
h1,h2{font-family:Georgia,serif;font-weight:normal;margin:0;}
header h1{font-size:92px;}
header h2,section h1{font-size:42px;}
p{font-size:20px;line-height:1.6em;text-align:left;width:600px;padding:0 100px;}
a{color:#103F32;font-weight:bold;}
header,section{margin:40px auto;}
section{display:inline-block;}
.wrapper{position:relative;}
.gallery{list-style-type:none;padding:5px;width:500px;}
.gallery li{display:inline-block;margin:5px;}
.gallery img{border:5px solid #fff;}
#me,#about,#designed,#developed,#contact{position:absolute;}
#designed,#developed,#contact{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
#about{left:1200px;}
#designed{left:2200px;top:900px;}
#developed{left:800px;top:1200px;}
#contact{left:-900px;top:900px;}
nav{position:fixed;}
nav ul{list-style-type:none;margin:0;padding:0;text-align:left;}
nav a{color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)