Super coole, kreative, segmentierte SVG-Textanimations-Spezialeffekte-H5-Tutorial-php.cn

Super coole, kreative, segmentierte SVG-Textanimations-Spezialeffekte

黄舟

Freigeben： 2017-01-19 13:56:50

Original

1675 Leute haben es durchsucht

Kurzes Tutorial

Dies ist ein sehr kreativer segmentierter SVG-Textanimations-Spezialeffekt basierend auf segment.js. Dieser Spezialeffekt für Textanimationen nutzt den Strichpfad von animiertem SVG, um verschiedene Textanimationseffekte zu erstellen, und der Effekt ist sehr beeindruckend.

Die letzten Beispiele in der ersten DEMO dieses SVG-Textanimations-Spezialeffekts verwenden das mo.js-Plug-in, ein von Oleg Solomka geschriebenes JavaScript-Bibliotheks-Plug-in zum Erstellen von Webgrafikanimationen. Mit mo.js können Sie noch schockierendere Textanimationseffekte erstellen.

Super coole, kreative, segmentierte SVG-Textanimations-Spezialeffekte

Die in den Spezialeffekten verwendete Schriftart ist eine exquisite Kleinschrift, eine Reihe sehr kreativer WEB-Schriftarten.

So verwenden Sie

Um diesen SVG-Textanimationseffekt zu verwenden, müssen Sie segment.js in die Seite einführen, das zum Animieren von SVG-Pfaden verwendet wird, und d3-ease, das verwendet wird um erleichternde Animationsübergangseffekte und Buchstaben zu erstellen.

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

Nach dem Login kopieren

HTML-Struktur

Sie können einen

-Container verwenden, um den zu animierenden Text einzuschließen.

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

Nach dem Login kopieren

Initialisieren Sie das Plug-in

Dann können wir dieses Element in JavaScript abrufen und durch Konfigurieren von Parametern eine Textanimation erstellen. Alle Parameteroptionen (außer individualDelays) können auf die folgenden Werte gesetzt werden:

Ein einzelner Wert: von allen Buchstaben akzeptiert.
Array: Das erste Element im Array wird vom ersten Buchstaben empfangen, das zweite Element wird vom zweiten Buchstaben empfangen und so weiter.

Das Folgende ist ein Beispiel für die Verwendung von Konfigurationsparametern:

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

Nach dem Login kopieren

Durch die obige Konfiguration haben wir Textanzeige- und Animationsoptionen sowie das Plug-in definiert wird im Container sein. Generieren Sie SVG-Text in . Standardmäßig ist Text ausgeblendet. Informationen zum Auslösen einer Textanimation finden Sie in der folgenden Methode.

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

Nach dem Login kopieren

Jedem SVG-Buchstaben ist eine Buchstabenklasse zugewiesen, zum Beispiel: Buchstabe-(a, b, c, ...) und Buchstabe-(1, 2, 3, ...). Durch diese Klassen können wir den Stil von Buchstaben anpassen, z. B. Randwerte oder Positionierungsmethoden festlegen usw.

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

Nach dem Login kopieren

Das Obige ist der Inhalt der coolen kreativen segmentierten SVG-Textanimations-Spezialeffekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!