滚动视差-02【超强的skrollr.js】

滚动视差-02【超强的skrollr.js】

上一篇文章的滚动视差，用的是原生js来写，其效果比较生硬，现在要做的滚动视差利用的是skrollr.js插件。skrollr.js是一款轻量级，功能强大的js库，但它要求IE9以上的浏览器。话不多说，直接上代码。

官方网站：http://prinzhorn.github.io/skrollr/

Github地址：https://github.com/Prinzhorn/skrollr

详细教程：https://www.jianshu.com/p/ffe6eb46bb8f(来自简书)

效果截图：

一、搭建基本页面

注意点：1、skrollr有两种模式：absolute mode和relative mode；absolute mod用如下代码所示，另外的一种用的类似于：

data-top-bottom ，这个模式需要一个参考元素，如它相对于（class=“foot”）为参考，这时候就要在元素里面添加上

data-anchor-target，不然看不出效果，如下代码所示

<div data-anchor-target=".foot"></div>

2、data-[offter]中的offer可以很大，也可以很小，它的值大小也是能达到某种效果的重点哦！

具体看详细教程：https://www.jianshu.com/p/ffe6eb46bb8f(来自简书)

基本页面搭建如下：

<div id="bg1" data-0="background-position:0px 0px;" data-10000="background-position:-500px -10000px;"></div>
	<div id="bg2" data-0="background-position:0px 0px;" data-10000="background-position:-500px -8000px;"></div>
	<div id="bg3" data-0="background-position:0px 0px;" data-10000="background-position:-500px -6000px;"></div>
	<div id="skrollr-body">
		<div id="center">
			<h1>Parallax background</h1>
			<p>Demo of background scrolling at constant speed independent of content height.</p>
			<p>less content - <a href="bg_constant_speed_more.html">more content</a></p>
			<hr />
			<p>
				Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
			</p>
			<p>
				Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
			</p>
			<p>
				Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
			</p>
			<p>
				Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
			</p>
			<p>
				Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
			</p>
			<p>
				Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
			</p>
			<p>
				Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
			</p>
			<p>
				Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
			</p>
			<p>
				Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
			</p>
			<p>
				Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
			</p>
			<p>
				Short loin tail salami, shank andouille short ribs flank prosciutto leberkas tenderloin chuck shankle kielbasa fatback. Ball tip rump meatloaf, drumstick frankfurter tongue jowl ham hock turducken. Shoulder shank chicken, ribeye shankle venison salami andouille pork tenderloin. Pork chop t-bone flank, pig chuck meatball cow ground round meatloaf shank bacon hamburger ribeye. Pig salami pastrami, shoulder beef ribs boudin biltong drumstick. Tail pig t-bone, capicola bresaola ball tip sausage jowl flank rump kielbasa chicken speck. Shoulder turkey spare ribs sausage corned beef ground round filet mignon tenderloin tail.
			</p>
			<p>
				Boudin shank ham hock beef, jowl brisket pork loin jerky kielbasa spare ribs andouille cow flank ground round. Jowl bacon chuck speck, swine kielbasa short loin tenderloin sausage. Pork chop short loin swine, cow tri-tip kielbasa capicola. Chicken bresaola pork chop drumstick chuck, sausage short ribs flank sirloin hamburger. Cow frankfurter chicken prosciutto sirloin ball tip, tail beef strip steak swine. Speck sirloin turducken pancetta short loin tenderloin.
			</p>
			<p>
				Ribeye shoulder biltong venison beef tri-tip. Bresaola ham hamburger andouille turkey brisket, short loin frankfurter chicken corned beef filet mignon pancetta. Shoulder flank biltong, pork chop turkey cow jowl venison bresaola pork belly sirloin t-bone sausage swine ribeye. Sausage brisket beef, chicken spare ribs hamburger tail meatloaf pig tenderloin pork belly biltong. Pancetta tri-tip pork loin rump pastrami, drumstick flank turkey. Jowl ground round pork short ribs, boudin sirloin venison short loin pig ham.
			</p>
			<p>
				Andouille pork chuck speck, leberkas prosciutto turducken jerky brisket frankfurter ball tip filet mignon shankle beef bacon. Turducken jowl pork biltong, andouille hamburger kielbasa. Meatball capicola shoulder ground round, ball tip spare ribs frankfurter rump t-bone beef ribs. Beef ribs brisket filet mignon pork loin kielbasa jowl, t-bone ribeye short loin spare ribs tri-tip drumstick frankfurter tenderloin ham hock. T-bone beef ham hock, speck chicken chuck biltong meatball tail bacon shank turkey flank.
			</p>
			<p>
				Tri-tip sausage tail meatloaf. Andouille salami leberkas, shank ham ribeye sirloin drumstick. Pork pork chop shankle, jowl spare ribs beef tongue meatball tri-tip beef ribs leberkas ham turkey. Andouille pastrami flank sirloin, beef tenderloin bresaola boudin chicken speck filet mignon prosciutto. Tri-tip drumstick sausage pancetta shoulder, short loin pork chop tongue chicken ham hock salami flank cow ribeye. Chuck short ribs speck bresaola, drumstick ham capicola beef ribs tri-tip meatloaf ball tip swine. Filet mignon turducken ribeye, venison tri-tip meatloaf bacon shankle beef ball tip pork flank pig beef ribs kielbasa.
			</p>
		</div>
	</div>

二、添加相应的样式

		html, body {
			width:100%;
			height:100%;
			padding:0;
			margin:0;
			overflow-x:hidden;
		}
          /*.skrollable重要，它能达到意想不到的效果，它由js加载*/
		.skrollable {
			position:fixed;
			z-index:100;
		}
		#skrollr-body {
			height:100%;
			overflow:visible;
			position:relative;
			z-index: 101;
		}
	#center {
		background:#f9f9f9;
		background:rgba(240,240,240,.7);
		width:90%;
		padding:1em;
		margin:1em auto;
		border:1px solid #bbb;
	}
		#bg1, #bg2, #bg3 {
			z-index:50;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:url(images/bubbles.png) repeat 0 0;
		}

		#bg2 {
			z-index:49;
			background-image:url(images/bubbles2.png);
		}

		#bg3 {
			z-index:48;
			background-image:url(images/bubbles3.png);
		}

三、引入js

<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
	skrollr.init({
		forceHeight: false,
		edgeStrategy: 'set',

	});
	</script>