Arctext.js 使用 jQuery 和 CSS3 弯曲旋转文字 - 文章教程

Arctext.js 使用 jQuery 和 CSS3 弯曲旋转文字

发布于 2017-09-19 字数 2268 浏览 4480 评论 0

虽然 CSS3 里面有旋转的相关属性,但是基本都是整个块一起旋转,如果我们要实现弯曲的文本,单单用 CSS3 就无法完成了,Arctext.js 是一个 jQuery 插件,基于 Lettering.js 插件,能够准确控制一段文字中的每一个字符,给他们设置一个递增/递减的幅度,就可以实现一个弯曲的文本。

Arctext.js 使用 jQuery 和 CSS3 弯曲旋转文字

可选参数

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 should be rotated.

fitText    : false 
// if you want to try out the 
// fitText plugin (http://fittextjs.com/) 
// set this to true. 
// Don't forget, the wrapper should be fluid.

使用方法

首先我们需要引入插件文件,也就是 jQuery 和 Arctext.js 插件的文件

<script src="jquery.min.js"></script>
<script src="jquery.arctext.js"></script>

在页面加载完成以后调用插件

Arctext.js 使用 jQuery 和 CSS3 弯曲旋转文字

$(function(){
    $('.txt').arctext({radius: 300});
})

里面可选的参数你可以参加上面的代码,可以设置段落弯曲弧度、弯曲的方向等。

方法函数

如果你已经设置了弯曲的文本,但是你现在又想改一下特效,那么你可以使用下面的方法

$(function(){
    mytxt = $('.txt')
    
    //初始化
    mytxt.arctext({radius: 300});
    
    //修改效果
    mytxt.arctext('set', {
        radius        : 200, 
        dir            : 1, 
        animation    : {
            speed    : 300
        }
    })
})

中间的切换是有动画的,非常的好看,可以点击这里看看效果:https://tympanus.net/Development/Arctext/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3