jQuery全屏两栏垂直滚动切换特效js代码

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

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

以下是 jQuery全屏两栏垂直滚动切换特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery全屏两栏垂直滚动切换特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet prefetch' href='http://fonts.useso.com/css?family=Fjalla+One'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<article id="slide-0" class="slide slide--locked">
  <img src="img/1.jpg">
</article>
<article id="slide-1" class="slide slide--text slide--locked">
  <div class="slide__inner">
	<p class="demo-arrow">&darr;</p>
	<p class="demo-instructions">向下滚动</p>
  </div>
</article>
<article id="slide-2" class="slide slide--scrolling slide--text">
  <div class="slide__inner">
	<p>It's a nice way to tell a story. Works as an image gallery as well.</p>
  </div>
</article>
<article id="slide-3" class="slide">
  <img src="img/2.jpg">
</article>
<article id="slide-4" class="slide">
  <img src="img/3.jpg">
</article>
<article id="slide-5" class="slide slide--text">
  <div class="slide__inner">
	<p>Doesn't work on iOS because it uses fixed positioning. Fallback is necessary.</p>
  </div>
</article>
<article id="slide-6" class="slide">
  <img src="img/4.jpg">
</article>
<article id="slide-7" class="slide slide--text">
  <div class="slide__inner">
	<p>But that's life, isn't it?</p>
	<p class="demo-instructions">The end.</p>
  </div>
</article>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
var windowHeight = $(window).height();
var $slides = $('.slide');
function init() {
	$('body').css('height', $slides.length * 100 + '%');
	$slides.each(function (index) {
		$(this).css({
			'z-index': index,
			'top': index * 100 + '%'
		});
	});
	var $scrollingSlide = $('.slide--scrolling').last();
	var scrollingSlideIndex = $('.slide').index($scrollingSlide);
	$(window).scrollTop((scrollingSlideIndex - 1) * windowHeight);
}
function adjustPositions() {
	var scrollPosition = $(window).scrollTop();
	var scrollingSlide = Math.floor(scrollPosition / windowHeight) + 1;
	var $scrollingSlide = $('#slide-' + scrollingSlide);
	$scrollingSlide.prevAll('.slide').removeClass('slide--scrolling').addClass('slide--locked');
	$scrollingSlide.removeClass('slide--locked').addClass('slide--scrolling');
	$scrollingSlide.nextAll('.slide').removeClass('slide--locked').removeClass('slide--scrolling');
}
$(document).ready(function () {
	init();
});
$(window).scroll(function () {
	adjustPositions();
});

</script>
</body>
</html>

CSS代码(styles.css):

.slide{position:fixed;width:50%;height:100%;float:left;overflow:hidden;background-color:#ddd;}
.slide:nth-of-type(even){right:0;}
.slide:nth-of-type(odd){left:0;}
.slide--text{background-color:white;padding:30px;color:black;font-family:'Fjalla One',sans-serif;text-align:center;text-transform:uppercase;}
.slide__inner{height:100%;border:2px dashed black;padding:20% 5% 5% 5%;font-size:2em;}
.slide--locked,.slide--sticky{position:fixed !important;top:0 !important;}
.slide--scrolling{position:absolute;}
*{box-sizing:border-box;}
html,body{margin:0;}
img{width:100%;}
.demo-instructions{font-size:0.5em;}
.demo-arrow{position:relative;-webkit-animation:demo-arrow 0.4s ease-in-out infinite alternate;animation:demo-arrow 0.4s ease-in-out infinite alternate;}
a{color:inherit;}
@-webkit-keyframes demo-arrow{0%{top:0;}
100%{top:10px;}
}
@keyframes demo-arrow{0%{top:0;}
100%{top:10px;}
}

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