<div class="my-text">my text</div>

Initialiser le plug-in

Ensuite, nous pouvons récupérer cet élément en JavaScript et créer une animation de texte en configurant les paramètres. Toutes les options de paramètres (sauf individualDelays) peuvent être définies sur les valeurs suivantes?:

• Une seule valeur?: acceptée par toutes les lettres.

• Tableau?: Le premier élément du tableau sera re?u par la première lettre, le deuxième élément sera re?u par la deuxième lettre, et ainsi de suite.

Ce qui suit est un exemple d'utilisation des paramètres de configuration?:

// 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);

Grace à la configuration ci-dessus, nous avons défini les options d'affichage et d'animation du texte, ainsi que le plug-in sera dans le conteneur Générer du texte SVG dans . Par défaut, le texte est masqué. Comment déclencher une animation de texte, veuillez vous référer à la méthode ci-dessous.

// 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);

Chaque lettre SVG se voit attribuer une classe de lettre, par exemple?: lettre-(a, b, c, ...) et lettre-(1, 2, 3, ... ). Grace à ces cours, nous pouvons personnaliser le style des lettres, comme la définition de valeurs de marge ou de méthodes de positionnement, etc.

/* Setting margin among all letters */
.letter {
  margin: 0 10px;
}
 
/* Setting background to letter m */
.letter-m {
  background-color: lightsalmon;
}

Ce qui précède est le contenu des effets spéciaux d'animation de texte SVG segmenté et créatifs. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.miracleart.cn)?!