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;