web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
文字效果
超酷创意分段式SVG文字动画特效
分类:
文字效果
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
要使用该SVG文字动画特效,要在页面中引入segment.js,它用于动画SVG路径,d3-ease,用于制作easing动画过渡效果,以及letters.js。 ```html ``` ##### HTML结构 可以使用一个div容器来包裹需要制作动画效果的文字。 ```html
my text
``` ##### 初始化插件 然后我们就可以在JavaScript中获取这个元素,通过配置参数来制作绘制文字的动画。所有的参数选项(除了individualDelays)都可以设置为以下的值: 单个值:可以被所有字母接收。 数组:数组中的第一个元素会被第一个字母接收,第二个元素被第二个字母接收,以此类推。 下面是一个使用配置参数的例子: ```html // Selecting the container element var el = document.querySelector('.my-text'); // All the possible options (these are the default values) // Remember that every option (except individualDelays) can be defined as single value or array var options = { size: 100, // Font size, defined by the height of the letters (pixels) weight: 1, // Font weight (pixels) rounded: false, // Rounded letter endings color: '#5F6062', // Font color duration: 1, // Duration of the animation of each letter (seconds) delay: [0, 0.05], // Delay animation among letters (seconds) fade: 0.5, // Fade effect duration (seconds) easing: d3_ease.easeCubicInOut.ease, // Easing function individualDelays: false, // If false (default), every letter delay increase gradually, showing letters from left to right always. If you want to show letters in a disorderly way, set it to true, and define different delays for the desired letters. }; // Initializing the text (Letters parameters: container-element, options) var myText = new Letters(el, options); ``` 通过上面的配置,我们已经定义了文字显示和动画的选项,插件会在容器中生成SVG文字。默认情况下,文字是被隐藏的,如何触发文字动画,可以参看下面的方法。 ```html // Show letters with the default options defined myText.show(); // Hide letters with the default options defined myText.hide(); // Toggle letters with the default options defined myText.toggle(); // An example with all the possible options for triggers // Parameters (JSON): duration, delay, fade, easing, individualDelays, callback var newOptions = { duration: 2, delay: 0.2, fade: 1, easing: d3_ease.easeCircleInOut.ease, individualDelays: false, callback: function(){ myText.hide(); } }; // These new options will override the options defined in the initialization myText.show(newOptions); // Show letters instantly, without any animation at all // There is a hideInstantly and toggleInstantly function, too myText.showInstantly(); // Shortcut for myText.show(0, 0, 0); ``` 每一个SVG字母都被分配一个letter class类,例如:letter-(a, b, c, ...),以及letter-(1, 2, 3, ...)。通过这些class我们可以自定义字母的样式,例如设置margin值或定位方式等。 ```html /* Setting margin among all letters */ .letter { margin: 0 10px; } /* Setting background to letter m */ .letter-m { background-color: lightsalmon; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告