利用jQuer CSS3實現實現彎曲文字路徑



9 32 11



特效描述:利用jQuer CSS3實現 彎曲文字路徑,利用jQuer CSS3實現實現彎曲文字路徑

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat|Sail|Concert+One' rel='stylesheet' type='text/css' />

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

3. HTML代碼

        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/CSS3SlidingImagePanels/">
                    <strong>&laquo; Previous Demo: </strong>Sliding Image Panels with CSS3
                </a>
                <span class="right">
                    <a href="http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			<header>
				<h1 id="headline">Arctext.js</h1>
				<h2>Curving text with CSS3 &amp; jQuery</h2>
				<p class="codrops-demos">
					<a href="#sub1">Curve</a>
					<a href="#sub2">Direction</a>
					<a href="#sub3">No rotation</a>
					<a href="#sub4">Set/animate</a>
				</p>
			</header>
			<section class="main">				
				<div id="arc-wrapper" class="arc-wrapper">
					<h3>Just &diams; bend &diams; your &diams; text</h3>
					<h4>ABCDEFG</h4>
				</div>
			</section>
			<section class="sub" id="sub1">
				<div class="example">
					<h3 id="example1">I wanna be curved</h3>
				</div>
				<div class="code">
					<h4>Example 1 - Curve</h4>
					<p>Curved with a radius of 300</p>
					<code>$example1.arctext({radius: 300})</code>
				</div>
				<div class="clr"></div>
			</section>
			<section class="sub" id="sub2">
				<div class="example">
					<h3 id="example2">I wanna be different</h3>
				</div>
				<div class="code">
					<h4>Example 2 - Direction</h4>
					<p>Changed direction</p>
					<code>$example2.arctext({radius: 400, dir: -1})</code>
				</div>
				<div class="clr"></div>
			</section>
			<section class="sub" id="sub3">
				<div class="example">
					<h3 id="example3">I have straight letters</h3>
				</div>
				<div class="code">
					<h4>Example 3 - No rotation</h4>
					<p>Non-rotated letters</p>
					<code>$example3.arctext({radius: 500, rotate: false})</code>
				</div>
				<div class="clr"></div>
			</section>
			<section class="sub" id="sub4">
				<div class="example">
					<h3 id="example4">See me change</h3>
				</div>
				<div class="code">
					<h4>Example 4 - Set/animate</h4>
					<p>Set or animate</p>
					<code>$example4.arctext({radius: 300})</code>
					<p class="buttons">
						<a id="button_set" href="#"><span>Set me</span><span>radius: 140,<br /> dir: -1</span></a>
						<a id="button_anim1" href="#"><span>Animate me</span><span>radius: 300,<br /> dir: -1,<br /> animation: 300ms ease-out</span></a>
						<a id="button_anim2" href="#"><span>Animate me</span><span>radius: 200,<br /> dir: 1,<br /> animation: 300ms</span></a>
						<a id="button_reset" href="#"><span>Reset me</span><span>radius: 300,<br /> dir: 1</span></a>
					</p>
				</div>
				<div class="clr"></div>
			</section>
			<div class="clr"></div>
        </div>
		<script type="text/javascript">
			var $headline = $('#headline').hide();
			var $word1		= $('#arc-wrapper').find('h3').hide();
			var $word2		= $('#arc-wrapper').find('h4').hide();
			var $example1	= $('#example1').hide();
			var $example2	= $('#example2').hide();
			var $example3	= $('#example3').hide();
			var $example4	= $('#example4').hide();
			google.load('webfont','1');
			google.setOnLoadCallback(function() {
				WebFont.load({
					google		: {
						families	: ['Montserrat','Concert One']
					},
					fontactive	: function(fontFamily, fontDescription) {
						init();
					},
					fontinactive	: function(fontFamily, fontDescription) {
						init();
					}
				});
			});
			function init() {
				$headline.show().arctext({radius: 400});
				$word1.show().arctext();
				$word2.show().arctext({radius: 148, dir: -1});
				$example1.show().arctext({radius: 300});
				$example2.show().arctext({radius: 400, dir: -1});
				$example3.show().arctext({radius: 500, rotate: false});
				$example4.show().arctext({radius: 300});
				$('#button_set').on('click', function() {
					$example4.arctext('set', {
						radius		: 140,
						dir			: -1
					});
					return false;
				});
				$('#button_anim1').on('click', function() {
					$example4.arctext('set', {
						radius		: 300, 
						dir			: -1,
						animation	: {
							speed	: 300,
							easing  : 'ease-out'
						}
					});
					return false;
				});
				$('#button_anim2').on('click', function() {
					$example4.arctext('set', {
						radius		: 200, 
						dir			: 1, 
						animation	: {
							speed	: 300
						}
					});
					return false;
				});
				$('#button_reset').on('click', function() {
					$example4.arctext('set', {
						radius		: 300, 
						dir			: 1
					});
					return false;
				});
			};
		</script/>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 全屏切換
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子