Chcete zvýraznit konkrétní část vaší stránky? Dnes vám ukážeme, jak vytvořit animované překryvné okraje pro zvýraznění obsah vaší stránky. Tyto animované okraje vytvoříme pomocí šablony App Developer Layout Pack, dostupné z divi Stavitel. Tuto techniku však můžete použít pro jakýkoli typ Webové stránky které vytvoříte. Určitě vám to pomůže přidat vaší stránce další rozměr. Doufáme, že vás tento tutoriál inspiruje k vytvoření vlastních animovaných překryvných okrajů.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek těchto tří příkladů. Podobný výsledek můžete očekávat také na menších obrazovkách.
Vytvořte novou stránku pomocí vstupní stránky App Developer Layout Pack
První věcí, kterou musíte udělat, je vytvořit novou stránku a použít balíček App Developer Layout Pack.
Klon Hero sekce
Náš příklad bude vytvořen v sekci hrdina. Připomínáme, že zde vytvoříme:
Přidejte nový řádek do hrdinové sekce
Struktura sloupců
Začněme znovu s prvním příkladem! Přidejte nový řádek do specializované sekce pomocí následující struktury sloupců:
Přidat textový modul
Nechte obsah prázdný
Přidejte na řádek nový textový modul a ujistěte se, že jste opustili textové pole obsah prázdný. Modul využíváme pro jeho vestavěné možnosti návrhu, nikoli pro zobrazování obsahu. obsah psaní.
vzdálenost
Přejít na nastavení mezer textového modulu a tvarovat jej přidáním vlastních vnitřních a spodních okrajů. Vytvořte překrytí mezi tímto modulem a předchozími moduly také přidáním záporného horního okraje.
- Horní okraj: -480px
- Nejlepší polstrování: 223px
- Spodní výplň: 223px
hraniční
Poté přejděte k nastavení okrajů modulu a přidejte okraj podle vašeho výběru.
- Šířka hranice: 9px
- Barva okraje: #0ae2ff
- Styl okraje: Výchozí
Stínová krabička
Přidejte také stín pole.
- Box Force Blur Force: 1px
- Tloušťka stínu krabice: 15px
- Barva stínu: rgba (10,226,255,0.59)
Animace
A pohrajte se s nastavením animace, abyste dostali obsah. Měli byste si však uvědomit, že můžete použít možnost, která se vám líbí nejvíce.
- Styl Animace: Flip
- Opakování animace: Jednou
- Animace Směr: Vpravo
- Délka animace: 1500 XNUMX ms
- Zpoždění animace: 1500 XNUMX ms
- Animace intenzity: 500%
přehled
Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na výsledek tří příkladů, které jsme znovu vytvořili v tomto tutoriálu.
Závěrečné myšlenky
V tomto tutoriálu jsme vám ukázali, jak zvýraznit obsah pomocí animovaných překryvných okrajů. Je to skvělá technika, jak upozornit na konkrétní část stránky a udělat to stylovým způsobem. Tuto techniku můžete použít pro jakýkoli typ Webové stránky které stavíte. Máte-li jakékoli dotazy nebo návrhy, nezapomeňte je zanechat komentář v sekci komentářů níže!
