超酷创意分段式SVG文字动画特效
简要教程
这是一款基于segment.js制作的非常有创意的分段式SVG文字动画特效。这个文字动画特效通过动画SVG的描边路径来制作各种文字的动画效果,效果非常的赞。
这个SVG文字动画特效的第一个DEMO中的最后几个例子使用了mo.js插件,一款由Oleg Solomka编写的用于制作网页图形动画的JavaScript库插件。通过mo.js,可以制作出效果更为震撼的文字动画效果。
特效中使用的字体是exquisite lowercase font,一套极富创意的WEB字体。
使用方法
要使用该SVG文字动画特效,要在页面中引入segment.js,它用于动画SVG路径,d3-ease,用于制作easing动画过渡效果,以及letters.js。
<script src="js/segment.js"></script> <script src="js/d3-ease.v0.6.js"></script> <script src="js/letters.js"></script>
HTML结构
可以使用一个
<div class="my-text">my text</div>
初始化插件
然后我们就可以在JavaScript中获取这个元素,通过配置参数来制作绘制文字的动画。所有的参数选项(除了individualDelays)都可以设置为以下的值:
单个值:可以被所有字母接收。
数组:数组中的第一个元素会被第一个字母接收,第二个元素被第二个字母接收,以此类推。
下面是一个使用配置参数的例子:
// 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文字。默认情况下,文字是被隐藏的,如何触发文字动画,可以参看下面的方法。
// 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值或定位方式等。
/* Setting margin among all letters */ .letter { margin: 0 10px; } /* Setting background to letter m */ .letter-m { background-color: lightsalmon; }
以上就是超酷创意分段式SVG文字动画特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk menggunakan SVG untuk mencapai kesan mozek imej tanpa menggunakan Javascript? Artikel berikut akan memberi anda pemahaman terperinci, saya harap ia akan membantu anda!

svg boleh ditukar kepada format jpg dengan menggunakan perisian pemprosesan imej, menggunakan alat penukaran dalam talian dan menggunakan perpustakaan pemprosesan imej Python. Pengenalan terperinci: 1. Perisian pemprosesan imej termasuk Adobe Illustrator, Inkscape dan GIMP 2. Alat penukaran dalam talian termasuk CloudConvert, Zamzar, Tukar Dalam Talian, dll. 3. Perpustakaan pemprosesan imej Python, dll.;

imej svg digunakan secara meluas dalam projek Artikel berikut akan memperkenalkan cara menggunakan ikon svg dalam vue3 vite.

Dengan pembangunan berterusan pembangunan hadapan Web moden, semakin banyak teknologi digunakan secara meluas dalam pembangunan sebenar. Antaranya, Vue.js kini merupakan salah satu rangka kerja JavaScript yang paling popular Ia berdasarkan model MVVM dan menyediakan API yang kaya dan perpustakaan komponen, menjadikannya lebih mudah untuk membangunkan aplikasi web yang responsif, boleh digunakan semula dan cekap. Berbanding dengan versi lama, versi Vue.js3 terkini mempunyai prestasi yang lebih baik dan ciri yang lebih kaya, yang telah menarik perhatian dan penyelidikan yang meluas. Artikel ini akan memperkenalkan kepada anda a

Untuk melukis HTMLImageElements pada elemen kanvas, gunakan kaedah drawImage(). Kaedah ini mentakrifkan pembolehubah Imej menggunakan src="mySVG.svg" dan menggunakan drawImage semasa memuatkan. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";

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

Bagaimana untuk menambah logo ke favicon menggunakan SVG? Artikel berikut akan memperkenalkan kepada anda cara menggunakan SVG untuk menjana favicon dengan logo. Saya harap ia akan membantu anda!

SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形,是一种图像文件格式;SVG还是一种用XML定义的语言,可以用来描述二维矢量及矢量或栅格图形。
