Home Web Front-end H5 Tutorial Super cool creative segmented SVG text animation special effects

Super cool creative segmented SVG text animation special effects

Jan 19, 2017 pm 01:56 PM
svg text animation

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.

Super cool creative segmented SVG text animation special 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>
Copy after login

HTML structure

You can use a

container to wrap the text that needs to be animated.

<div class="my-text">my text</div>
Copy after login

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(&#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);
Copy after login

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);
Copy after login

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;
}
Copy after login

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)!


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Let's talk about how to use SVG to achieve image mosaic effect Let's talk about how to use SVG to achieve image mosaic effect Sep 01, 2022 am 11:05 AM

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!

How to convert svg to jpg format How to convert svg to jpg format Nov 24, 2023 am 09:50 AM

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.

An in-depth analysis of how to use svg icons in vue3+vite An in-depth analysis of how to use svg icons in vue3+vite Apr 28, 2022 am 10:48 AM

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!

VUE3 introductory tutorial: Use Vue.js plug-in to play with SVG VUE3 introductory tutorial: Use Vue.js plug-in to play with SVG Jun 16, 2023 am 09:48 AM

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

Detailed explanation of using SVG to add logo to favicon Detailed explanation of using SVG to add logo to favicon Sep 07, 2022 am 10:30 AM

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!

Draw SVG files on HTML5 canvas Draw SVG files on HTML5 canvas Sep 15, 2023 pm 03:09 PM

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

How to use svg in vue3+vue-cli4 How to use svg in vue3+vue-cli4 May 11, 2023 pm 05:58 PM

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

What format is svg? What format is svg? Dec 29, 2020 pm 03:59 PM

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.

See all articles