分享一個使一行文字變形產生彎曲弧度特效的jQuery插件 - Arctext.js
日期:2012/01/26

CSS3可以幫助我們旋轉字體,但是如果想讓一行字體產生弧度曲線的效果,稍微有點兒費勁。今天分享一個jQuery插件:Arctext.js , 可以有效的幫助我們生成一行帶有弧度的文字效果。它能夠自動計算正確的旋轉角度,并且生成對應的CSS3。希望大家喜歡!
function init() {
$headline.show().arctext({radius: 400});
$word1.show().arctext({radius: 148});
$word2.show().arctext({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;
});
};
歡迎訪問GBin1.com


浙公網安備 33010602011771號