Přemýšleli jste někdy, jak můžete vytvořit čtverec, který okamžitě poskakuje ve vzduchu? V takové hře se čtverec bude pohybovat nahoru a dolů a vytvářet vizuální dojem, jako by skákal! Je to zábavný a kreativní způsob, jak učinit váš web interaktivnějším a přitažlivějším pro návštěvníky. V tomto článku vám poskytneme podrobný návod, jak vytvořit takový efekt pomocí programovacího jazyka JavaScript a stylů CSS.
Prvním krokem je vytvořit základ. Začněme vytvořením dokumentu HTML, ve kterém bude náš čtverec. Chcete-li to provést, vytvořte značku s identifikátorem čtverce, ve které budete moci změnit její velikost, barvu a další vlastnosti. Otevřete značku a určete styl pro čtverec, který chcete vidět na svých webových stránkách. Nastavte například barvu pozadí, šířku a výšku položky.
Dále budete potřebovat značku , ve kterém použijete programovací jazyk JavaScript k přidání animace pohybu čtverce. Vytvořte funkci, která bude měnit pozici čtverce nahoru a dolů určitou rychlostí. K tomu použijte vlastnost top v CSS pro změnu svislé polohy čtverce.
Jak vytvořit skákací čtverec
Krok 1: Vytvořte nádobu na čtverec
Nejprve vytvořte prvek HTML, který bude obsahovat čtverec. Můžete například použít prvek s jedinečným identifikátorem.
Krok 2: stylizujte kontejner
Přidejte styly do nádoby, aby měla určitou výšku, šířku a barvu pozadí. Například:
Příklad:
Krok 3: Přidejte čtverec do nádoby
Uvnitř nádoby přidejte prvek představující čtverec. Můžete například použít prvek nebo .
Příklad:
Krok 4: animujte pohyb čtverce
Pomocí CSS nebo JavaScriptu udělejte čtverec skokanem. Můžete například použít animace CSS pomocí klíčových snímků.
Příklad (CSS):
animace: skok 1C do nekonečna;
Nyní máte skákací čtverec! Styly a animace můžete upravit podle svého uvážení a vytvořit tak jedinečné efekty.
Krok 1: Nastavení prostředí
Krok 1: K vytvoření animovaného čtverce budete muset nainstalovat několik programů a balíčků.
Vyzkoušejte následující pokyny:
1. Nainstalujte textový editor: K vytvoření a úpravě HTML kódu budete potřebovat textový editor. Můžete použít některý z oblíbených editorů, jako je Sublime Text, Visual Studio Code nebo Atom.
2. Nainstalujte prohlížeč: Chcete-li zobrazit svůj animovaný čtverec, potřebujete prohlížeč. Doporučujeme používat nejnovější verzi prohlížeče Google Chrome nebo Mozilla Firefox.
3. Nainstalujte Node.js: Node.js je runtime JavaScript, které vám umožňuje spustit JavaScript kód v počítači. Můžete si stáhnout a nainstalovat Node.js z oficiálních stránek nodejs.org..
4. Nainstalujte balíček Gulp: Gulp je nástroj pro automatizaci úloh. Můžete jej nainstalovat spuštěním příkazu npm install gulp-cli-g.
5. Vytvořte nový adresář pro projekt: Vyberte umístění v počítači a vytvořte novou složku pro uložení všech souborů souvisejících s projektem.
6. Vytvořte soubor package.json: Ve vaší nové složce otevřete terminál nebo příkazový řádek a spusťte příkaz npm init. Tím se vytvoří soubor package.json, který bude obsahovat závislosti na vašem projektu.
7. Nainstalujte potřebné balíčky: Do terminálu nebo příkazového řádku zadejte příkaz npm install gulp browser-sync gulp-sass. Tím se nainstalují všechny potřebné balíčky pro práci s Gulp a Sass.
8. Vytvořte soubory HTML a CSS: Ve složce projektu vytvořte soubory index.html a styles.scss. V souboru index.html můžete napsat strukturu vašeho čtverce a v souboru styles.scss můžete ukládat styly.
Nyní jste připraveni přejít k dalšímu kroku a začít vytvářet animovaný čtverec.
Krok 2: vytvoření základu
Chcete-li začít, vytvořte nový soubor HTML pomocí libovolného textového editoru.
Na svůj čtverec budete potřebovat kontejner. Chcete-li to provést, použijte prvek div a nastavte mu jedinečný identifikátor, jako je "box". Bude to vypadat takto:
Nyní přidejte styly CSS pro váš kontejner. V souboru CSS nebo uvnitř značky nastavte následující vlastnosti:
width: 100px;
height: 100px;
background-color: blue;
position: relative;
Tyto styly udávají velikost a barvu čtverce a jeho pozici vzhledem k ostatním prvkům na stránce.
Gratuluji! Vytvořili jste základ pro svůj čtverec, který bude vyskakovat.
Krok 3: Začátek animace
Nyní, když máme náš čtverec a určili jsme jeho počáteční polohu a velikost, je čas začít s animací. K tomu použijeme vlastnost CSS transition, který nám umožňuje vytvářet plynulé přechody mezi stavy prvku.
Nejprve musíme nastavit CSS vlastnost transition pro náš čtverec. V našem případě chceme animovat změnu vlastnosti top, který určuje vzdálenost od horního okraje nádoby k hornímu okraji prvku. Chceme také animovat změnu vlastností left, který určuje vzdálenost od levého okraje nádoby k levému okraji prvku.
Můžeme nastavit hodnotu vlastnosti transition pomocí zkráceného záznamu uvedením vlastností, které chceme animovat, délky animace a plynulosti přechodu:
transition: top 1s ease, left 1s ease;
V tomto příkladu bude animace trvat 1 sekundu a bude mít plynulost přechodu ease, což znamená plynulou postupnou změnu hodnoty vlastnosti.
Nyní, když jsme nastavili přechodovou vlastnost, přistoupíme ke změně polohy našeho čtverce. K tomu použijeme JavaScript k přidání třídy do čtverce, která bude klást nové hodnoty vlastností top a left.
Krok 4: Přidání interaktivity
Aby náš čtverec mohl vyskočit kliknutím, budeme muset přidat interaktivitu pomocí JavaScriptu. Vytvoříme funkci jump (), která změní pozici čtverce pokaždé, když na ni kliknete.
Začněme definováním funkce a získáním přístupu k prvku čtverce prostřednictvím jeho ID. Přidejte událost kliknutí onclick a volání funkce jump () :
function jump() square.onclick = jump;Nyní v rámci funkce jump () můžeme změnit pozici čtverce. K tomu použijeme vlastnost style a nastavíme nové hodnoty pro top a left :
function jump()
Nyní pokaždé, když na čtverec kliknete, jeho pozice se náhodně změní v rámci 300px horizontálně a vertikálně.
To je všechno! Nyní je čtverec připraven vyskočit na jakékoli kliknutí. Uložte změny v souboru HTML a otevřete jej v prohlížeči, abyste viděli výsledek!