Super cool creative segmented SVG text animation special effects
Brief Tutorial
This is a very creative segmented SVG text animation special effect based on segment.js. This text animation special effect uses the stroke path of animated SVG to create various text animation effects, and the effect is very impressive.
The last few examples in the first DEMO of this SVG text animation special effect use the mo.js plug-in, a JavaScript library plug-in written by Oleg Solomka for making web graphic animations. Through mo.js, you can create more shocking text animation effects.
The font used in the special effects is exquisite lowercase font, a set of very creative WEB fonts.
How to use
To use this SVG text animation effect, you need to introduce segment.js into the page, which is used to animate SVG paths, and d3-ease, which is used to create easing animation transition effects. and letters.js.
<script src="js/segment.js"></script> <script src="js/d3-ease.v0.6.js"></script> <script src="js/letters.js"></script>
HTML structure
You can use a
<div class="my-text">my text</div>
Initialization plug-in
Then we can get this element in JavaScript and configure the parameters to animate the text. All parameter options (except individualDelays) can be set to the following values:
Single value: can be accepted by all letters.
Array: The first element in the array will be received by the first letter, the second element will be received by the second letter, and so on.
The following is an example of using configuration parameters:
// 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);
Through the above configuration, we have defined text display and animation options, and the plug-in will be generated in the container SVG text. By default, text is hidden. How to trigger text animation, please refer to the method below.
// 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);
Each SVG letter is assigned a letter class, such as: letter-(a, b, c, ...), and letter-(1, 2, 3, ...). Through these classes we can customize the style of letters, such as setting margin values or positioning methods, etc.
/* Setting margin among all letters */ .letter { margin: 0 10px; } /* Setting background to letter m */ .letter-m { background-color: lightsalmon; }
The above is the content of the cool creative segmented SVG text animation special effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!

svg can be converted to jpg format by using image processing software, using online conversion tools, and using the Python image processing library. Detailed introduction: 1. Image processing software includes Adobe Illustrator, Inkscape and GIMP; 2. Online conversion tools include CloudConvert, Zamzar, Online Convert, etc.; 3. Python image processing library, etc.

svg images are widely used in projects. The following article will introduce how to use svg icons in vue3 + vite. I hope it will be helpful to everyone!

With the continuous development of modern Web front-end development, more and more technologies are widely used in actual development. Among them, Vue.js is currently one of the most popular JavaScript frameworks. It is based on the MVVM model and provides a rich API and component library, making it easier to develop responsive, reusable, and efficient web applications. The latest version of Vue.js3 has better performance and richer features than the old version, which has attracted widespread attention and research. This article will introduce to you a

How to add logo to favicon using SVG? The following article will introduce to you how to use SVG to generate favicon with logo. I hope it will be helpful to you!

To draw HTMLImageElements on a canvas element, use the drawImage() method. This method defines an Image variable using src="mySVG.svg" and uses drawImage when loading. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";

1. Install svg-sprite-loadernpminstallsvg-sprite-loader--save-dev 2. Create a new component under src/components/svgIcon index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props:{iconClass:{type:String},className:{type:String},},setup

The full name of SVG in English is Scalable Vector Graphics, which means scalable vector graphics and is an image file format. SVG is also a language defined in XML and can be used to describe two-dimensional vectors and vector or raster graphics.
