Пример половины стилизации с помощью JavaScript/jQuery

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>