以下是 jq鼠标滚动视差效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq鼠标滚动变化效果</title>
<script type="text/javascript">
//http://detectmobilebrowsers.com/ + tablets
(function(a) {
if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
{
window.location="mobile.html"
}
})(navigator.userAgent||navigator.vendor||window.opera);
</script>
<style>#preloader {
background:#89c3b4 url('images/loader.gif') center center no-repeat;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1000;
}</style>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="skrollr-body">
<div id="preloader"></div>
<div id="wish1" class="centered" data-0="width:100%;" data-1000="width:0%;"></div>
<div id="wish2" class="centered " data-1000="width:100%;" data-2000="width:0%;">
<div id="snow" class="centered" data-1000="top:0px;" data-2000="top:100px"></div>
</div>
<div id="ribbon-left" class="ribbon" data-1500="width:0%;" data-2500="width:50%;" ></div>
<div id="ribbon-right" class="ribbon" data-1500="width:0%;" data-2500="width:50%;" ></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px" >
<path class="" style="fill:none;stroke:#49675f;stroke-width:40;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0" data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;" d="M169,174C123,169-17.5,87.5,36,34S169,174,169,174z" />
<path class="" style="fill:none;stroke:#49675f;stroke-width:40; stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0" data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;" d=" M169,174c46-5,186.5-86.5,133-140S169,174,169,174z"/>
</svg>
<div id="pattern1" class="centered " data-2500=" height:100%; "data-3500="height:0%;"></div>
<div id="pattern2" class="centered"></div>
<div id="wish3" class="centered" data-4000="width:0px; height:0px; "data-6000="width:550px; height:550px; "></div>
</div>
<script src="javascripts/skrollr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
document.getElementById("preloader").style.display = 'none';
skrollr.init({
forceHeight: false
});
}
</script>
</body>
</html>
JS代码(skrollr.js):
/*! skrollr v0.5.6 https://github.com/Prinzhorn/skrollr | free to use under terms of MIT license */
(function(e,t,n){
"use strict";
function I(n){
tt=this,n=n||{
}
,at=n.constants||{
}
;
if(n.easing)for(var i in n.easing)F[i]=n.easing[i];
rt={
beforerender:n.beforerender,render:n.render}
,it=n.forceHeight!==!1,pt=n.smoothScrolling!==!1,dt={
targetTop:tt.getScrollTop()}
,it&&(ut=n.scale||1),Q(s,[l],[c]);
if(it){
var u=t.getElementById("skrollr-body")||t.createElement("div"),a=u.style;
a.minWidth="1px",a.position="absolute",a.top=a.zIndex="0",u.id||(a.width="1px",a.right="0",o.appendChild(u)),ot=function(){
st=0,q(),a.height=st+s.clientHeight+"px",r.iscroll&&e.setTimeout(function(){
r.iscroll.refresh()}
,0)}
}
else ot=function(){
st=o.scrollHeight-s.clientHeight,q(),vt=!0,r.iscroll&&e.setTimeout(function(){
r.iscroll.refresh()}
,0)}
;
return tt.refresh(),K("resize",ot),function f(){
S(f),U()}
(),tt}
var r=e.skrollr={
get:function(){
return tt}
,init:function(e){
return tt||new I(e)}
,VERSION:"0.5.6"}
,i=Object.prototype.hasOwnProperty,s=t.documentElement,o=t.body,u="rendered",a="un"+u,f="skrollable",l="skrollr",c="no-"+l,h="linear",p=1e3,d=200,v="start",m="end",g="top",y="center",b="bottom",w="___has_rendered_class",E="___skrollable_id",S=e.requestAnimationFrame;
(function(){
var t=["ms","moz","webkit","o"],n;
for(n=0;
n<t.length&&!S;
n++)S=e[t[n]+"RequestAnimationFrame"];
var r=0;
S||(S=function(t){
var n=Z(),i=Math.max(0,30-(n-r));
e.setTimeout(function(){
t(n+i)}
,i),r=n+i}
)}
)();
var x=/^\s*(.+)\s*$/m,T=/^data(?:-(_\w+))?(?:-?(-?\d+))?(?:-?(start|end|top|center|bottom))?(?:-?(top|center|bottom))?$/,N=/\s*([a-z\-\[\]]+)\s*:\s*(.+?)\s*(?:;
|$)/gi,C=/^([a-z\-]+)\[(\w+)\]$/,k=/-([a-z])/g,L=function(e,t){
return t.toUpperCase()}
,A=/[\-+]?[\d]*\.?[\d]+/g,O=/\{
\?\}
/g,M=/rgba?\(\s*-?\d+\s*,\s*-?\d+\s*,\s*-?\d+/g,_=/[a-z\-]+-gradient/g,D=/^O|Moz|webkit|ms/,P,H;
if(e.getComputedStyle){
var B=e.getComputedStyle(o,null);
for(var j in B){
P=j.match(D)||+j==j&&B[j].match(D);
if(P)break}
}
P=(P||[""])[0],H="-"+P.toLowerCase()+"-",D=n;
var F={
begin:function(){
return 0}
,end:function(){
return 1}
,linear:function(e){
return e}
,quadratic:function(e){
return e*e}
,cubic:function(e){
return e*e*e}
,swing:function(e){
return-Math.cos(e*Math.PI)/2+.5}
,sqrt:function(e){
return Math.sqrt(e)}
,bounce:function(e){
var t;
if(e<=.5083)t=3;
else if(e<=.8489)t=9;
else if(e<=.96208)t=27;
else{
if(!(e<=.99981))return 1;
t=91}
return 1-Math.abs(3*Math.cos(e*t*1.028)/t)}
}
;
I.prototype.refresh=function(e){
var r,i=!1;
e===n?(i=!0,nt=[],mt=0,e=t.getElementsByTagName("*")):e=[].concat(e);
for(r=0;
r<e.length;
r++){
var s=e[r],o=s,l=[],c=pt;
if(!s.attributes)continue;
for(var h=0;
h<s.attributes.length;
h++){
var p=s.attributes[h];
if(p.name==="data-anchor-target"){
o=t.querySelector(p.value);
if(o===null)throw'Unable to find anchor target "'+p.value+'"';
continue}
if(p.name==="data-smooth-scrolling"){
c=p.value!=="off";
continue}
var d=p.name.match(T);
if(d!==null){
var g=d[1];
g=g&&at[g.substr(1)]||0;
var y=(d[2]|0)+g,b=d[3],S=d[4]||b,x={
offset:y,props:p.value,element:s}
;
l.push(x),!b||b===v||b===m?(x.mode="absolute",b===m?x.isEnd=!0:(x.frame=y*ut,delete x.offset)):(x.mode="relative",x.anchors=[b,S])}
}
if(l.length){
var N,C,k;
!i&&E in s?(k=s[E],N=nt[k].styleAttr,C=nt[k].classAttr):(k=s[E]=mt++,N=s.style.cssText,C=s.className);
var L=nt[k]={
element:s,styleAttr:N,classAttr:C,anchorTarget:o,keyFrames:l,smoothScrolling:c}
;
Q(s,[f,u],[a]),L[w]=!0}
}
ot();
for(r=0;
r<e.length;
r++){
var A=nt[e[r][E]];
if(A===n)continue;
A.keyFrames.sort(et),z(A),X(A)}
return tt}
,I.prototype.relativeToAbsolute=function(e,t,n){
var r=s.clientHeight,i=e.getBoundingClientRect(),o=i.top,u=i.bottom-i.top;
return t===b?o-=r:t===y&&(o-=r/2),n===b?o+=u:n===y&&(o+=u/2),o+=tt.getScrollTop(),o+.5|0}
,I.prototype.animateTo=function(e,t){
t=t||{
}
;
var r=Z(),i=tt.getScrollTop();
return ht={
startTop:i,topDiff:e-i,targetTop:e,duration:t.duration||p,startTime:r,endTime:r+(t.duration||p),easing:F[t.easing||h],done:t.done}
,ht.topDiff||(ht.done&&ht.done.call(tt,!1),ht=n),tt}
,I.prototype.stopAnimateTo=function(){
ht&&ht.done&&ht.done.call(tt,!0),ht=n}
,I.prototype.isAnimatingTo=function(){
return!!ht}
,I.prototype.setScrollTop=function(t){
return r.iscroll?r.iscroll.scrollTo(0,-t):e.scrollTo(0,t),tt}
,I.prototype.getScrollTop=function(){
return r.iscroll?-r.iscroll.y:e.pageYOffset||s.scrollTop||o.scrollTop||0}
,I.prototype.on=function(e,t){
return rt[e]=t,tt}
,I.prototype.off=function(e){
return delete rt[e],tt}
;
var q=function(){
var e,t,n,r,i,s,o,u,a;
for(s=0;
s<nt.length;
s++){
e=nt[s],t=e.element,n=e.anchorTarget,r=e.keyFrames;
for(o=0;
o<r.length;
o++)i=r[o],i.mode==="relative"&&(u=t.style.cssText,a=t.className,t.style.cssText=e.styleAttr,t.className=e.classAttr,i.frame=tt.relativeToAbsolute(n,i.anchors[0],i.anchors[1])-i.offset,t.style.cssText=u,t.className=a),it&&!i.isEnd&&i.frame>st&&(st=i.frame)}
for(s=0;
s<nt.length;
s++){
e=nt[s],r=e.keyFrames;
for(o=0;
o<r.length;
o++)i=r[o],i.isEnd&&(i.frame=st-i.offset)}
}
,R=function(e,t){
for(var n=0;
n<nt.length;
n++){
var s=nt[n],o=s.smoothScrolling?e:t,f=s.keyFrames,l=f[0].frame,c=f[f.length-1].frame,h=o<=l,p=o>=c,d,v;
if(h||p){
var m=f[h?0:f.length-1].props;
for(d in m)i.call(m,d)&&(v=J(m[d].value),r.setStyle(s.element,d,v));
s[w]&&(o<l||o>c)&&(Q(s.element,[a],[u]),s[w]=!1);
continue}
s[w]||(Q(s.element,[u],[a]),s[w]=!0);
for(var g=0;
g<f.length-1;
g++)if(o>=f[g].frame&&o<=f[g+1].frame){
var y=f[g],b=f[g+1];
for(d in y.props)if(i.call(y.props,d)){
var E=(o-y.frame)/(b.frame-y.frame);
E=y.props[d].easing(E),v=$(y.props[d].value,b.props[d].value,E),v=J(v),r.setStyle(s.element,d,v)}
break}
}
}
,U=function(){
var e=tt.getScrollTop(),t,r=Z(),i;
if(ht)r>=ht.endTime?(e=ht.targetTop,t=ht.done,ht=n):(i=ht.easing((r-ht.startTime)/ht.duration),e=ht.startTop+i*ht.topDiff|0),tt.setScrollTop(e);
else{
var s=dt.targetTop-e;
s&&(dt={
startTop:lt,topDiff:e-lt,targetTop:e,startTime:ct,endTime:ct+d}
),r<=dt.endTime&&(i=F.sqrt((r-dt.startTime)/d),e=dt.startTop+i*dt.topDiff|0)}
e<0&&(e=0);
if(vt||lt!==e){
ft=e>=lt?"down":"up",vt=!1;
var o={
curTop:e,lastTop:lt,maxTop:st,direction:ft}
,u=rt.beforerender&&rt.beforerender.call(tt,o);
u!==!1&&(R(e,tt.getScrollTop()),lt=e,rt.render&&rt.render.call(tt,o)),t&&t.call(tt,!1)}
ct=r}
,z=function(e){
for(var t=0;
t<e.keyFrames.length;
t++){
var n=e.keyFrames[t],r,i,s,o={
}
,u;
while((u=N.exec(n.props))!==null)s=u[1],i=u[2],r=s.match(C),r!==null?(s=r[1],r=r[2]):r=h,i=i.indexOf("!")?W(i):[i.slice(1)],o[s]={
value:i,easing:F[r]}
;
n.props=o}
}
,W=function(e){
var t=[];
return M.lastIndex=0,e=e.replace(M,function(e){
return e.replace(A,function(e){
return e/255*100+"%"}
)}
),_.lastIndex=0,e=e.replace(_,function(e){
return H+e}
),e=e.replace(A,function(e){
return t.push(+e),"{
?}
"}
),t.unshift(e),t}
,X=function(e){
var t={
}
,n;
for(n=0;
n<e.keyFrames.length;
n++)V(e.keyFrames[n],t);
t={
}
;
for(n=e.keyFrames.length-1;
n>=0;
n--)V(e.keyFrames[n],t)}
,V=function(e,t){
var n;
for(n in t)i.call(e.props,n)||(e.props[n]=t[n]);
for(n in e.props)t[n]=e.props[n]}
,$=function(e,t,n){
if(e.length!==t.length)throw"Can't interpolate between \""+e[0]+'" and "'+t[0]+'"';
var r=[e[0]];
for(var i=1;
i<e.length;
i++)r[i]=e[i]+(t[i]-e[i])*n;
return r}
,J=function(e){
var t=1;
return O.lastIndex=0,e[0].replace(O,function(){
return e[t++]}
)}
;
r.setStyle=function(e,t,n){
var r=e.style;
t=t.replace(k,L).replace("-","");
if(t==="zIndex")r[t]=""+(n|0);
else if(t==="float")r.styleFloat=r.cssFloat=n;
else try{
r[P+t.slice(0,1).toUpperCase()+t.slice(1)]=n,r[t]=n}
catch(i){
}
}
;
var K=function(t,n){
e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent("on"+t,n)}
,Q=function(t,n,r){
var i="className";
e.SVGElement&&t instanceof e.SVGElement&&(t=t[i],i="baseVal");
var s=t[i];
for(var o=0;
o<n.length;
o++)Y(s).indexOf(Y(n[o]))===-1&&(s+=" "+n[o]);
for(var u=0;
u<r.length;
u++)s=Y(s).replace(Y(r[u])," ");
t[i]=G(s)}
,G=function(e){
return e.replace(x,"$1")}
,Y=function(e){
return" "+e+" "}
,Z=Date.now||function(){
return+(new Date)}
,et=function(e,t){
return e.frame-t.frame}
,tt,nt,rt,it,st=0,ot,ut=1,at,ft="down",lt=-1,ct=Z(),ht,pt,dt,vt,mt=0}
)(window,document);
CSS代码(screen.css):
html,body{padding:0;margin:0;font-family:Georgia,serif;color:#4a443d;text-align:center;}
a{color:#4a443d;text-decoration:none}
body{overflow:auto;height:7600px;}
#skrollr-body{width:100%;height:100%;position:fixed;}
#skrollr-body div{overflow:hidden;position:absolute;}
.centered{top:0;bottom:0;left:0;right:0;margin:auto;}
#wish1{background:#e7685d url('../images/merry1.png') center center no-repeat;z-index:5;}
#wish2{background:#94c3b6 url('../images/merry2.jpg') center bottom no-repeat;z-index:4;box-shadow:0 0 0 20px #49675f;}
#snow{width:363px;background:url('../images/snow.png') no-repeat}
#pattern1{background:url('../images/snow-flakes.png');z-index:2;background-attachment:fixed}
.ribbon{background:#49675f;height:40px;top:50%;margin-top:-20px;z-index:3;}
#ribbon-left{left:0}
#ribbon-right{right:0}
svg{position:absolute;z-index:5;left:50%;top:50%;margin-left:-170px;margin-top:-180px}
#pattern2{background:url('../images/pattern.png');z-index:1;}
#wish3{background:#8dbaae url('../images/merry3.png') no-repeat center center;z-index:6;border-radius:50%;}
#info{background:#fff;width:20%;height:50px;bottom:auto;z-index:10;font-size:22px;line-height:50px;}
#copyright{font-size:12px;z-index:10;bottom:10px;width:100%;}
分享到QQ
分享到微博
微信扫一扫
