Animace nadpisu s kurzorem

Pokud si chcete vložit tento kód do Vašeho projektu, musíme si ještě upřesnit několik detailů.

Při kopírování a vložení do “custom CSS” je možné udělat ještě několik základních úprav.

Postupujte prosím takto:

Vytvořte Nadpis v Elementoru podle vlastních potřeb, určete důležitost nadpisu v HTML (H1, H2, H3…).
Nastavte si atributy zarovnání, barvu a styl fontů. Dodržte jednořádkový nadpis.
Zkopírujte kód, který je níže uveden. Doporučuji využít funkci, která se objeví při najetí myši v pravém horním roku na obrazovce “Copy”.
Přejděte na záložku “Pokročilé” a na úplném konci dole se nachází funkce pro úpravů zkácených kódů – “custom CSS”.
Vložte kód a upravte následující hodnoty textu podle svých představ:
- –myText: Zde přepište do úvozovek text, který jste si napsali jako Nadpis (tedy v tomto případě “Zde běží kurzor a mění barvu”)
- –textColor: zde si můžete upravit barvu okraje a kurzoru – v závislosti na nadcházejícím bodu (v mé animaci není vidět)
- –textStroke: síla obrysu v pixelech (pokud změníte hodnotu například na “2px”, uvidíte ihned změnu, je to úmyslně skryto, protože ne každý tuto funkci chce využít).
Daší úpravu můžete udělat ve výšce kurzoru, pokud jste si nastavili hodnotu pixelů na řádku “textStroke” na 1, nebo vyšší, tak je kurzor viditelný. Pokud v celém textu použijete jen verzály, nedostane se Vám žádné písmeno “pod řádek”. Ovšem v případě, kdy například použijete kombinaci VELKÝCH a malých písmen, je nutné nastavit výšku na 115%, nebo 120px. Pokud tedy použijete jen velká písmena a číslice, upravte si v řádku 25 hodnotu “height:” na 100%

Pro větší přehled jse Vám napsal i poznámky k ovládání přímo do kódu. Poznámky si následně vymažte.

Další úpravy a nastavení již nechám na Vaší fantazii.

Zde běží kurzor a mění barvu

				
					:root{
    --myText : 'Zde běží kurzor a mění barvu';
    --textColor: #ffffff; /* barva textu */
    --textStroke: 1px; /* síla obrysu písma 1px */
    --anDuration: 10s; /* délka trvání animace 10 vteřin */
}

selector{

    -webkit-text-stroke: var(--textStroke) var(--textColor);
    display: table;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    text-align: center;
    margin: 0 auto
}

selector .elementor-heading-title::before{
    content: var(--myText);
    color: var(--textColor);
    position: absolute;
    top: 0; /* uchacení kurzoru nahoře, tedy výška se odvíjí z vrchu */
    width: 1px; /* šířka kurzoru */
    height: 115%; /* výška kurzoru nastavena na 115% z důvodu většík písmen zasahujícím pod řádek, jako např. "y" */
    text-align: left; 
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--textStroke) solid var(--textColor);
    -webkit-animation:animateX var(--anDuration) linear infinite;
            animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}
@keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}

TIP! – Kód pouze zkopírujte (nejlépe použitím aktivního odkazu vpravo nahoře s označením “Copy”) a vložte do objektu, na který jej chcete použít.

V Elementoru zvolte element “Nadpis”.

Napistě si text a upravte atributy podle vašich představ.

Kód vložte v záložce nastavení označené “Pokročilé” do poslední funkce v seznamu s označením “Custom CSS”, nebo “Upravit CSS”.