Example of a Half Style with JavaScript/jQuery

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
      }
      .half-style > span {
        white-space: pre-line;
        position: relative;
        color: #1c87c9;
      }
      .half-style > span::before {
        content: attr(data-content);
        pointer-events: none;
        position: absolute;
        overflow: hidden;
        color: #113155;
        width: 50%;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class='half-style'>W3docs</div>
    <script>
      function wrapString(str) {
        var output = [];
        str.split('')
          .forEach(function(letter) {
            var wrapper = document.createElement('span');
            wrapper.dataset.content = wrapper.innerHTML = letter;
            output.push(wrapper.outerHTML);
          });
        return output.join('');
      }
      window.onload = function() {
        var el = document.querySelector('.half-style')
          , txt = el.innerHTML;
        el.innerHTML = wrapString(txt);
      }
    </script>
  </body>
</html>