検索
ホームページウェブフロントエンドH5 チュートリアル分段式基于SVG文字超酷创意动画特效


  简要教程

  这是一款基于segment.js制作的非常有创意的分段式SVG文字动画特效。这个文字动画特效通过动画SVG的描边路径来制作各种文字的动画效果,效果非常的赞。

  这个SVG文字动画特效的第一个DEMO中的最后几个例子使用了mo.js插件,一款由Oleg Solomka编写的用于制作网页图形动画的JavaScript库插件。通过mo.js,可以制作出效果更为震撼的文字动画效果。

  

1065.gif


  特效中使用的字体是exquisite lowercase font,一套极富创意的WEB字体。


  使用方法

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

<script src="js/segment.js"></script>    
2    <script src="js/d3-ease.v0.6.js"></script>                     
3    <script src="js/letters.js"></script>

 HTML结构

 可以使用一个

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

<div class="my-text">my text</div>

初始化插件

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

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

  • 数组:数组中的第一个元素会被第一个字母接收,第二个元素被第二个字母接收,以此类推。

  下面是一个使用配置参数的例子:

// Selecting the container element    
02    var el = document.querySelector(&#39;.my-text&#39;);    
03    
04    // All the possible options (these are the default values)    
05    // Remember that every option (except individualDelays) can be defined as single value or array    
06    var options = {    
07        size: 100,    // Font size, defined by the height of the letters (pixels)    
08        weight: 1,         // Font weight (pixels)    
09        rounded: false,    // Rounded letter endings    
10        color: &#39;#5F6062&#39;,  // Font color    
11        duration: 1,       // Duration of the animation of each letter (seconds)    
12        delay: [0, 0.05],  // Delay animation among letters (seconds)    
13        fade: 0.5,         // Fade effect duration (seconds)    
14        easing: d3_ease.easeCubicInOut.ease,   // Easing function    
15        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.    
16    };    
17    
18    // Initializing the text (Letters parameters: container-element, options)    
19    var myText = new Letters(el, options);


通过上面的配置,我们已经定义了文字显示和动画的选项,插件会在容器中生成SVG文字。默认情况下,文字是被隐藏的,如何触发文字动画,可以参看下面的方法。

// Show letters with the default options defined    
02    myText.show();    
03    
04    // Hide letters with the default options defined    
05    myText.hide();    
06    
07    // Toggle letters with the default options defined    
08    myText.toggle();    
09    
10    // An example with all the possible options for triggers    
11    // Parameters (JSON): duration, delay, fade, easing, individualDelays, callback    
12    var newOptions = {    
13        duration: 2,    
14        delay: 0.2,    
15        fade: 1,    
16        easing: d3_ease.easeCircleInOut.ease,    
17        individualDelays: false,    
18        callback: function(){    
19            myText.hide();    
20        }    
21    };    
22    // These new options will override the options defined in the initialization    
23    myText.show(newOptions);    
24    
25    // Show letters instantly, without any animation at all    
26    // There is a hideInstantly and toggleInstantly function, too    
27    myText.showInstantly();  // Shortcut for myText.show(0, 0, 0);

每一个SVG字母都被分配一个letter class类,例如:letter-(a, b, c, ...),以及letter-(1, 2, 3, ...)。通过这些class我们可以自定义字母的样式,例如设置margin值或定位方式等。

/* Setting margin among all letters */    
2    .letter {    
3      margin: 0 10px;    
4    }    
5    
6    /* Setting background to letter m */    
7    .letter-m {    
8      background-color: lightsalmon;    
9    }

以上就是分段式基于SVG文字超酷创意动画特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!


声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
聊聊如何利用 SVG 实现图片马赛克效果聊聊如何利用 SVG 实现图片马赛克效果Sep 01, 2022 am 11:05 AM

不借助 Javascript,如何利用 SVG 实现图片马赛克效果?下面本篇文章就来带大家详细了解一下,希望对大家有所帮助!

svg怎么转jpg格式svg怎么转jpg格式Nov 24, 2023 am 09:50 AM

svg可以通过使用图像处理软件、使用在线转换工具和使用Python图像处理库的方法来转jpg格式。详细介绍:1、图像处理软件包括Adobe Illustrator、Inkscape和GIMP;2、在线转换工具包括CloudConvert、Zamzar、Online Convert等;3、Python图像处理库等等。

深入浅析vue3+vite中怎么使用svg图标深入浅析vue3+vite中怎么使用svg图标Apr 28, 2022 am 10:48 AM

svg图片在项目中使用的非常广泛,下面本篇文章带大家介绍一下如何在vue3 + vite 中使用svg图标,希望对大家有所帮助!

VUE3入门教程:使用Vue.js插件玩转SVGVUE3入门教程:使用Vue.js插件玩转SVGJun 16, 2023 am 09:48 AM

随着现代Web前端开发的不断发展,越来越多的技术被广泛应用于实际开发中。其中,Vue.js是目前最为流行的JavaScript框架之一,它基于MVVM模式,提供了丰富的API和组件库,使得开发响应式、可复用、高效的Web应用变得更加容易。而目前最新的Vue.js3版本相较于旧版,又有着更好的性能和更丰富的特性,引起了广泛的关注和研究。本文将会为大家介绍一种

详解用SVG给 favicon 添加标识详解用SVG给 favicon 添加标识Sep 07, 2022 am 10:30 AM

怎么使用SVG给 favicon 添加标识?下面本篇文章给大家介绍一下使用 SVG 生成带标识的 favicon的方法,希望对大家有所帮助!

vue3+vite2中怎么使用svg方法vue3+vite2中怎么使用svg方法May 11, 2023 pm 05:55 PM

一、安装vite-plugin-svg-icons此处还需要安装下fast-glob相关依赖,不然vite运行npmrundev时会报Cannotfindmodule&#39;fast-glob&rsquo;的错误npmifast-glob@3.x-Dnpmivite-plugin-svg-icons@2.x-D二、在src/components/svgIcon下新建组件index.vueimport{computed}from&#39;vue&#39;;cons

vue3+vue-cli4中怎么使用svgvue3+vue-cli4中怎么使用svgMay 11, 2023 pm 05:58 PM

一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup

在HTML5画布上绘制SVG文件在HTML5画布上绘制SVG文件Sep 15, 2023 pm 03:09 PM

要在画布元素上绘制HTMLImageElements,请使用drawImage()方法。此方法使用src=”mySVG.svg”定义一个Image变量,并在加载时使用drawImage。varmyImg=newImage();myImg.onload=function(){&nbsp;&nbsp;ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター