SplitText使用方法

SplitText 插件是GreenSock 365体育官网-ribo88_365手机体育投注_365体育在线国外网址平台用于将文本打散成数组从而进行365体育官网-ribo88_365手机体育投注_365体育在线国外网址。

GreenSock 文件包中并没有包含SplitText 插件,因此需要另外下载。

载入SplitText文件

首先下载SplitText破解版。SplitText并非免费插件,商用时请注意版权
由于要用到stagger方法,因此还需要载入TweenMax.js等文件。

下载TweenMax和SplitText

在页面中载入TweenMax.min.js和SplitText.min.js文件


准备需要进行TweenMax365体育官网-ribo88_365手机体育投注_365体育在线国外网址的文字

拟把疏狂图一醉。对酒当歌,强乐还无味。衣带渐宽终不悔。为伊消得人憔悴。

使用SplitText把文字打散并获取打散后的数组

mySplitText = new SplitText("#text", {type:"chars"}); //{type:"chars,words,lines"}打散成字、词、行
chars = mySplitText.chars;//获取字 mySplitText.words获取词 mySplitText.lines获取行

chars是按照单个字打散,还可以设置按照词组words打散(通过空格区分),按行lines打散(通过换行符区分)

将打散的文字进行TweenMax的stagger365体育官网-ribo88_365手机体育投注_365体育在线国外网址

TweenMax.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01);

运行结果:

  • HTML
  • CSS
  • JS
  • 展示
拟把疏狂图一醉。对酒当歌,强乐还无味。衣带渐宽终不悔。为伊消得人憔悴。

mySplitText = new SplitText("#text", {type:"chars"}); 
chars = mySplitText.chars;
TweenMax.set("#text", {perspective:400});
TweenMax.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01);
重播