Rumah hujung hadapan web Tutorial H5 超酷创意分段式SVG文字动画特效

超酷创意分段式SVG文字动画特效

Jan 19, 2017 pm 01:56 PM
svg animasi teks

简要教程

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

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

417.GIF

特效中使用的字体是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>
Salin selepas log masuk

HTML结构

可以使用一个

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

<div class="my-text">my text</div>
Salin selepas log masuk

初始化插件

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

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

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

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

// Selecting the container element
var el = document.querySelector(&#39;.my-text&#39;);
 
// 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: &#39;#5F6062&#39;,  // 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);
Salin selepas log masuk

通过上面的配置,我们已经定义了文字显示和动画的选项,插件会在容器中生成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);
Salin selepas log masuk

每一个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;
}
Salin selepas log masuk

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


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mari kita bincangkan tentang cara menggunakan SVG untuk mencapai kesan mozek imej Mari kita bincangkan tentang cara menggunakan SVG untuk mencapai kesan mozek imej Sep 01, 2022 am 11:05 AM

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!

Bagaimana untuk menukar format svg kepada jpg Bagaimana untuk menukar format svg kepada jpg Nov 24, 2023 am 09:50 AM

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.;

Analisis mendalam tentang cara menggunakan ikon svg dalam vue3 vite Analisis mendalam tentang cara menggunakan ikon svg dalam vue3 vite Apr 28, 2022 am 10:48 AM

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

Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk bermain dengan SVG Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk bermain dengan SVG Jun 16, 2023 am 09:48 AM

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

Lukis fail SVG pada kanvas HTML5 Lukis fail SVG pada kanvas HTML5 Sep 15, 2023 pm 03:09 PM

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";

Bagaimana untuk menggunakan svg dalam vue3+vue-cli4 Bagaimana untuk menggunakan svg dalam vue3+vue-cli4 May 11, 2023 pm 05:58 PM

一、安装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

Penjelasan terperinci tentang penggunaan SVG untuk menambah logo pada favicon Penjelasan terperinci tentang penggunaan SVG untuk menambah logo pada favicon Sep 07, 2022 am 10:30 AM

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是什么格式 svg是什么格式 Dec 29, 2020 pm 03:59 PM

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

See all articles