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

container to wrap the text that needs to be animated.

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