JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class='test'>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
<br/>
<div class='test'>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</div>

JavaScript

function maxSymbols ($elem, num, fadeLength) {
    var text = $elem.text(),
        temp = text.split(''),
        step,
        fade,
        result;
    
    if (!fadeLength) {
        fadeLength = 10;
    }
    
    fade = temp.slice(num - fadeLength, num);
    temp.length = num - fadeLength;
    
    result = temp.join('');
    
    for (var i = 0; i < fadeLength; i++) {
        step = +(1 - (1 / fadeLength * i)).toFixed(2);
        result += '<span style="opacity: ' + step + '">' + fade[i] + '</span>';
    }
    
    $elem.html(result);
}

$('.test').each(function () {
    maxSymbols($(this), 200, 20);
});