Effets spéciaux d'animation de texte SVG segmenté créatif super cool

Bref tutoriel

Il s'agit d'un effet spécial d'animation de texte SVG segmenté très créatif basé sur segment.js. Cet effet spécial d'animation de texte utilise le tracé du SVG animé pour créer divers effets d'animation de texte, et l'effet est très impressionnant.

Les derniers exemples de la première DEMO de cet effet spécial d'animation de texte SVG utilisent le plug-in mo.js, un plug-in de bibliothèque JavaScript écrit par Oleg Solomka pour créer des animations graphiques Web. Grâce à mo.js, vous pouvez créer des effets d'animation de texte plus choquants.

La police utilisée dans les effets spéciaux est une police minuscule exquise, un ensemble de polices WEB très créatives.

Comment utiliser

Pour utiliser cet effet d'animation de texte SVG, vous devez introduire segment.js dans la page, qui est utilisé pour animer les chemins SVG, et d3-ease, qui est utilisé pour créer des effets de transition d'animation faciles et des lettres.js.

<script src="js/segment.js"></script>
<script src="js/d3-ease.v0.6.js"></script>                  
<script src="js/letters.js"></script>

Structure HTML

Vous pouvez utiliser un conteneur

pour envelopper le texte qui doit être animé.

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

Grâce à 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, ... ). Grâce à 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 (www.php.cn) !