jq视差滚动框架特效代码

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

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

以下是 jq视差滚动框架特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
	<title>jq视差滚动框架</title>
	<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
	<script type="text/javascript" src="js/waypoints.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</head>
<body>
<div class="menu">	
	<div class="container clearfix">

		<div id="logo" class="grid_3">
			<img src="images/logo.png">
		</div>
		
		<div id="nav" class="grid_9 omega">
			<ul class="navigation">
				<li data-slide="1">Top Slide</li>
				<li data-slide="2">Parallax Scrolling</li>
				<li data-slide="3">Grid</li>
				<li data-slide="4">Credits</li>
			</ul>
		</div>
	
	</div>
</div>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
	<div class="container clearfix">
		
		<div id="content" class="grid_7">
			<h1>Top Slide</h1>
			<h2>Get ready to make magic!</h2>
			<p>Remember that this is a BETA version. This is my first framework so if you see any issue please let me know it. </p>
			<p>Don't forget to follow me!</p>
			<p><img src="images/twitter.png"><img src="images/dribbble.png"></p>
			</div>
		<div id="decorative" class="grid_5 omega">
			<img src="images/decorative.png">
		</div>
	
	</div>
</div>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
	<div class="container clearfix">
		
		<div id="content" class="grid_12">
			<h1>Parallax Scrolling</h1>
			<h2>What you've seen its called parallax scrolling</h2>
		</div>
	
	</div>
</div>
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
	<div class="container clearfix">
		
		<div id="content" class="grid_12">
			<h1>Grid</h1>
			<h2>See how the grid changes when you resize your screen</h2>
		</div>
		
		<div id="test" class="grid_1">1</div> <div id="test" class="grid_11 omega">11</div>
		<div id="test" class="grid_2">2</div> <div id="test" class="grid_10 omega">10</div>
		<div id="test" class="grid_3">3</div> <div id="test" class="grid_9 omega">9</div>
		<div id="test" class="grid_4">4</div> <div id="test" class="grid_8 omega">8</div>
		<div id="test" class="grid_5">5</div> <div id="test" class="grid_7 omega">7</div>
		<div id="test" class="grid_6">6</div> <div id="test" class="grid_6 omega">6</div>
		<div id="test" class="grid_7">7</div> <div id="test" class="grid_5 omega">5</div>
		<div id="test" class="grid_8">8</div> <div id="test" class="grid_4 omega">4</div>
		<div id="test" class="grid_9">9</div> <div id="test" class="grid_3 omega">3</div>
		<div id="test" class="grid_10">10</div> <div id="test" class="grid_2 omega">2</div>
		<div id="test" class="grid_11">11</div> <div id="test" class="grid_1 omega">1</div>
		<div id="test" class="grid_12">12</div>
	
	</div>
</div>
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
	<div class="container clearfix">
		
		<div id="content" class="grid_12">
			<h1>Credits</h1>
			<h2>Cool Kitten</a> was made by Jalxob.</h2>
			<p>Don't forget to follow me!</p>
			<p><img src="images/twitter.png"><img src="images/dribbble.png"></p>
		</div>
	</div>
</div>
</body>
</html>

JS代码(js.js):

jQuery(document).ready(function ($){
	$(window).stellar();
	var links = $('.navigation').find('li');
	slide = $('.slide');
	button = $('.button');
	mywindow = $(window);
	htmlbody = $('html,body');
	slide.waypoint(function (event,direction){
	dataslide = $(this).attr('data-slide');
	if (direction === 'down'){
	$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
else{
	$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
}
);
	mywindow.scroll(function (){
	if (mywindow.scrollTop() == 0){
	$('.navigation li[data-slide="1"]').addClass('active');
	$('.navigation li[data-slide="2"]').removeClass('active');
}
}
);
	function goToByScroll(dataslide){
	htmlbody.animate({
	scrollTop:$('.slide[data-slide="' + dataslide + '"]').offset().top}
,2000,'easeInOutQuint');
}
links.click(function (e){
	e.preventDefault();
	dataslide = $(this).attr('data-slide');
	goToByScroll(dataslide);
}
);
	button.click(function (e){
	e.preventDefault();
	dataslide = $(this).attr('data-slide');
	goToByScroll(dataslide);
}
);
}
);

JS代码(waypoints.min.js):

/*jQuery Waypoints - v1.1.7Copyright (c) 2011-2012 Caleb TroughtonDual licensed under the MIT license and GPL license.https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txthttps://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt*/
(function($,k,m,i,d){
	var e=$(i),g="waypoint.reached",b=function(o,n){
	o.element.trigger(g,n);
	if(o.options.triggerOnce){
	o.element[k]("destroy")}
}
,h=function(p,o){
	if(!o){
	return -1}
var n=o.waypoints.length-1;
	while(n>=0&&o.waypoints[n].element[0]!==p[0]){
	n-=1}
return n}
,f=[],l=function(n){
	$.extend(this,{
	element:$(n),oldScroll:0,waypoints:[],didScroll:false,didResize:false,doScroll:$.proxy(function(){
	var q=this.element.scrollTop(),p=q>this.oldScroll,s=this,r=$.grep(this.waypoints,function(u,t){
	return p?(u.offset>s.oldScroll&&u.offset<=q):(u.offset<=s.oldScroll&&u.offset>q)}
),o=r.length;
	if(!this.oldScroll||!q){
	$[m]("refresh")}
this.oldScroll=q;
	if(!o){
	return}
if(!p){
	r.reverse()}
$.each(r,function(u,t){
	if(t.options.continuous||u===o-1){
	b(t,[p?"down":"up"])}
}
)}
,this)}
);
	$(n).bind("scroll.waypoints",$.proxy(function(){
	if(!this.didScroll){
	this.didScroll=true;
	i.setTimeout($.proxy(function(){
	this.doScroll();
	this.didScroll=false}
,this),$[m].settings.scrollThrottle)}
}
,this)).bind("resize.waypoints",$.proxy(function(){
	if(!this.didResize){
	this.didResize=true;
	i.setTimeout($.proxy(function(){
	$[m]("refresh");
	this.didResize=false}
,this),$[m].settings.resizeThrottle)}
}
,this));
	e.load($.proxy(function(){
	this.doScroll()}
,this))}
,j=function(n){
	var o=null;
	$.each(f,function(p,q){
	if(q.element[0]===n){
	o=q;
	return false}
}
);
	return o}
,c={
	init:function(o,n){
	this.each(function(){
	var u=$.fn[k].defaults.context,q,t=$(this);
	if(n&&n.context){
	u=n.context}
if(!$.isWindow(u)){
	u=t.closest(u)[0]}
q=j(u);
	if(!q){
	q=new l(u);
	f.push(q)}
var p=h(t,q),s=p<0?$.fn[k].defaults:q.waypoints[p].options,r=$.extend({
}
,s,n);
	r.offset=r.offset==="bottom-in-view"?function(){
	var v=$.isWindow(u)?$[m]("viewportHeight"):$(u).height();
	return v-$(this).outerHeight()}
:r.offset;
	if(p<0){
	q.waypoints.push({
	element:t,offset:null,options:r}
)}
else{
	q.waypoints[p].options=r}
if(o){
	t.bind(g,o)}
if(n&&n.handler){
	t.bind(g,n.handler)}
}
);
	$[m]("refresh");
	return this}
,remove:function(){
	return this.each(function(o,p){
	var n=$(p);
	$.each(f,function(r,s){
	var q=h(n,s);
	if(q>=0){
	s.waypoints.splice(q,1);
	if(!s.waypoints.length){
	s.element.unbind("scroll.waypoints resize.waypoints");
	f.splice(r,1)}
}
}
)}
)}
,destroy:function(){
	return this.unbind(g)[k]("remove")}
}
,a={
	refresh:function(){
	$.each(f,function(r,s){
	var q=$.isWindow(s.element[0]),n=q?0:s.element.offset().top,p=q?$[m]("viewportHeight"):s.element.height(),o=q?0:s.element.scrollTop();
	$.each(s.waypoints,function(u,x){
	if(!x){
	return}
var t=x.options.offset,w=x.offset;
	if(typeof x.options.offset==="function"){
	t=x.options.offset.apply(x.element)}
else{
	if(typeof x.options.offset==="string"){
	var v=parseFloat(x.options.offset);
	t=x.options.offset.indexOf("%")?Math.ceil(p*(v/100)):v}
}
x.offset=x.element.offset().top-n+o-t;
	if(x.options.onlyOnScroll){
	return}
if(w!==null&&s.oldScroll>w&&s.oldScroll<=x.offset){
	b(x,["up"])}
else{
	if(w!==null&&s.oldScroll<w&&s.oldScroll>=x.offset){
	b(x,["down"])}
else{
	if(!w&&s.element.scrollTop()>x.offset){
	b(x,["down"])}
}
}
}
);
	s.waypoints.sort(function(u,t){
	return u.offset-t.offset}
)}
)}
,viewportHeight:function(){
	return(i.innerHeight?i.innerHeight:e.height())}
,aggregate:function(){
	var n=$();
	$.each(f,function(o,p){
	$.each(p.waypoints,function(q,r){
	n=n.add(r.element)}
)}
);
	return n}
}
;
	$.fn[k]=function(n){
	if(c[n]){
	return c[n].apply(this,Array.prototype.slice.call(arguments,1))}
else{
	if(typeof n==="function"||!n){
	return c.init.apply(this,arguments)}
else{
	if(typeof n==="object"){
	return c.init.apply(this,[null,n])}
else{
	$.error("Method "+n+" does not exist on jQuery "+k)}
}
}
}
;
	$.fn[k].defaults={
	continuous:true,offset:0,triggerOnce:false,context:i}
;
	$[m]=function(n){
	if(a[n]){
	return a[n].apply(this)}
else{
	return a.aggregate()}
}
;
	$[m].settings={
	resizeThrottle:200,scrollThrottle:100}
;
	e.load(function(){
	$[m]("refresh")}
)}
)(jQuery,"waypoint","waypoints",window);

CSS代码(grid.css):

/* Computer */
.grid_1{width:6.5%;}
.grid_2{width:15%;}
.grid_3{width:23.5%;}
.grid_4{width:32%;}
.grid_5{width:40.5%;}
.grid_6{width:49%;}
.grid_7{width:57.5%;}
.grid_8{width:66%;}
.grid_9{width:74.5%;}
.grid_10{width:83%;}
.grid_11{width:91.5%;}
.grid_12{width:100%;}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin:0 2% 1% 0;float:left;display:block;}
.alpha{margin-left:0;}
.omega{margin-right:0;}
.container{width:90%;/*width:1000px;*/
max-width:1000px;margin:auto;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}
/* Mobile */
@media screen and (max-width:480px){.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{width:100%;}
}

CSS代码(style.css):

/* Global */
body{font-family:'Open Sans',sans-serif;font-weight:400;font-size:1em;color:#8a8683;background-color:#ffffff;}
img{max-width:100%;}
a:link{color:#f68f67;text-decoration:none;}
a:hover{color:#bde2df;text-decoration:none;}
a:visited{color:#f68f67;text-decoration:none;}
/* Navigation */
.menu{position:fixed;top:0px;width:100%;height:auto;background-color:#ffffff;z-index:100;}
#logo{text-align:center;margin:10px 0;}
#nav{text-align:right;margin:30px 0 0 0;}
.navigation{float:right;list-style:none;margin:0;}
.navigation li{float:left;padding:0 0 0 50px;}
.navigation li:hover{cursor:pointer;color:#a9d3d0;}
.navigation .active{cursor:pointer;color:#f68f67;font-weight:bold;}
/* General Slides */
.slide{background-attachment:fixed;width:100%;height:auto;position:relative;padding:140px 0;}
/* Slide 1 */
#slide1{background-color:#ffffff;}
#slide1 h1{font-size:3.8em;letter-spacing:-3px;line-height:0px;color:#8a8683;font-weight:700;}
#slide1 h2{font-size:2em;color:#8a8683;line-height:0px;padding-bottom:20px;font-weight:400;}
/* Slide 2 */
#slide2{background-image:url('../images/footprints.png');background-color:#f68f67;color:#ffffff;}
#slide2 h1{font-size:3.8em;letter-spacing:-3px;line-height:0px;color:#ffffff;font-weight:700;}
#slide2 h2{font-size:2em;color:#ffffff;line-height:0px;padding-bottom:20px;font-weight:400;}
/* Slide 3 */
#slide3{background-color:#ffffff;}
#slide3 h1{font-size:3.8em;letter-spacing:-3px;line-height:0px;color:#8a8683;font-weight:700;}
#slide3 h2{font-size:2em;color:#8a8683;line-height:0px;padding-bottom:20px;font-weight:400;}
#test{background-color:#bde2df;color:#ffffff;text-align:center;font-size:2em;font-weight:400;}
/* Slide 4 */
#slide4{background-image:url('../images/sunglasses.png');background-color:#8a8683;color:#ffffff;}
#slide4 h1{font-size:3.8em;letter-spacing:-3px;line-height:0px;color:#ffffff;font-weight:700;}
#slide4 h2{font-size:2em;color:#ffffff;line-height:0px;padding-bottom:20px;font-weight:400;}
/* Tablet */
@media screen and (max-width:1024px){#logo{width:100%;text-align:center;}
#nav{width:100%;text-align:center;margin:10px 0;}
.navigation{width:100%;float:center;list-style:none;margin:0;padding:0;}
.navigation li{float:left;width:25%;padding:0;}
.slide{background-attachment:fixed;width:100%;position:relative;padding:150px 0;}
#decorative{display:none;}
#content{text-align:center;width:100%;}
#slide1 h1{line-height:1em;}
#slide1 h2{line-height:1em;}
#slide2 h1{line-height:1em;}
#slide2 h2{line-height:1em;}
#slide3 h1{line-height:1em;}
#slide3 h2{line-height:1em;}
#slide4 h1{line-height:1em;}
#slide4 h2{line-height:1em;}
}
/* Mobile */
@media screen and (max-width:480px){#logo{width:100%;text-align:center;}
#nav{width:100%;margin:5px 0;}
.navigation{width:100%;float:left;list-style:none;margin:0;padding:0;}
.navigation li{float:left;width:25%;}
.slide{background-attachment:fixed;width:100%;position:relative;padding:150px 0;}
#slide1 h1{line-height:1em;}
#slide1 h2{line-height:1em;}
#slide2 h1{line-height:1em;}
#slide2 h2{line-height:1em;}
#slide3 h1{line-height:1em;}
#slide3 h2{line-height:1em;}
#slide4 h1{line-height:1em;}
#slide4 h2{line-height:1em;}
}

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