yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...

【温馨提示】源码包解压密码：www.youhutong.com

效果图：

描述说明：

要使用该SVG文字动画特效，要在页面中引入segment.js，它用于动画SVG路径，d3-ease，用于制作easing动画过渡效果，以及letters.js。

HTML结构

可以使用一个

容器来包裹需要制作动画效果的文字。

Helloweb

设置和调用插件

然后我们就可以在JavaScript中获取这个元素，通过配置参数来制作绘制文字的动画。所有的参数选项(除了individualDelays)都可以设置为以下的值：

单个值：可以被所有字母接收。

数组：数组中的第一个元素会被第一个字母接收，第二个元素被第二个字母接收，以此类推。//选择元素

var el = document.querySelector('.text');

//每个选项可以定义为单个也可以定义为数组

var options = {

size: 200, // 字体大小，决定文字的高度，px

weight: 5, // 粗体，px

rounded: false, // 字母结尾圆角

color: ['#f90','#5F6062'], // 字体颜色

duration: 1, // 每个字母的动画展示时长 (seconds)

delay: [0, 0.1], // 每个字母间的动画延时

fade: 0.5, // 渐显效果的时长(seconds)

easing: d3_ease.easeCubicInOut.ease, // 缓冲动画效果

individualDelays: false // 默认false，如果设置成false，则动画效果会从左到右过度展示，如果是true，字母动画效果是同步展示

};

var myText = new Letters(el, options);

myText.show();

通过上面的配置，我们已经定义了文字显示和动画的选项，插件会在容器中生成SVG文字。默认情况下，文字是被隐藏的。通过使用myText.show()将动画文字展示出来。插件还提供了其他几种方法。//文字隐藏

myText.hide();

//切换文字

myText.toggle();

浏览器启用弹出窗口过滤功能，将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了！

【温馨提示】源码包解压密码：www.youhutong.com

郑重声明：

1、本站源码仅供个人学习研究和交流使用，请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享，仅供学习交流使用，本站不提供任何技术支持

3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。

4、如侵犯到任何版权问题，请立即告知本站(立即在线告知)，本站将及时删除并致以最深的歉意

yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...相关推荐

yzmcms图片自适应代码_[ NeurIPS 2020 ] 一叶知秋 —— 基于“单目标域样本”的领域自适应方法...
引言传统的无监督领域自适应方法(UDA)除了需要大量的源域数据(Source Data)外,还需要足够数量的无标注目标域样本(Target Data)进行训练,比如基于分布对齐.基于伪标签提取和基于 ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
js微信抢红包脚本代码_基于Auto.js的微信红包监测
前段时间接触了下Auto.js(https://github.com/hyb1996/Auto.js),很好上手而且挺有意思,于是写了个微信红包监测脚本大概思路是,不断获取手机屏幕截图,发现新消息则 ...
yzmcms图片自适应代码_YzmCMS支付宝配置教程
在配置支付功能之前需要先确认一下,安装系统的PHP版本>=5.5,所以PHP低于5.5版本是无法使用系统中的支付功能的. 我们接着往下看,配置支付宝需要填写三项,应用ID,商户应用私钥,支付宝公 ...
基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览源码下载实现的代码. css代码: .jawbone-hero .ja ...
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
TIA博途_基于SCL语言制作模拟量输入输出全局库的具体方法
TIA博途_基于SCL语言制作模拟量输入输出全局库的具体方法一. 模拟量输入块:创建FB,定义块的接口,如下图所示: 程序中包含了高报警,低报警,一般上位机报警需要这个变量. 极性选择,适合更广的应 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...

yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...

yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...相关推荐

最新文章

热门文章