Farbeffekt für Überschriften

Question

Ich möchte eine Funktion erstellen, die eine Überschrift verwendet und ihre Wortlänge berechnet, um sie in drei separate Bereiche aufzuteilen.

Jede der Spannen würde einen einzigartigen Stil erhalten.

Beispiel:

<span style="color:red">Hea</span> 
<span style="color:blue">dli</span> 
<span style="color:green">ne</span> 

jede Hilfe diesen Effekt zu erzielen, anstatt es zu tun wäre manuell wunderbar.

Answer 1

Ich würde die substr Funktion kombiniert mit .html() verwenden.

headline = "Terminator"; 
 
sub = Math.floor(headline.length/3); 
 
first = headline.substr(0,sub); 
 
second = headline.substr(sub,sub); 
 
third = headline.substr(sub*2); 
 

 
$("<span style='color:red'>").html(first).appendTo("body"); 
 
$("<span style='color:blue'>").html(second).appendTo("body"); 
 
$("<span style='color:green'>").html(third).appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>