`
mutongwu
  • 浏览: 449941 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

skrollr-视差滚动动画插件

阅读更多
skrollr ( https://github.com/Prinzhorn/skrollr ) 是一个独立的js特效库。使用方法为在 dom元素上直接编写动画的开始、结束,这些“配置参数”最终会由js读取解析。使用的要点:

1. 由于会对元素做CSS3的动画变形,实际的应用中,通常会把元素设置为 position: fixed;或者 absolute;

2. 这样就要求页面的每一个分块都有 height的 CSS控制,从而方便计算。

3. 元素的定位支持paga和viewport两种,具体的参数设置,可以上官方github查看。



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />
	<title>Anchors</title>

	<style type="text/css">
	body {font-family:sans-serif;}

	#content {
		width:90%;
		background:#eee;
		border:1px solid #444;
		margin:1em auto;
	}

	#content > div {
		padding:1em;
	}

	.box {
		float:left;
		padding:6em 1em;
		margin:2px;
	}

	p {margin:1em 0;}
	
/*	
.float-left{
	float: left;	
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
}
*/
.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}
	

#intro{
	background:url(images/firstBG.jpg) 50% -75px no-repeat fixed;
	color: white;
	height: 600px;
	margin: 0 auto;
	padding: 160px 0 0 0;
}

#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
}

#third{
	background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 650px;
	padding: 100px 0 0 0;	
}
.story{
	margin: 0 auto;
	min-width: 980px;
	overflow: auto;
	width: 980px;
}	

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	z-index: 999;
}

#nav li{
	margin: 0 0 15px 0;	
}


#nav li a {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: white;
	border: solid 2px white;
}

#nav li a.current {
	background-color: orange;
}
/*.skrollable{position:absolute !important;}*/
.slide h2 {top:25%;}

.slide .desc {top:0%; width:600px;}
h1{color:blue;}
#content h1{top:0%;left:30%;}
	</style>
</head>

<body>
<!-- 控制页面滚动的时候,利用高度,自动高亮当前所在区块指示 -->
	<ul id="nav">
		<li><a href="#intro" title="Next Section" data-edge-strategy="reset" data-0="@class:current"  data-600="@class:"></a></li>
	    <li><a href="#second" title="Next Section" data-edge-strategy="reset" data-600="@class:current"  data-1900="@class: "></a></li>
	    <li><a href="#third" title="Next Section" data-edge-strategy="reset" data-1900="@class:current"  data-2500="@class: "></a></li>
	    <li><a href="#content" title="Next Section" data-edge-strategy="reset" data-2500="@class:current"  data-end="@class: "></a></li>
	</ul>
	<div id="skrollr-body">

		<div id="intro" class="slide">
			<div class="story">
		    	<div class="float-left">
				<h2 data-0="transform:scale(0) rotate(0deg);" data-300="transform:scale(1) rotate(1440deg);opacity:1;" data-400="opacity:0;">(Almost) Static Background</h2>
		        <p>This section has a background that moves slightly slower than the user scrolls. This is achieved by changing the top position of the background for every pixel the page is scrolled.</p>
		        </div>
		    </div> <!--.story-->
		</div> <!--#intro-->
		
		<div id="second" class="slide">
			<div class="story"><div class="bg"></div>
		    	<div class="float-right" style="position:relative;">
		            <h2 data-800="left:0%;opacity:0" data-1100="left:40%;opacity:1" data-1200="opacity:0">Multiple Backgrounds</h2>
		            <div class="desc" data-600="right:0%;opacity:0" data-800="right:40%;opacity:1" data-1200="opacity:0">
		            	<p>The multiple backgrounds applied to this section are moved in a similar way to the first section -- every time the user scrolls down the page by a pixel, the positions of the backgrounds are changed.</p>
		            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
		            </div>
		        </div>
		    </div> <!--.story-->
		    
		</div> <!--#second-->
		
		<div id="third" class="slide">
			<div class="story">
		    	<div class="float-left">
		        	<h2 data-1800="transform:scale(0);opacity:1" data-2200="transform:scale(2);opacity:1"  data-2300="opacity:0;">What Happens When JavaScript is Disabled?</h2>
		            <p>The user gets a slap! Actually, all that jQuery does is moves the backgrounds relative to the position of the scrollbar. Without it, the backgrounds simply stay put and the user would never know they are missing out on the awesome! CSS2 does a good enough job to still make the effect look cool.</p>
		        </div>
		    </div> <!--.story-->
		</div> <!--#third-->
		
		<div id="content">
			<div>
				<h1 data-bottom-top="display:none;transform:scale(1)" data-top-top="display:block;transform:scale(2)">Different anchor types</h1>

				<p>
					<strong>Scroll down to see different anchors in action.</strong>
				</p>

				<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>

				<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>

				<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>

				<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>

				<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>

				<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>

				<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>

				<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>

				<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>

				<p>Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>

				<p>Biltong pastrami kielbasa short ribs, turducken shoulder pork chop boudin ground round speck cow. Fatback leberkas shank hamburger, tail pork belly tongue bresaola short ribs corned beef speck tri-tip ribeye. Filet mignon shoulder speck pastrami. Ham hock turducken corned beef shankle. Meatloaf shankle sausage boudin, shank flank turducken tenderloin pancetta ball tip. Biltong boudin jowl drumstick pig.</p>

				<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>

				<p>Sirloin venison bresaola andouille pastrami short ribs. Short loin cow capicola tail ham hock leberkas. Frankfurter meatloaf capicola, swine ball tip jerky pork loin pork belly cow ribeye brisket strip steak jowl beef ribs ham hock. Pastrami ham hock rump turkey, pork belly capicola jerky. Turkey chuck beef, bresaola filet mignon jerky tri-tip pastrami. Bacon capicola jowl fatback short ribs. Speck shankle bacon chuck.</p>

				<p>Pork loin tail pork belly shank ham. Kielbasa venison ham, short loin ham hock beef ribs tri-tip ball tip pork belly. Ribeye sirloin sausage tenderloin hamburger. Strip steak tongue turkey, andouille bacon beef ribs venison. T-bone ball tip bresaola fatback, ground round meatball chicken sausage tongue pork chop leberkas sirloin jerky shank bacon. Turducken sirloin cow shankle pig, leberkas venison boudin pastrami.</p>

				<p>Cow fatback short loin, hamburger speck jowl turducken capicola ham hock. Hamburger corned beef strip steak shank filet mignon, jerky capicola chicken jowl ribeye pork ham hock ground round bresaola. Jowl ribeye kielbasa drumstick pork belly leberkas. Spare ribs fatback shankle, hamburger meatloaf sausage pork loin andouille pork kielbasa. Pancetta shank tongue, leberkas turducken shoulder rump meatball pork belly pig hamburger brisket biltong. Tenderloin short ribs pig, rump tail chuck turducken.</p>

				

				<p style="clear:both;">Cow tri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>

				<p>Biltonri-tip pork loin salami corned beef. T-bone turkey ham frankfurter, brisket cow chicken bacon rump sirloin. Pancetta ribeye salami leberkas speck shank. Ribeye prosciutto swine venison speck beef.</p>
			</div>
		</div>

	</div>

	<script type="text/javascript" src="../dist/skrollr.min.js"></script>
	
	<!-- 引入menu插件,从而可以通过锚点,正确定位元素的位置 -->
	<script type="text/javascript" src="../dist/skrollr.menu.min.js"></script>
	<script type="text/javascript">
	var s = skrollr.init({
		//forceHeight: false
	});
	
	skrollr.menu.init(s,{
		
	});
	</script>
</body>

</html>

  • 大小: 46.1 KB
分享到:
评论

相关推荐

    skrollr-maste滚动视差jquery插件

    "skrollr-master"是一个轻量级且功能强大的独立视差滚动库,它的大小仅为12K,非常利于页面加载,且兼容多种设备,包括Android、iOS等移动平台。该库的主要优势在于它的易用性和灵活性,使得即使是对JavaScript不...

    10个优秀视差滚动插件

    下面我们将深入探讨10个优秀的视差滚动插件,并了解它们的特点和应用场景。 1. **ScrollPath** ScrollPath是其中一个插件,它允许开发者通过SVG路径定义元素的滚动动画轨迹。这个插件非常灵活,可以创建复杂的运动...

    几款视差滚动JS插件有DEMO

    在您提供的资源中,"几款视差滚动JS插件有DEMO"包含了一些可以帮助前端开发者实现视差滚动效果的JavaScript插件。这些插件通常简化了开发过程,提供了预设的动画效果和易于配置的选项。以下是一些常见的视差滚动JS...

    html5视差滚动标题固定显示代码.zip

    4. **jQuery插件**: 在实际开发中,可能使用了jQuery插件如`parallax.js`或`skrollr.js`来简化视差滚动的实现。这些插件提供了易于使用的API,可以方便地配置和控制视差滚动效果。 5. **视差滚动实现步骤**: - ...

    html5页面视差滚动企业个人技能培训展示模板.zip.zip

    4. 视差滚动插件:有许多开源的JavaScript插件,如Parallax.js、Skrollr或ScrollMagic,可以帮助开发者轻松创建视差滚动效果。这些插件提供了易于使用的API和丰富的配置选项,使得定制和集成变得简单。 5. 响应式...

    Skrollr-clouds

    实际上,skrollr 不仅仅是“视差滚动” 。 这是一个成熟的滚动动画库。 事实上,您可以使用它并且仍然完全没有视差滚动。 但我想听起来很时髦并使用一些流行语。 顺便说一句,skrollr 利用了 HTML5 和 CSS3 ;​​-)...

    HTML5页面滚动视差效果特效.zip

    CSS3的过渡(transition)和动画(animation)也常用来实现平滑的视差滚动效果。 3. **JavaScript**: JavaScript是实现滚动事件监听和计算元素位置变化的核心工具。通过监听`window.scroll`事件,可以实时获取滚动...

    视差切换个人简介页面模板是一款采用视差切换效果的html5网页模板.rar

    4. `skrollr.js`:这是一个JavaScript插件,专门用于实现视差滚动效果。通过这个插件,开发者可以轻松地创建和控制视差滚动的各个元素。 5. `img3.png`, `part1.png`, `paart3.png`, `part2.png`, `stars.png`:这些...

    前端通过jQuery+插件实现全屏滚动效果.zip

    全屏滚动,也称为“视差滚动”或“全屏滑动”,是一种网页设计技术,允许用户通过滚动鼠标或触摸屏幕来逐屏浏览内容。这种效果通常用于展示项目的视觉冲击力,使用户沉浸在内容中。 在实现全屏滚动效果时,我们通常...

    jQuery 3D 视差背景效果

    3. **jQuery插件**:有许多现成的jQuery插件可以帮助实现3D视差效果,如`parallax.js`、`skrollr.js`或`stellar.js`。这些插件通过监听滚动事件,根据滚动距离调整各层元素的位置,从而实现视差效果。例如,使用`...

    ParallaxDemo:视差演示 - Intellimeet Session on Parallax

    2. **JavaScript库**: 有一些JavaScript库,如Skrollr、GreenSock或ScrollMagic,提供了简便的方法来创建复杂的视差滚动效果,它们可以精确控制每个元素的滚动速度和动画。 3. **jQuery插件**: jQuery也有许多插件...

    滚动视差效果background-attachment实战记录

    例如,`parallax.js`和`skrollr.js`是两个著名的JavaScript插件,它们允许开发者精确控制各个元素的滚动速度和行为,从而实现更精细的视差滚动。这些插件通常需要更深入的配置和理解,但能带来更加丰富和动态的用户...

    滑动页面,字体会上浮的滑动动画

    标题中的“滑动页面,字体会上浮的滑动动画”是指一种常见的网页设计技术,它在用户滚动页面时,页面元素(如文字和图片)会以特定的方式移动,创造出深度感和动态效果,这种效果通常被称为视差滚动或滑动动画。视差...

    PC端横向滚动视觉差效果

    4. **视差滚动插件**:对于更复杂的视觉差效果,开发者可能会选择使用现成的JavaScript插件,如Parallax.js或Skrollr。这些插件提供了更高级的功能,如元素独立的滚动速度,使得视觉差效果更加丰富和立体。 5. **...

    JS全屏滚动

    2. **Skrollr**:轻量级且高度可定制的库,适合创建复杂的视差滚动效果。 3. **WOW.js**:与Animate.css配合使用,可以在滚动到特定元素时触发动画。 总的来说,JavaScript全屏滚动是一种增强用户体验的手段,通过...

    视差:由Nesse projeto eu aprendi共同开发的视差网站

    比如使用jQuery插件如"parallax.js"或"skrollr",这些工具提供了简便的API来创建自定义的视差滚动体验。 在"Parallax-main"这个文件夹中,可能包含了项目的源代码,包括HTML文件(可能包含视差效果的布局和结构)、...

    一些jQuery控件

    这些插件可以让用户在浏览长页面时感受到流畅的滚动体验,同时还可以实现全屏滚动和视差滚动等特效。 4. **时间控件**:时间控件可能是日期/时间选择器,如jQuery UI的时间选择器或bootstrap-datetimepicker。它们...

Global site tag (gtag.js) - Google Analytics