Applying CSS effects onto individual letters

Applying-CSS-effects-onto-individual-letters.markdown

Applying CSS effects onto individual letters

This is how to apply CSS styling onto individual letters inside a HTML element using jQuery. Made by Luke for a friend, you're welcome.

A Pen by Luke Brown on CodePen.

License.

index.html

<h1>How do I apply an effect on individual letters?</h1>
<div>
  <p>This</p>
  <p>Is</p>
  <p>How</p>
  <p>You</p>
  <p>Do</p>
  <p>It</p>
  <p>Ka-Boom</p>
</div>

script.js

var myColors = ["#C23519", "#EC583A", "#FF7148", "#B22E13"];

$('div').find('p').each(function(){
       
  var $el = $(this),
    text = $el.text(),
    len = text.length,
    coLen = myColors.length,
    newCont = '';
  
  for(var i=0; i<len; i++){
    newCont += '<span style="background:'+ myColors[i%coLen] +'">'+ text.charAt(i) +'</span>';
  }
  
  $el.html(newCont);
       
});

style.css

html {
  background-color: #222;
}
div {
  margin: auto;
  display: table;
}
p, h1 {
  font-size: 40px;
  color: white;
  text-align: center;
  font-family: 'Raleway', sans-serif;
}
span {
  padding: 15px;
  text-transform: uppercase;
}