Naučte se přidávat a používat různé typy efekty posouvání, například prolínání, klouzající nabídku, rolování a další.
V této části se podíváme na několik z mnoha způsobů, kterými lze pomocí efektů posouvání přidávat interaktivní funkce, jedinečnou navigaci, nebo výraznou pohyblivou grafiku na weby Muse.
Chcete-li začít, postupujte následovně:
Tento efekt způsobí, že během posouvání stránky dolů vlétne na stránku skupina jednotlivých prvků a sestaví se do určeného vzoru. Grafické a textové rámečky se ovládají pomocí efektů posouvání, které vytváří interaktivní kompilace, například spojování kousků skládačky dohromady. Je to zajímavý způsob, jak na webové stránce předvést podrobnosti o produktu.
V pracovním postupu pro tento příklad se používá část Pohyb na začátku na kartě Pohyb na panelu Efekty posouvání, aby se prvky spojily do ucelené formy. Jakmile se jednotlivé části přesunou na své místo, je Pohyb na konci nastaven na 0, aby se stávající prvky nehýbaly, zatímco přilétají nové.
Chcete-li vytvořit podobný efekt kousek po kousku, postupujte následovně:
A nakonec se v dolní části objeví dva zbývající prvky: plný obdélník, který je vyplněn stejnou barvou jako stránka (tím se v návrhu vykresluje neviditelně) a skupina objektů (žlutý obdélník s grafikou žárovky) za ním.
Obdélník s plnou barvou má za úkol skrýt skupinu, která je uspořádána za ním.
Když jsou vybrány oba prvky, všimněte si, že jsou u všech vybraných položek zobrazených v poli stejné hodnoty. V tomto příkladu jsou obdélník a skupina nastaveny na 0 pro svislý pohyb v části Pohyb na začátku a 0,0 v části Finální pohyb. Ve vodorovném poli části Pohyb na začátku se nezobrazuje žádná hodnota, protože je u skupiny nastaveno, aby se pohybovala stejnou rychlostí jako je rychlost posouvání, a obdélník je nastaven na 0.
Jak vidíte v tomto jednoduchém příkladu, lze pomocí kombinace velmi vysoké stránky, skupiny prvků, které jsou strategicky uspořádány na panelu Vrstvy, a karty Pohyb na panelu Efekty posouvání vytvořit během posouvání stránky iluzi spojování prvků v animaci.
Efekt klouzající nabídky využívá mnoho stejných metod, které jsou popsány v efektu kousek po kousku. Prvky přilétají pomocí karty Pohyb na panelu Efekty posouvání a obdélníky některé prvky skrývají do doby, než jsou připraveny se objevit v návrhu stránky.
V tomto příkladu jsou použity strategicky umístěné skupiny obdélníků, které vytváří zdání komplexního zakřiveného designu.
Podívejte se na ukázkový web v prohlížeči a sledujte, jak letadlo letí vodorovně přes stránku zleva doprava a za ním následují stylizované možnosti nabídky a pozadí s přechodem a diagonálními pruhy.
Chcete-li vytvořit podobný posuvný efekt, postupujte následovně:
Pomocí skupin lze zkombinovat soubor prvků a ovládat jej jako jednu položku. V tomto příkladu je u skupin různých obdélníků použit efekt posuvného pohybu, aby se skupina pohybovala jako jeden objekt.
Tento příklad také ilustruje kreativní použití negativního prostoru. Pokud je ve výplni prohlížeče použita plná barva pozadí, můžete vytvářet mnoho zajímavých efektů výřezu vrstvením obdélníků vyplněných stejnou barvou nad ostatní obdélníky. Místo navrhování grafiky v programu pro úpravu obrázků a umístění jednoho obrázku, můžete grafiku vytvořit pomocí obdélníků na pracovní ploše aplikace Muse.
V tomto příkladu je animovaného východu a západu slunce dosaženo pomocí kombinace dvou efektů posouvání: pohyb a krytí. V tomto příkladu je zobrazeno pozadí stránky vyplněné přechodem s jedním umístěným obrázkem PNG slunce. Obrázek PNG obsahuje průhledné části, které umožňují prosvítání barvy vyplňující pozadí stránky.
Zkontrolujte tento ukázkový web v prohlížeči a podívejte se, jak se slunce během pohybu na stránce rozsvítí ze 100% průhlednosti. Na vrcholu je zcela neprůhledné, ale s tím, jak se dále posunuje na stránce dolů, začne zapadat a postupně je stále více průhlednější, až nakonec zcela zmizí.
Chcete-li vytvořit podobný efekt zeslabení, postupujte následovně:
Tato nastavení způsobí, že se slunce pohybuje po půlkruhové dráze v oblouku z levé dolní části stránky do středu (kde dosáhne pozice řídicího prvku) a poté zpět dolů do pravé dolní části stránky.
Tento příklad ilustruje, jak lze pomocí efektů posouvání ovládat soubory OAM exportované z nástroje Adobe Edge Animate. V tomto příkladu je stránka vyplněna vertikálním přechodem, který začíná světlou tyrkysovou barvou a přechází do tmavě modré.
Tento animovaný efekt vytváří kombinace nastavení použitých na kartách Pohyb a Edge Animate.
Tři stejné soubory OAM jsou umístěny vodorovně vedle sebe, a tvoří tak řadu animovaných kompasů. Když si zobrazíte tento ukázkový web v prohlížeči, všechny tři kompasy se přesunou až do zorného pole a poté zůstanou na místě. Všechny tři kompasy se otáčejí jinou rychlostí, tohoto otáčení jinou rychlostí však bylo dosaženo nastavením na panelu Efekty posouvání, a nikoliv vytvořením souboru Edge Animation.
Chcete-li vytvořit podobný efekt pomocí tří souborů OAM, postupujte následovně:
Pokud si ukázkový web zobrazíte v prohlížeči, zjistíte, že všechny tři prvky OAM vyskočí najednou a poté zůstanou v řadě, jakoby byly přichyceny.
Dva postranní kompasy jsou nastaveny tak, aby se během animace na časové ose otáčely a přecházely na další rámec vždy, když se stránka posune o 350 pixelů.
Změnou rychlosti různých umístěných animací Edge Animate vzhledem k rychlosti posouvání stránky můžete vytvářet zajímavé animované efekty. Přidáním několika opakování stejného souboru OAM s různě nastavenými efekty posouvání můžete například vytvořit hejno ryb, nebe zaplněné pohybujícími se mraky nebo další efekty.
Můžete kontrolovat způsob, jakým se soubor obrázku zobrazí ve widgetu Prezentace v souvislosti s tím, jak se posouvá stránka. To zahrnuje přidání widgetu Prezentace na stránku a poté aktualizaci možností prezentace na kartě Prezentace panelu Efektů posouvání.
V tomto případě je prezentace zaplněna řadou obrázků, které vytvářejí 360stupňový rotující pohled na batoh. Podobné obrázky prezentace lze vytvořit pomocí stativu a pořízením fotografií objektu, který je umístěn na otočném stojanu. Tento efekt je užitečný při zobrazování interaktivního popisu produktu a umožňuje potenciálním zákazníkům zobrazit objekt před zakoupením ze všech úhlů.
Chcete-li vytvořit podobný efekt pomocí widgetu Prezentace, postupujte následovně:
Zatímco je vybrána Prezentace, můžete vybrat widget Prezentace a pomocí rozhraní Přichytit na ovládacím panelu můžete Prezentaci přichytit na místě. Můžete také experimentovat tím, že přidáte widget Prezentace na celou obrazovku a budete jej kontrolovat pomocí efektů posouvání.
Pomocí efektů posouvání lze vytvořit velmi dlouhou stránku rozdělenou do částí se zásadně odlišným vzhledem. S tím, jak návštěvník posouvá stránku dolů, přechází mezi částmi stránek, které vyvolávají dojem rolování, s animovanými textovými efekty a oddělenými okraji vytvořenými pomocí stínových efektů.
Pomocí značky kotvy nebo pouhým přidáním poznámky můžete povzbudit návštěvníky, aby posunuli stránku dolů a zobrazili tak jednotlivé části. Když jste ve spodní části ukázkového webu a kliknete na tlačítko Na začátek stránky, proletí celá stránka nahoru s tím, jak se bude odkaz na kotvu vracet do horní části stránky.
Chcete-li vytvořit podobný efekt rolování, postupujte následovně:
V tomto příkladu obsahuje duplikovaný textový rámeček text: Use it to drastically alter the appearance of your website (Pomocí této funkce lze výrazně změnit vzhled vašich webových stránek). Tmavě modrou část stránky však můžete identifikovat jakýmkoliv textem podle svého přání.
Kombinací efektů posuvného pohybu a webových písem Adobe Edge lze vytvořit neobvyklé typografické návrhy. Webová písma umožňují text stylizovat pomocí celé řady písem, která se načítají při načítání stránky. Místo, abyste umisťovali a animovali obrázky textu vytvořeného v programu pro úpravu obrázků, můžete vytvářet stránky, které vypadají skvěle a snadno se aktualizují pomocí webových písem Edge. Efekty posouvání vytvářejí během posouvání stránky dolů dramatický dojem animace.
Chcete-li vytvořit podobný efekt s dynamickým textem, postupujte následovně:
Jako volitelný krok navíc můžete některé textové rámečky duplikovat a poté uplatnit mírně odlišný styl. V tomto příkladu je textový rámeček se slovem Vytvoří duplikován a dvě verze jsou poté navrstveny na sobě, což vytváří efekt vrženého světle modrého stínu.
Pokud se rozhodnete textový rámeček duplikovat a vytvořit efekt vrženého stínu, můžete dvě nebo více verzí textového rámečku seskupit a při používání efektů posouvání je ovládat jako jednu skupinu.
Pomocí efektů posouvání můžete na webu vytvářet poutavou interaktivní navigaci tak, aby různá tlačítka vletěla do viditelné oblasti na stránce a pak se zarovnala a vytvořila panel nabídky. V tomto příkladu se čtyři tlačítka s efektem přechodu pohybují ze spodní části stránky během jejího posouvání, uzamknou se na místě a zobrazí tak svislý panel nabídky.
Jakmile se čtyři tlačítka zarovnají, obsah pozadí (ve formě grafiky žárovky, barevné oblasti pozadí, textového rámečku a šikmých rohových pruhů) vletí z obou částí stránky a vytvoří část webu.
Ačkoliv tlačítka v tomto příkladu nejsou propojena, můžete v případě potřeby přidat odkaz pomocí rozevírací nabídky Hypertextový odkaz, aby na ně návštěvníci mohli klikat a načít novou stránku nebo pomocí značek kotev přejít do jiné části aktuální stránky.
Chcete-li vytvořit podobný efekt vrstvení, postupujte následovně:
Když jste duplikovali první tlačítko Domů, zkopírovali jste také styl textového rámečku a jeho obsah, stejně jako nastavení efektů posouvání. Když vyberete jedno z duplikovaných tlačítek a podíváte se na panel Efekty posouvání, uvidíte, že nastavení na kartě Pohyb odpovídá nastavení použitému na tlačítku Domů a pozice řídicího prvku pro jednotlivá tlačítka je 460 pixelů pod předchozím tlačítkem (stejná vzdálenost, jako je prostor mezi jednotlivými tlačítky na stránce).
Základní část vrstvené nabídky je nyní dokončena. Můžete však přidat ještě jeden prvek návrhu. To zahrnuje přidání několika natočených obdélníků nad pravý spodní roh velkého obdélníku stejným způsobem, jakým se v příkladu klouzající nabídky použily natočené obdélníky k přidání efektu šikmého pruhu.
Chcete-li vytvořit efekt pohybu na pozadí, můžete vytvořit řadu velkých obdélníků vyplněných dlaždicovými obrazy pozadí, které budou pokrývat celou délku dlouhé stránky. V tomto příkladu je pro nastavení pohybu použita karta Posouvání v nabídce Výplň (a nikoliv karta Pohyb na panelu Efekty posouvání).
Chcete-li vytvořit podobný efekt pohybu na pozadí, postupujte následovně:
V tomto příkladě nezáleží na tom, zda nastavíte barvu výplně prohlížeče, jelikož je stránka pokryta obdélníky. Barvu výplně stránky nastavte na Žádná.
V tomto ukázkovém webu je třetí obdélník delší než první dva. Výšku třetího duplikovaného obdélníku můžete rozšířit přetažením úchytů, nebo vytvořte čtvrtý obdélník, který vyplní zbývající oblast ve spodní části stránky.
Tento příklad vyvolává dojem, že se sloupcový graf vykresluje na místo. Grafika růžové šipky se protahuje nahoru a proplétá se nad a za sloupci v grafu. Ačkoliv se zdá, že sloupce grafu rostou z jeho spodní části, jedná se ve skutečnosti o zbarvené obdélníky s použitými efekty posouvání, které se zobrazují zpoza větších bílých obdélníků (vyplněným stejnou plnou bílou barvou, jako je barva pozadí stránky).
V tomto příkladu je ve spojení s efekty posouvání použito několik technik. Prvky jsou navzájem uspořádány před sebou a za sebou pomocí panelu Vrstvy. V horní části prvků grafu jsou nakresleny bílé obdélníky. Když bílé obdélníky pokrývají sloupcový graf, jsou sloupce a šipka skryty – jako by byly zamaskovány. Bílé obdélníky a tabulka grafu mají v efektech posuvného pohybu nastavenou 0, aby při posouvání stránky zůstaly na místě. Sloupce a grafika růžové šipky jsou navrstveny pod efekty posuvného pohybu, což způsobí, že se spolu se sestavením grafu posunou do zorného pole.
Chcete-li vytvořit podobný efekt masky, postupujte následovně:
Na webu společnosti Demential Lab naleznete praktické ukázky efektů posouvání.
Přihlaste se ke svému účtu.