V tomto článku se podíváme na kód HTML stránky, která postupně vypisuje text písmenko po písmenku. Tento efekt se často používá ve webovém designu pro animaci textu.
Stránka je napsaná v HTML5 a používá JavaScript a knihovnu jQuery pro dynamické chování.
Struktura HTML
Základní struktura HTML obsahuje hlavičku (<head>), kde je definován titulek stránky a odkaz na knihovnu jQuery, a tělo (<body>), které obsahuje obsah stránky. V hlavičce je také definován styl pomocí CSS pro element #text-container, kde se zobrazuje text.
V těle stránky je <div> element s ID text-container, který je na začátku prázdný, ale bude postupně naplněn textem. Dále je zde vstupní pole (<input>), kde může uživatel zadat rychlost výpisu textu, a tlačítko „Start“, které spustí výpis.
JavaScript a jQuery
JavaScriptový kód je umístěn na konci těla dokumentu a spouští se, jakmile je dokument načten. Kód definuje text, který se má vypisovat, a proměnnou index pro sledování aktuální pozice v textu.
Když je tlačítko „Start“ kliknuto, JavaScript zjistí, jakou rychlost výpisu uživatel zadal do vstupního pole. Pak vytvoří interval, který v pravidelných intervalech spustí funkci pro výpis textu.
Funkce pro výpis textu přidá do #text-container další písmenko z textu a zvýší index o jedna. Když je celý text vypsaný, interval se zruší.
Pokud je tlačítko „Start“ kliknuto znovu během výpisu, JavaScript zruší stávající interval, resetuje index na nulu a vymaže text z #text-container.
Závěrem
Tento kód ukazuje, jak můžete vytvořit jednoduchý efekt postupného výpisu textu pomocí HTML, CSS, JavaScriptu a jQuery. Můžete ho použít jako výchozí bod pro vlastní projekty a přizpůsobit ho podle svých potřeb.
<!DOCTYPE html> <!-- Deklarace HTML5 dokumentu -->
<html> <!-- Otevření HTML tagu pro HTML dokument -->
<head> <!-- Sekce hlavičky dokumentu, obsahuje meta informace a externí odkazy na CSS a JS soubory -->
<title>Postupný výpis textu</title> <!-- Název webové stránky zobrazený v záložce prohlížeče -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Externí odkaz na jQuery knihovnu -->
<style> <!-- Otevření CSS stylu -->
#text-container { <!-- Styly pro element s ID "text-container" -->
font-size: 2em; <!-- Velikost písma -->
color: black; <!-- Barva písma -->
margin: 0.5em; <!-- Okraje kolem elementu -->
}
</style> <!-- Ukončení CSS stylu -->
</head> <!-- Ukončení hlavičky dokumentu -->
<body> <!-- Otevření těla dokumentu, obsahuje obsah, který se zobrazí v prohlížeči -->
<div id="text-container"></div> <!-- Prázdný div element s ID "text-container", do kterého se vypíše text -->
<div> <!-- Otevření nového div elementu -->
Rychlost výpisu (ms): <!-- Text vedle vstupního pole -->
<input id="speed-input" type="number" min="0" value="100"> <!-- Vstupní pole pro rychlost výpisu, s minimální hodnotou 0 a výchozí hodnotou 100 -->
</div> <!-- Ukončení div elementu -->
<button id="start-btn">Start</button> <!-- Tlačítko "Start", které spustí výpis textu -->
<script> <!-- Otevření JavaScriptu -->
$(document).ready(function() { <!-- Funkce jQuery, která se spustí, když je dokument připraven -->
const text = 'Toto je text, který se má vypisovat postupně písmenko po písmenku.'; <!-- Konstanta pro text, který se má vypisovat -->
let index = 0; <!-- Index pro sledování aktuální pozice v textu -->
let interval = null; <!-- Interval pro opakované spouštění funkce pro výpis textu -->
$('#start-btn').click(function() { <!-- Funkce jQuery, která se spustí, když je tlačítko "Start" kliknuto -->
if (interval) { <!-- Pokud existuje interval -->
clearInterval(interval); <!-- Zruší interval -->
index = 0; <!-- Resetuje index na 0 -->
$('#text-container').text(''); <!-- Vymaže text v elementu "text-container" -->
}
const speed = $('#speed-input').val(); <!-- Získá hodnotu z vstupního pole pro rychlost -->
interval = setInterval(function() { <!-- Nastaví interval, který se spouští s danou rychlostí -->
if (index < text.length) { <!-- Pokud je index menší než délka textu -->
$('#text-container').append(text[index]); <!-- Přidá další písmenko do "text-container" -->
index++; <!-- Zvýší index o 1 -->
} else { <!-- Pokud je index roven nebo větší než délka textu -->
clearInterval(interval); <!-- Zruší interval -->
}
}, speed); <!-- Interval je nastaven na rychlost vstupního pole -->
});
});
</script> <!-- Ukončení JavaScriptu -->
</body> <!-- Ukončení těla dokumentu -->
</html> <!-- Ukončení HTML dokumentu -->
