js 滚动视差特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

13 49 17



特效描述:滚动视差。单独的视差滚动的JavaScript库,支持手机(Android,iOS,等)大小只有12K。

代码结构

1. 引入CSS

<link href="examples/fixed-positioning.css" rel="stylesheet" type="text/css" />
<link href="examples/main.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript" src="dist/skrollr.min.js"></script>
<script type="text/javascript" src="../skrollr-ie/dist/skrollr.ie.min.js"></script>

3. HTML代码

	<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>

	<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>

	<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>

	<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>

	<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">

		<h1> skrollr </h1>

		<h2>parallax scrolling for the masses</h2>

		<p>let's get scrollin' ;-)</p>

		<p class="arrows">▼&nbsp;▼&nbsp;▼</p>

	</div>

	<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">

		<h2>transform</h2>

		<p>scale, skew and rotate the sh** out of any element</p>

	</div>

	<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">

		<h2>all numeric properties</h2>

		<p>width, height, padding, font-size, z-index, blah blah blah</p>

	</div>

	<div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">

		<div id="easing" data-3900="left:100%" data-4600="left:25%;">

			<h2>easing?</h2>

			<p>sure.</p>

			<p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>

			<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>

		</div>

		<div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>

		<div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>

		<div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>

		<div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>

		<div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>

		<div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>

		<div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>

	</div>

	<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">

		<h2>the end</h2>

		<p>by the way, you can also animate colors (you did notice this, didn't you?)</p>

		<p>Check out more examples</p>

		<p>Handcrafted by Follow @Prinzhorn

		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>

	</div>

	<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>

	<script type="text/javascript" src="dist/skrollr.min.js"></script>

	<!--[if lt IE 9]>

	<script type="text/javascript" src="../skrollr-ie/dist/skrollr.ie.min.js"></script>

	<![endif]-->

	<script type="text/javascript">

	var s = skrollr.init({

		edgeStrategy: 'set',

		easing: {

			WTF: Math.random,

			inverted: function(p) {

				return 1-p;

			}

		}

	});

	</script>




用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到