js 滚动动画特效代码下载



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

8 31 11



特效描述:滚动动画。这是一个功能强大的工具,并且拥有非凡的能力滚动视差插件

代码结构

1. 引入CSS

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.lettering-0.6.1.min.js"></script>
<script src="js/jquery.superscrollorama.js"></script>
<script src="http://www.jq22.com/js/jq.js"></script>

3. HTML代码

	<div id="intro">
		<h1 id="title">
			<span id="title-line1" class="title-line">Super</span>
			<span id="title-line2" class="title-line">scroll</span>
			<span id="title-line3" class="title-line">orama</span>
		</h1>
	</div>
	<div id="showcase">
		<h1>Showcase</h1>
		<p>Check out these great websites to see SuperScrollorama in action</p>
		<div class="gallery clearfix">
			<figure>
				<a href="http://www.zivotjednekuchyne.cz">
					<img src="gallery/ikea.jpg" alt="Ikea, Life of One Kitchen">
				</a>
				<figcaption>Ikea, Life of One Kitchen<br />
					<small><a href="https://www.51qianduan.com/" target="_blank">51前端</a></small>
				</figcaption>
			</figure>
			<figure>
				<a href="http://lifeisvertical.alpina-51qianduan.com">
					<img src="gallery/alpina.jpg" alt="Alpina - Life Is Vertical">
				</a>
				<figcaption>Alpina - Life Is Vertical<br />
					<small><a href="http://www.51qianduan.com/css-web-design-award-winner.php?id=20048">CSS Design Award Winner</a></small>
				</figcaption>
			</figure>
			<figure>
				<a href="http://www.nouvelleoctavia.fr">
					<img src="gallery/skoda.jpg" alt="New Škoda Octavia">
				</a>
				<figcaption>New Škoda Octavia<br />
					<small><a href="https://www.51qianduan.com/" target="_blank">51前端</a></small>
				</figcaption>
			</figure>
			<figure>
				<a href="https://corporate.51qianduan.com/about/design-innovation/owned-brands/">
					<img src="gallery/target.jpg" alt="Target Exclusive Brands Site">
				</a>
				<figcaption>Target Exclusive Brands</figcaption>
			</figure>
			<figure>
				<a href="http://www.51qianduan.com.br/pt/">
					<img src="gallery/zipper.jpg" alt="Zipper Galleria">
				</a>
				<figcaption>Zipper Galleria<br />
					<small><a href="https://www.51qianduan.com/" target="_blank">51前端</a></small>
				</figcaption>
			</figure>
			<figure>
				<a href="http://inception-51qianduan.com">
					<img src="gallery/inception.jpg" alt="Inception Explained">
				</a>
				<figcaption>Inception Explained<br />
					<small><a href="https://www.51qianduan.com/" target="_blank">51前端</a></small>
				</figcaption>
			</figure>
			<figure>
				<a href="http://finnsjourney.de">
					<img src="gallery/finnsjourney.jpg" alt="Finn’s Journey">
				</a>
				<figcaption>Finn’s Journey</figcaption>
			</figure>
			<figure>
				<a href="http://public.orsi-and-jan.info/home">
					<img src="gallery/jan.jpg" alt="Orsi and Jan">
				</a>
				<figcaption>Orsi &amp; Jan’s Wedding</figcaption>
			</figure>
			<figure>
				<a href="http://innovation.51qianduan.com/explore/">
					<img src="gallery/kenmore.jpg" alt="Kenmore Innovations">
				</a>
				<figcaption>Kenmore Innovations</figcaption>
			</figure>
		</div>
	</div>
	<div id="hire">
		<h3>Scrollorama For Hire</h3>
		<p>Need help building your website? <a href="https://www.51qianduan.com/" target="_blank">51前端</a>.</p>
	</div>
	<div id="content-wrapper">
		<div id="examples-1">
			<h2 id="fade-it">Fade It</h2>
			<h2 id="fly-it">Fly It</h2>
			<h2 id="spin-it">Spin It</h2>
			<h2 id="scale-it">Scale It</h2>
			<h2 id="smush-it">Smush It</h2>
		</div>
		<div id="examples-pin">
			<div id="pin-frame-pin" class="pin-frame"><h2>Pin It</h2></div>
			<div id="pin-frame-slide" class="pin-frame"><h2>Slide It</h2></div>
			<div id="pin-frame-wipe" class="pin-frame"><h2>Wipe It</h2></div>
			<div id="pin-frame-bounce" class="pin-frame"><h2>Bounce It</h2></div>
			<div id="pin-frame-color" class="pin-frame"><h2>Color It</h2></div>
			<div id="pin-frame-unpin" class="pin-frame"><h2>Unpin It</h2></div>
		</div>
		<div id="examples-2">
			<h2 id="fling-it">Fling It</h2>
			<h2 id="move-it">Move It</h2>
		</div>
		<div id="examples-parallax">
			<h2 id="parallax-it">Parallax It</h2>
			<h2 id="parallax-it-left">Parallax It</h2>
			<h2 id="parallax-it-right">Parallax It</h2>
		</div>
		<h2 id="bring-it">Bring It</h2>
	</div>
	<script>
		$(document).ready(function() {
			$('body').css('visibility','visible');
			// hide content until after title animation
			$('#content-wrapper').css('display','none');
			// lettering.js to split up letters for animation
			$('#title-line1').lettering();
			$('#title-line2').lettering();
			$('#title-line3').lettering();
			// TimelineLite for title animation, then start up superscrollorama when complete
			(new TimelineLite({onComplete:initScrollAnimations}))
				.from( $('#title-line1 span'), .4, {delay: 1, css:{right:'1000px'}, ease:Back.easeOut})
				.from( $('#title-line2'), .4, {css:{top:'1000px',opacity:'0'}, ease:Expo.easeOut})
				.append([
					TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char2'), .25+Math.random(), {css:{top: '300px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char3'), .25+Math.random(), {css:{top: '-400px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char4'), .25+Math.random(), {css:{top: '-200px', left:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char5'), .25+Math.random(), {css:{top: '200px', left:'1000px'}, ease:Elastic.easeOut})
				])
				.to( $('#title-info'), .5, {css:{opacity:.99, 'margin-top':0}, delay:-1, ease:Quad.easeOut});
			function initScrollAnimations() {
				$('#content-wrapper').css('display','block');
				var controller = $.superscrollorama();
				// title tweens
				$('.title-line span').each(function() {
					controller.addTween(10, TweenMax.to(this, .5, {css:{top: Math.random()*-200-600, left: (Math.random()*1000)-500, rotation:Math.random()*720-360, 'font-size': Math.random()*300+150}, ease:Quad.easeOut}),200);
				});
				controller.addTween(10, TweenMax.to($('#title-line1'), .75, {css:{top: 600}, ease:Quad.easeOut}),200);
				controller.addTween(10, TweenMax.to($('#title-line2'), .75, {css:{top: 200}, ease:Quad.easeOut}),200);
				controller.addTween(10, TweenMax.to($('#title-line3'), .75, {css:{top: -100}, ease:Quad.easeOut},200));
				// showcase tweens
				controller.addTween('#showcase h1', TweenMax.from( $('#showcase h1'), .75, {css:{letterSpacing:20,opacity:0}, ease:Quad.easeOut}));
				controller.addTween('#showcase p', TweenMax.from( $('#showcase p'), 1, {css:{opacity:0}, ease:Quad.easeOut}));
				$('#showcase .gallery figure').css('position','relative').each(function() {
					controller.addTween('#showcase .gallery', TweenMax.from( $(this), 1, {delay:Math.random()*.2,css:{left:Math.random()*200-100,top:Math.random()*200-100,opacity:0}, ease:Back.easeOut}));
				});
				// hire tweens
				$('#hire h3').lettering().find('span').css('position','relative').each(function() {
					controller.addTween('#hire h3', TweenMax.from( $(this), .25, {delay:Math.random()*.2,css:{left:Math.random()*1200-600,top:Math.random()*600-300,opacity:0}, ease:Expo.easeOut}),200);
				});
				controller.addTween('#hire p', TweenMax.from( $('#hire p'), .5, {css:{opacity:0}}));
				// individual element tween examples
				controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
				controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));
				controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
				controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
				controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
				// set duration, in pixels scrolled, for pinned element
				var pinDur = 4000;
				// create animation timeline for pinned element
				var pinAnimations = new TimelineLite();
				pinAnimations
					.append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut}))
					.append([
						TweenMax.to($('#pin-frame-slide'), 1, {css:{marginLeft:0}}),
						TweenMax.to($('#pin-frame-pin'), 1, {css:{marginLeft:'100%'}})
					], .5)
					.append([
						TweenMax.to($('#pin-frame-wipe'), .5, {css:{top:0}}),
						TweenMax.from($('#pin-frame-wipe h2'), .5, {css:{marginTop:'-600px'}})
					], .5)
					.append(TweenMax.from($('#pin-frame-bounce'), 5, {css:{marginTop:'-100%'}, ease:Bounce.easeOut}), .5)
					.append(TweenMax.from($('#pin-frame-color'), .25, {css:{opacity:0}}), .5)
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'blue'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'orange'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'green'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'red'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'yellow'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'purple'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'orange'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'blue'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'red'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'green'}})
					])
					.append([
						TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'#222438'}}),
						TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'#FFB000'}})
					])
					.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
				// pin element, use onPin and onUnpin to adjust the height of the element
				controller.pin($('#examples-pin'), pinDur, {
					anim:pinAnimations, 
					onPin: function() {
						$('#examples-pin').css('height','100%');
					}, 
					onUnpin: function() {
						$('#examples-pin').css('height','600px');
					}
				});
				controller.pin($('#examples-2'), 3000, {
					anim: (new TimelineLite())
						.append(
							TweenMax.fromTo($('#fling-it'), 2, 
								{css:{left:-1000, top: 500, rotation: -360}, immediateRender:true}, 
								{css:{left:2000, top: -600, rotation: 360}})
						)
						.append(
							TweenMax.fromTo($('#move-it'), .75, 
								{css:{left: -200, top: 800}, immediateRender:true}, 
								{css:{top: -200}}),
								-1.5 // offset for better timing
						)
						.append(
							TweenMax.to($('#move-it'), .5, 
								{css:{left: 200}})
						)
						.append(
							TweenMax.to($('#move-it'), .5, 
								{css:{top: 0}})
						)
						.append(
							TweenMax.to($('#move-it'), .5, 
								{css:{left: 0}})
						)
				})
				// parallax example, setting duration ties animation to scroll position
				// you can target a scroll position instead of an element (whose position can change)
				controller.addTween(
					'#examples-parallax',
					(new TimelineLite())
						.append([
							TweenMax.fromTo($('#parallax-it-left'), 1, 
								{css:{top: 200}, immediateRender:true}, 
								{css:{top: -600}}),
							TweenMax.fromTo($('#parallax-it-right'), 1, 
								{css:{top: 500}, immediateRender:true}, 
								{css:{top: -1250}})
						]),
					1000 // scroll duration of tween
				);
				$('#bring-it').lettering();
				controller.addTween(
					'#bring-it',
					(new TimelineLite())
						.append([
							TweenMax.from($('#bring-it .char1'), 1, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char2'), .6, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char3'), 1.1, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char4'), .7, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char5'), .9, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char6'), 1.2, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char7'), .6, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}),
							TweenMax.from($('#bring-it .char8'), .8, 
								{css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut})
						])
						,
					1200,
					-100 // offset for better timing
				);
			}
		});
	</script>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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