JSFiddle - React, Tailwind, and code Playground

by kybernaut

HTML

<article id="post-5" class="post-5 page type-page status-publish hentry" style="overflow: hidden; width: auto; height: 400px;">
    <div class="col-6 column">
        
        <p><strong>Je mi přes 40 a jsem žena.</strong></p>
        <p><strong>Snažila jsem se zařadit, zmoudřet a mít klid. Nepodařilo se.</strong></p>
        <p style="text-align: justify;">Teď se už předělávat nehodlám. A víte co? Strašně si to užívám. Prozkoumávám svou zběsilost v srdci, ženskou marnivost i potřebu mít věci pod kontrolou. Zjistila jsem, že svět je báječné místo k žití, že život není vždycky fér, ale c´est la vie, že být sexy neznamená být krásná, že být úspěšná, neznamená být chytrá, že když se člověk nebere smrtelně vážně, tak je to vlastně skvělá jízda a že můj “bucketlist” je zatraceně dlouhý. Také, že když se nám “povedou” děti, věříme na geny, ale když jsou děti svérázné a my čelíme neustále zvednutému obočí okolí a máme pocit selhání – je lepší nechat to být a doufat, že se dobré geny nakonec “proberou”, protože to jediné, na čem opravdu záleží, jsou hodnoty a důvěra v sebe i svět okolo nás, neopomíjet tu krásu a čistotu, která dětství provází, tu lásku, kterou jsme schopni získat i dávat a užít si čas, který nám byl dán. Svět je plný silných příběhů a skvělých lidí a já jsem se rozhodla, že v čase, který mi byl vyměřen, je chci potkávat, chci se jimi inspirovat a tuto inspiraci předávat dál.</p>
        
    </div>
</article>

JavaScript

// store ms on which each <p> should start fading:
var delay = 0;
$('.post-5 div p').each(function(){
    // declare <strong> element as current 'header':
    var header = $(this).find('strong');
    // if it's not found:
    if(!header.length){
        // declare <p> instead as current 'header':
        header = $(this);
    }
    // convert the current 'header' text into chars array:
    var chars = header.text().split('');
    // replace content of the element with chars array (wrapped into <span>):
    header.contents().replaceWith('<span>'+chars.join('</span><span>')+'</span>');
    // find all <span> elements within current 'header', hide them:
    header.find('span').hide().each(function(i){
        // set animation delay and fadeIn:
        $(this).delay(delay+(i*30)).fadeIn(function(){
            // remove <span> of each character when animation is complete:
            $(this).contents().unwrap();
        });
    });
    // update delay for the next <p> element:
    delay += 30*chars.length;
});