jQuery 文字滚动特效代码下载



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

19 75 26



特效描述:文字滚动。Scrollorama原生的jQuery插件,用于执行炫酷的滚动内容展示效果

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">

2. 引入JS

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.lettering-0.6.1.min.js"></script>
<script src="js/jquery.scrollorama.js"></script>

3. HTML代码

	<p id="console"></p>
	<div class="scrollblock" id="intro">
		<h1 id="title">scrollorama</h1>
		<p id="desc">The jQuery plugin for doing cool scrolly stuff<br />
	</div>
	<div class="scrollblock" id="examples-transition">
		<h2>Transitions</h2>
		<h3 id="fade-in">Fade In</h3>
		<h3 id="fly-in">Fly In</h3>
		<h3 id="rotate-in">Rotate In</h3>
		<h3 id="zoom-in">Zoom In</h3>
		<p id="any"><small><span class="accent">&#9733;</span> Any numeric CSS property <span class="accent">&#9733;</span></small></p>
	</div>
	<div class="scrollblock" id="examples-pin">
		<h2>Pin It</h2>
		<h3 id="unpin">&#9733; Then unpin it &#9733;</h3>
	</div>
	<div class="scrollblock" id="examples-parallax">
		<h2 id="parallax1">Parallax</h2>
		<h3 id="parallax2">Parallax</h3>
		<h3 id="parallax3">Parallax</h3>
	</div>
	<div class="scrollblock" id="examples-easing">
		<h2 id="easing">Easing</h2>
		<div id="easing_bottom"></div>
	</div>
	<div class="scrollblock" id="howtouse">
		<h1>How To Use</h1>
		<p id="disclaimer">Disclaimer: This is an experimental, just-for-fun sort of project and hasn&rsquo;t been thoroughly tested.</p>
		<div id="instructions">
			<p>Design and build your site, dividing your content into blocks.</p>
			<p class="divider">&#9733; &#9733; &#9733;</p>
			<p>Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.</p>
			<p><blockquote><pre>
$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});</pre></blockquote></p>
			<p class="divider">&#9733; &#9733; &#9733;</p>
			<p>Target an element and animate its properties.</p>
			<p><blockquote><pre>
scrollorama.animate('#example1',{
    duration:400, property:'opacity'
})</pre></blockquote></p>
			<p id="instructions-animation">The animation parameters you can use are:</p>
			<ul class="param-list">
				<li>
					<span class="param">duration</span>
					<span class="param-def">number of pixels of scrolling the animation lasts</span>
				</li>
				<li>
					<span class="param">delay</span>
					<span class="param-def">number of pixels of scrolling before the animation starts<small>(animation is set to begin when the top of the scroll block is at the bottom of browser window)</small></span>
				</li>
				<li>
					<span class="param">property</span>
					<span class="param-def">css property being animated <small>(must be numeric)</small></span>
				</li>
				<li>
					<span class="param">start</span>
					<span class="param-def">value of the css property at the start of the animation <small>(if unassigned, will be the element&rsquo;s current property value)<br />(also can be a function that returns a value for dynamic heights)</small></span>
				</li>
				<li>
					<span class="param">end</span>
					<span class="param-def">value of the css property at the end of the animation <small>(if unassigned, will be the element&rsquo;s current property value)<br />(also can be a function that returns a value for dynamic heights)</small></span>
				</li>
				<li>
					<span class="param">pin</span>
					<span class="param-def">set to true if you want the scroll block to be pinned during its animations <small>(note: block will be pinned for all its element&rsquo;s animations)</small></span>
				</li>
				<li>
					<span class="param">easing</span>
					<span class="param-def">'bounce baby, bounce.' use the same easing equations you're used to.
						<small>(if unassigned, will be a linear transition)</small></span>
				</li>
			</ul>
			<p class="divider">&#9733; &#9733; &#9733;</p>
			<p>Hook into the <code>onBlockChange</code> event.</p>
			<p><blockquote><pre>
scrollorama.onBlockChange(function() {
    alert('You just scrolled to block#'+scrollorama.blockIndex);
});</pre></blockquote></p>
			<p class="divider">&#9733; &#9733; &#9733;</p>
			<p>Note: If you are not using the pinning feature, it is recommended you disable it.
				<small>Pinning requires scroll blocks to be converted to absolute positioning, which can break some layouts.</small>
			</p>
			<p><blockquote><pre>
$(document).ready(function() {
    var scrollorama = $.scrollorama({
        enablePin:false
    });
});</pre></blockquote></p>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			// initialize the plugin, pass in the class selector for the sections of content (blocks)
			var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
			// assign function to add behavior for onBlockChange event
			scrollorama.onBlockChange(function() {
				var i = scrollorama.blockIndex;
				$('#console')
					.css('display','block')
					.text('onBlockChange | blockIndex:'+i+' | current block: '+scrollorama.settings.blocks.eq(i).attr('id'));
			});
			// lettering.js for coolness
			$('#title').lettering();
			$('#title span')
				.css('display','block')
				.css('float','left');
			$('.char9').css('padding-left','6px');
			// animate the title letters to explode
			scrollorama
				.animate('#title',{ duration: 300, property:'zoom', end: 8 })
				//.animate('#author',{ duration: 10, property:'z-index', end: 0 });
			$('#title span').each(function() {
				scrollorama
					.animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 })
					.animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 });
			});
			// animate some examples
			scrollorama
				.animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true })
				.animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 })
				.animate('#fly-in',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 })
				.animate('#rotate-in',{ duration: 800, property:'rotate', start:720 })
				.animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 })
				.animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 })
				.animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 });
			// animate the parallaxing
			scrollorama
				.animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 })
				.animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
			// animate some easing examples
			var $easing = $('#easing'),
				$clone = $easing.clone().appendTo('#examples-easing')
								.css({position:'relative',top:'-2.95em'})
								.lettering();
			$easing.css({ color: '#131420', textShadow: '0 1px 0 #363959' });
			easing_array = [	'easeOutBounce',
								'easeOutQuad',
								'easeOutCubic',
								'easeOutQuart',
								'easeOutQuint', 
								'easeOutExpo' 		];
			$clone.find('span')
				.each( function( idx, el ){
					scrollorama.animate( $(this), {	delay:400, duration: 500, 
													property:'top', end: 300,
													easing: easing_array[idx] });
				})
		});
	</script>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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