以下是 Arctext弧形文字效果CSS3&jQuery插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Arctext弧形文字效果插件（CSS3&jQuery），属于站长常用代码" />
<title>Arctext弧形文字效果插件（CSS3&jQuery）</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Arctext.js - Curving text with CSS3 and jQuery" />
<meta name="keywords" content="arc, letters, words, rotate, warp, circle, curve, along, path, jquery, css3, transform" />
<meta name="author" content="Codrops" />
<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' />-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/CSS3SlidingImagePanels/">
<strong>« 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 & 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 ♦ bend ♦ your ♦ 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><br />
<p>来源：<a href="http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/" target="_blank">codrops</a> 代码整理：<a href="http://13141618.taobao.com/" target="_blank">程序员设计师联盟淘宝店</a> 感谢：<a href="http://www.nifengla.com/" target="_blank">西西</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>CSS3&jQuery制作的Arctext弧形文字效果，效果很赞，请使用Firefox或Chrome查看效果，程序员设计师联盟淘宝店推荐下载！</p></p>
<p style="margin:20px 0"></p>
</div>
<script type="text/javascript" src="jsjquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<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/>
</body>
</html>
JS代码(jquery.arctext.js):
/** * Arctext.js * A jQuery plugin for curved text * http://www.codrops.com * * Copyright 2011,Pedro Botelho / Codrops * Free to use under the MIT license. * * Date:Mon Jan 23 2012 */
(function( $,undefined ){
/*!* FitText.js 1.0** Copyright 2011,Dave Rupert http://daverupert.com* Released under the WTFPL license* http://sam.zoy.org/wtfpl/** Date:Thu May 05 14:23:00 2011 -0600*/
$.fn.fitText = function( kompressor,options ){
var settings ={
'minFontSize':Number.NEGATIVE_INFINITY,'maxFontSize':Number.POSITIVE_INFINITY}
;
return this.each(function(){
var $this = $(this);
// store the objectvar compressor = kompressor || 1;
// set the compressorif ( options ){
$.extend( settings,options );
}
// Resizer() resizes items based on the object width divided by the compressor * 10var resizer = function (){
$this.css('font-size',Math.max(Math.min($this.width() / (compressor*10),parseFloat(settings.maxFontSize)),parseFloat(settings.minFontSize)));
}
;
// Call once to set.resizer();
// Call on resize. Opera debounces their resize by default.$(window).resize(resizer);
}
);
}
;
/* * Lettering plugin * * changed injector function:* add
for empty chars. */
function injector(t,splitter,klass,after){
var a = t.text().split(splitter),inject = '',emptyclass;
if (a.length){
$(a).each(function(i,item){
emptyclass = '';
if(item === ' '){
emptyclass = ' empty';
item='
';
}
inject += '<span class="'+klass+(i+1)+emptyclass+'">'+item+'</span>'+after;
}
);
t.empty().append(inject);
}
}
var methods={
init:function(){
return this.each(function(){
injector($(this),'','char','');
}
);
}
,words:function(){
return this.each(function(){
injector($(this),' ','word',' ');
}
);
}
,lines:function(){
return this.each(function(){
var r = "eefec303079ad17405c889e092e105b0";
// Because it's hard to split a <br/> tag consistently across browsers,// (*ahem* IE *ahem*),we replaces all <br/> instances with an md5 hash// (of the word "split"). If you're trying to use this plugin on that// md5 hash string,it will fail because you're being ridiculous.injector($(this).children("br").replaceWith(r).end(),r,'line','');
}
);
}
}
;
$.fn.lettering= function( method ){
// Method calling logicif ( method && methods[method] ){
return methods[ method ].apply( this,[].slice.call( arguments,1 ));
}
else if ( method === 'letters' || ! method ){
return methods.init.apply( this,[].slice.call( arguments,0 ) );
// always pass an array}
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
return this;
}
;
/* * Arctext object. */
$.Arctext= function( options,element ){
this.$el= $( element );
this._init( options );
}
;
$.Arctext.defaults={
radius:0,// the minimum value allowed is half of the word length. if set to -1,the word will be straight.dir:1,// 1:curve is down,-1:curve is up.rotate:true,// if true each letter will be rotated.fitText:false // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget the wrapper should be fluid.}
;
$.Arctext.prototype={
_init:function( options ){
this.options= $.extend( true,{
}
,$.Arctext.defaults,options );
// apply the lettering plugin.this._applyLettering();
this.$el.data( 'arctext',true );
// calculate valuesthis._calc();
// apply transformation.this._rotateWord();
// load the eventsthis._loadEvents();
}
,_applyLettering:function(){
this.$el.lettering();
if( this.options.fitText )this.$el.fitText();
this.$letters= this.$el.find('span').css('display','inline-block');
}
,_calc:function(){
if( this.options.radius === -1 )return false;
// calculate word / arc sizes & distances.this._calcBase();
// get final values for each letter.this._calcLetters();
}
,_calcBase:function(){
// total word width (sum of letters widths)this.dtWord= 0;
var _self= this;
this.$letters.each( function(i){
var $letter= $(this),letterWidth= $letter.outerWidth( true );
_self.dtWord += letterWidth;
// save the center point of each letter:$letter.data( 'center',_self.dtWord - letterWidth / 2 );
}
);
// the middle point of the word.var centerWord = this.dtWord / 2;
// check radius:the minimum value allowed is half of the word length.if( this.options.radius < centerWord )this.options.radius = centerWord;
// total arc segment length,where the letters will be placed.this.dtArcBase= this.dtWord;
// calculate the arc (length) that goes from the beginning of the first letter (x=0) to the end of the last letter (x=this.dtWord).// first lets calculate the angle for the triangle with base = this.dtArcBase and the other two sides = radius.var angle= 2 * Math.asin( this.dtArcBase / ( 2 * this.options.radius ) );
// given the formula:L(ength) = R(adius) x A(ngle),we calculate our arc length.this.dtArc= this.options.radius * angle;
}
,_calcLetters:function(){
var _self= this,iteratorX= 0;
this.$letters.each( function(i){
var $letter= $(this),// calculate each letter's semi arc given the percentage of each letter on the original word.dtArcLetter= ( $letter.outerWidth( true ) / _self.dtWord ) * _self.dtArc,// angle for the dtArcLetter given our radius.beta= dtArcLetter / _self.options.radius,// distance from the middle point of the semi arc's chord to the center of the circle.// this is going to be the place where the letter will be positioned.h= _self.options.radius * ( Math.cos( beta / 2 ) ),// angle formed by the x-axis and the left most point of the chord.alpha= Math.acos( ( _self.dtWord / 2 - iteratorX ) / _self.options.radius ),// angle formed by the x-axis and the right most point of the chord.theta= alpha + beta / 2,// distances of the sides of the triangle formed by h and the orthogonal to the x-axis.x= Math.cos( theta ) * h,y= Math.sin( theta ) * h,// the value for the coordinate x of the middle point of the chord.xpos= iteratorX + Math.abs( _self.dtWord / 2 - x - iteratorX ),// finally,calculate how much to translate each letter,given its center point.// also calculate the angle to rotate the letter accordingly.xval= 0| xpos - $letter.data( 'center' ),yval= 0| _self.options.radius - y,angle= ( _self.options.rotate ) ? 0| -Math.asin( x / _self.options.radius ) * ( 180 / Math.PI ):0;
// the iteratorX will be positioned on the second point of each semi arciteratorX = 2 * xpos - iteratorX;
// save these values$letter.data({
x:xval,y:( _self.options.dir === 1 ) ? yval:-yval,a:( _self.options.dir === 1 ) ? angle:-angle}
);
}
);
}
,_rotateWord:function( animation ){
if( !this.$el.data('arctext') ) return false;
var _self = this;
this.$letters.each( function(i){
var $letter= $(this),transformation= ( _self.options.radius === -1 ) ? 'none':'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)',transition= ( animation ) ? 'all ' + ( animation.speed || 0 ) + 'ms ' + ( animation.easing || 'linear' ):'none';
$letter.css({
'-webkit-transition':transition,'-moz-transition':transition,'-o-transition':transition,'-ms-transition':transition,'transition':transition}
).css({
'-webkit-transform':transformation,'-moz-transform':transformation,'-o-transform':transformation,'-ms-transform':transformation,'transform':transformation}
);
}
);
}
,_loadEvents:function(){
if( this.options.fitText ){
var _self = this;
$(window).on( 'resize.arctext',function(){
_self._calc();
// apply transformation._self._rotateWord();
}
);
}
}
,set:function( opts ){
if( !opts.radius &&!opts.dir &&opts.rotate === 'undefined' ){
return false;
}
this.options.radius = opts.radius || this.options.radius;
this.options.dir= opts.dir || this.options.dir;
if( opts.rotate !== undefined ){
this.options.rotate = opts.rotate;
}
this._calc();
this._rotateWord( opts.animation );
}
,destroy:function(){
this.options.radius= -1;
this._rotateWord();
this.$letters.removeData('x y a center');
this.$el.removeData('arctext');
$(window).off('.arctext');
}
}
;
var logError= function( message ){
if ( this.console ){
console.error( message );
}
}
;
$.fn.arctext= function( options ){
if ( typeof options === 'string' ){
var args = Array.prototype.slice.call( arguments,1 );
this.each(function(){
var instance = $.data( this,'arctext' );
if ( !instance ){
logError( "cannot call methods on arctext prior to initialization;
" +"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
logError( "no such method '" + options + "' for arctext instance" );
return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
this.each(function(){
var instance = $.data( this,'arctext' );
if ( !instance ){
$.data( this,'arctext',new $.Arctext( options,this ) );
}
}
);
}
return this;
}
;
}
)( jQuery );
CSS代码(demo.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
section,header{display:block;}
/* General Demo Style */
body{font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#95AB9D url(../images/texture.png) repeat top left;font-weight:400;font-size:15px;color:#3a2127;overflow-y:scroll;}
a{color:#333;text-decoration:none;}
.container{width:100%;padding-bottom:40px;min-width:590px;position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px;margin:0px 20px 20px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;font-family:'Montserrat',Impact,Arial,sans-serif;text-transform:uppercase;}
.container > header h1{font-size:68px;line-height:70px;position:relative;font-weight:800;letter-spacing:2px;color:#D26A44;text-shadow:1px 1px 1px rgba(0,0,0,0.1),0 0 1px #D26A44;padding:0px 0px 60px 0px;}
.container > header h1 span:nth-child(4),.container > header h1 span:nth-child(5),.container > header h1 span:nth-child(6),.container > header h1 span:nth-child(7){color:#452716;text-shadow:1px 0px 1px rgba(255,255,255,0.4),0 0 1px #452716;}
.container > header h2{font-size:18px;line-height:30px;color:#F8ECBF;text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
section{max-width:1200px;margin-left:auto;margin-right:auto;}
.main,.sub{border-bottom:3px dashed rgba(248,236,191,0.6);padding-bottom:50px;}
.sub{padding:50px 0px;}
.example,.code{width:40%;padding:5%;float:left;}
.code{text-align:left;font-family:'Montserrat',Impact,Arial,sans-serif;color:#452716;}
.code h4{font-size:28px;padding-bottom:10px;color:#D26A44;text-shadow:1px 1px 1px rgba(255,255,255,0.2);}
code{color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.2);padding:20px;background:rgba(0,0,0,0.1);clear:both;position:relative;display:block;margin-top:10px;border-radius:10px;}
.buttons{width:495px;height:100px;clear:none;margin-top:50px;}
.buttons a{float:left;display:block;}
.buttons a span{display:block;}
.buttons a span{display:block;font-size:13px;padding:2px 10px;margin:3px 3px;border-radius:3px;box-shadow:0px 1px 1px rgba(0,0,0,0.1);color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.1);background:rgba(193,49,0,0.8);}
.buttons a span:last-child{background:#F8ECBF;font-size:11px;color:rgba(193,49,0,0.8);min-height:45px;}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:rgba(255,255,255,0.8);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);-webkit-animation:slideOut 0.5s ease-in-out 0.3s backwards;}
@-webkit-keyframes slideOut{0%{top:-30px;opacity:0;}
100%{top:0px;opacity:1;}
}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.codrops-top a:hover{background:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
p.codrops-demos{text-align:center;display:block;padding:14px;}
p.codrops-demos a,p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{font-size:11px;padding:2px 10px;margin:0px 3px;border-radius:3px;box-shadow:0px 1px 1px rgba(0,0,0,0.1);color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.1);background:rgba(193,49,0,0.8);}
p.codrops-demos a:hover{background:#FFFBD0;color:rgba(193,49,0,0.5);}
p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{color:#FFFBD0;background:#D26A44;box-shadow:1px 1px 1px rgba(0,0,0,0.05) inset;}
/* Media Queries */
@media screen and (max-width:1140px){.example,.code{width:90%;padding:5%;float:none;}
.buttons{clear:both;}
}
CSS代码(style.css):
.arc-wrapper{position:relative;margin:0px auto;font-family:'Montserrat',serif;text-transform:uppercase;width:500px;height:360px;}
.arc-wrapper:before{content:'';position:absolute;width:340px;height:340px;background:#F5E9BC url(../images/noise.png) repeat top left;border:10px solid #452716;border-radius:50%;box-shadow:0px 0px 9px 4px rgba(0,0,0,0.3);top:50%;left:50%;margin:-180px 0 0 -180px;}
.arc-wrapper:after{content:'A';color:#F5E9BC;line-height:210px;width:240px;height:240px;background:#452716 url(../images/noise.png) repeat top left;border-radius:50%;position:absolute;top:50%;left:50%;margin:-120px 0 0 -120px;font-family:'Sail',serif;text-transform:none;font-size:138px;text-shadow:0px 0px 1px #F5E9BC;text-indent:-25px;}
.arc-wrapper h3{position:absolute;width:100%;top:0;left:0;font-size:28px;margin-top:16px;color:#D26A44;letter-spacing:-4px;text-shadow:1px 1px 1px #954c04;}
.arc-wrapper h4{position:absolute;z-index:10;width:100%;font-size:39px;bottom:10px;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.2);font-family:'Concert One',serif;}
.arc-wrapper h4 span{background:#D26A44;padding:3px;width:40px;height:40px;text-align:center;line-height:40px;border-radius:50%;margin:0 -3px 0px -3px;}
.arc-wrapper h4 span.empty{background:transparent;width:4px;}
.example h3{font-family:'Concert One',serif;text-transform:uppercase;text-shadow:1px 1px 1px rgba(0,0,0,0.2);color:#F8ECBF;font-size:40px;}
#example2{margin-top:80px;}
#example4{margin-top:120px;}
分享到QQ
分享到微博
微信扫一扫
