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ě:

1. Přejděte na stránku aktivní ukázkové webové stránky a kliknutím na jednotlivé části zobrazte příklady jednotlivých cílů. Posunutím ukázkové stránky dolů zjistíte, jak efekty posouvání řídí způsob zobrazení prvků na stránce.
2. Posuňte stránku až nakonec aktivního ukázkového webu a stáhněte si soubor .muse.
3. Otevřete ukázkový web a zkontrolujte projekt na pracovní ploše aplikace Muse.
4. Otevřete panel Vrstvy, rozbalte část označenou Obsah a zobrazí se prvky použité k vytvoření jednotlivých příkladů.

Efekt kousek po kousku

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V tomto ukázkovém webu je minimální výška stránky nastavena na 14 120 pixelů.
2. Pomocí nástroje Text vytvořte textový rámeček a zadejte požadovaný textový obsah.
3. Otevřete kartu Pohyb na panelu Efekty posouvání a zaškrtněte políčko Pohyb. V tomto příkladu nastavení v části Pohyb na začátku způsobuje, že se textový rámeček posune dolů do své pozice 0,25násobkem rychlosti posouvání. Když stránka dosáhne pozice řídicího prvku pro textový rámeček, textový rámeček dosáhne svého umístění, které se nachází v pohledu Návrhu. Poté nastavení Konečného pohybu (hodnota 0 pro oba směry) způsobí, že první prvek zůstane na místě, jako by byl přichycen.
4. Pod textový rámeček se umístí průhledný soubor PNG (obrys mobilního telefonu). Tento prvek pomocí nastavení na kartě Pohyb na panelu Efekty posouvání přiletí z levé části stránky, přesune se na místo a poté tam zůstane.
5. Těsně za obrysem mobilního telefonu sleduje menší bílý prvek podobný vzorec pohybu, přiletí z levé části stránky a poté zůstane na svém místě. Bílá grafika simuluje sluchátko v horní části mobilního telefonu. Tento datový zdroj (s názvem phone-earpiece.png) je uspořádána nad obrys mobilního telefonu na panelu Vrstvy, v návrhu se tedy zobrazí nad obrysem mobilního telefonu. 
6. Přímo za sluchátkem přiletí z pravé strany malý bílý prvek, který simuluje tlačítko Domů v telefonu, napodobí chování sluchátka a zobrazí se v návrhu také nad obrysem mobilního telefonu.
7. Dále se pomocí karty Pohyb na panelu Efekty posunování do své pozice přesune světle zbarvená obdélníková grafika s jemným přechodem, který přechází svisle z bílé do světle šedé, a dokonale zapadne do průhledné centrální oblasti v obrysu mobilního telefonu. Jakmile je ve své pozici, zůstane tam, a vytvoří dojem obrazovky telefonu. Prvek obrazovky (phone-screen.png) se nachází ve spodní části panelu Vrstvy a je uspořádán tak, aby se zobrazil za všemi ostatními prvky v návrhu stránky.
8. Do své pozice se poté přesune soubor čtyř obdélníků (vyplněných modrou, zelenou, žlutou a červenou barvou). Aby bylo možné vytvořit efekt rozptýleného letu, jsou všechny obdélníky nastaveny na kartě Pohyby na panelu Efekty posouvání na různé směry a rychlosti. Modrý obdélník se v částech Pohyb na začátku pohybuje dolů a doprava, zelený a žlutý obdélník nahoru a doprava a červený obdélník se pohybuje nahoru a doleva. V části Pohyb na konci mají všechny obdélník pro oba směry nastavenou 0 – to způsobí, že se prvky po dosažení finální pozice v horní části obrazovky mobilního telefonu budou chovat tak, jako by byly přichyceny na místě.
9. Jakmile se poskládají ostatní kousky, přesune se druhé textové pole nahoru tak, aby spočívalo pod prvním textovým polem. Bude se pohybovat 0,5násobkem rychlosti posouvání (poloviční rychlostí).

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.

10. Obdélník je v podstatě přichycen na místě a nikdy se nepohne, protože jsou všechny hodnoty v Úvodním i Finálním pohybu nastaveny na 0. S tím, jak se stránka posouvá do pozice řídicího prvku skupiny obsahující žárovku, posune se skupina doleva, stane se viditelnou a již není skryta za obdélníkem nad ní. Skupina se žárovkou se nachází nad prvkem obrazovky mobilního telefonu, ale pod obrysem mobilního telefonu, grafika žárovky se tedy zobrazí, jakoby vklouzla na místo (podobně jako v případě přechodu ve skutečném telefonu při posunutí prstem vodorovně). Skupina se žárovkou pokrývá obdélník s přechodem, který předtím představoval obrazovku telefonu.

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.

Klouzající nabídka

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ě:

1. V pohledu Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V tomto příkladu je minimální výška stránky nastavena na 4 655 pixelů.
2. Obrázek letadla se nachází nad veškerým dalším obsahem na stránce, na panelu Vrstvy se tedy zobrazí v horní části seznamu. Je nastaven tak, aby se pohyboval doleva před i po dosažení pozice řídicího prvku na kartě Pohyb na panelu Efekty posouvání.
   

3. Čtyři rámečky jsou nastaveny tak, aby přiletěly doleva, naskládaly se svisle na sebe a vytvořily tak navigační nabídku. Na kartě Pohyb na panelu Efekty posouvání mají všechny textové rámečky v části Pohyb na začátku stejnou rychlost (1,25násobek rychlosti posouvání). Každý rámeček má také jinou pozici řídicího prvku. Během posunu stránky dolů vklouzne každý textový rámeček do své pozice a zarovná se po levé straně návrhu. Všechny textové rámečky mají v části Pohyb na konci nastaveny hodnoty 0,0, což způsobí, že položky nabídky zůstanou na svém místě.
4. Textové rámečky jsou vyplněny barvou pozadí, ačkoliv se na první pohled zdá, že se jedná o obrázky, protože zobrazují šikmé a nikoliv svislé okraje. Tohoto efektu bylo dosaženo uspořádáním skupiny tří obdélníků nad textové rámečky, které jsou vyplněny stejnou barvou, jako je barva výplně prohlížeče.

5. Animace textového rámečku je nejdříve skryta jinou skupinou obdélníků, protože jsou textové rámečky na panelu Vrstvy uspořádány pod skupinou. Skupina představuje kombinaci tří obdélníků: větší obdélník se svislým přechodem a dva další menší obdélníky (jeden rovný a jeden natočený), které jsou vyplněny barvou odpovídající hlavní barvě přechodu.

6. Pokud přejdete dolů a zkontrolujete spodní část skupiny, zobrazí se skupina čtyř dalších obdélníků s různými šířkami, které jsou natočené a zarovnané nad pravým dolním rohem většího obdélníku s přechodem.
   

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.

Zeslabení

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte větší hodnotu, než může zobrazit běžný monitor, aby se stránka posunovala. V tomto ukázkovém webu je minimální výška stránky nastavena na 2 988 pixelů.
2. Obrázek slunce je umístěn do středu stránky. Na kartě Pohyb na panelu Efekty posouvání je pozice řídicího prvku nastavena na 1 410 pixelů. Povšimněte si také nastavení v částech Pohyb na začátku a Koncový pohyb.

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.

3. Zatímco je vybrané slunce, klikněte na kartu Krytí a zobrazí se nastavení. 1. pozice zeslabení je nastavena na 726 pixelů (nad sluncem). 2. pozice zeslabení je nastavena na 1 925 pixelů (pod sluncem). Slunce se začíná pohybovat při 0 % neprůhlednosti (je zcela průhledné), a když se stránka posune do pozice řídicího prvku, začne být zcela neprůhledné. Během posouvání stránky dolů za pozici řídicího prvku slunce, se krytí přesune ze 100 % na 0 % a vytvoří efekt zeslabení.
   

4. Stránku otestujte výběrem možnosti Soubor > Zobrazit náhled stránky v prohlížeči. Posunutím stránky zjistěte, zda slunce vychází a rozsvěcuje se a poté přechází dolů doprava a bledne.
5. Zavřete prohlížeč a vraťte se na pracovní plochu aplikace Muse.

Edge Animate

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V ukázkovém webu je minimální výška stránky nastavena na 7 465 pixelů.
2. Vyberte všechny tři výskyty kompasu na stránce. Na kartě Pohyb na panelu Efekty posouvání mají všechny tři soubory OAM stejnou pozici řídicího prvku a nastavení pohybu, protože se zobrazují všechny hodnoty.

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.

3. Kliknutím mimo kompasy zrušte výběr všech tří a poté vyberte pouze jeden kompas nalevo. Stiskněte a podržte klávesu Shift a zároveň vyberte kompas napravo tak, aby byly vybrány oba kompasy. Otevřete kartu Edge Animate na panelu Efekty posouvání a zkontrolujte nastavení.

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ů.

4. Zrušte výběr dvou vnějších kompasů. Vyberte střední kompas a znovu se podívejte na kartu Edge Animate. Pole Přepnout rámce vždy po je nastaveno na 400 pixelů. Toto nastavení způsobuje, že se centrální animace ve srovnání se dvěma vnějšími kompasy pohybuje pomaleji.

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.

Efekt prezentace

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V tomto příkladu je minimální výška stránky nastavena na 7 465 pixelů.
2. Textový rámeček se slovy Superpack je nastaven tak, aby používal efekty posouvání. Na kartě Pohyb nakonfigurujte nastavení Úvodního pohybu tak, aby se text pohyboval zleva doprava stejnou rychlostí, jakou se posunuje stránka. V nastavení Konečného pohybu jsou oba směry nastaveny na 0. Textový rámeček tak zůstává na místě, jako by byl na stránce přichycen.
   

3. Otevřete knihovnu widgetů a přetáhněte widget Prezentace do středu stránky po pravé straně cílového umístění textového rámečku.
4. Pomocí možnosti Přidat obrázky v nabídce Možnosti zaplňte prezentaci obrázky.

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í. 

5. Zatímco je vybrána prezentace, otevřete kartu Prezentace na panelu Efekty posouvání a zaškrtněte políčko Prezentace.
6. Nastavte pozici řídicího prvku tím, že přetáhněte úchyt ve tvaru T nebo zadáte hodnoty do pole. V tomto příkladu je pozice řídicího prvku nastavena na 1 066 pixelů.
7. Aktivujte přepínač Přepnout rámečky vždy po, a poté nastavte pole pod ním na 50 pixelů.
   

8. Stránku otestujte v Náhledu nebo v prohlížeči. Posunutím stránky dolů zjistěte, zda se batoh otáčí. Zaplněním prezentace sérií podobných, avšak mírně odlišných souborů obrázků, podobných rámcům v animovaném souboru GIF můžete také vytvářet obrázky, které vyvolávají dojem letu vzhůru nebo pádu dolů.
9. Po otestování efektů posouvání se vraťte do pohledu Návrhu v aplikaci Muse a pokračujte v úpravě stránek.
   

Rolová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ě:

1. V pohledu Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V ukázkovém webu je minimální výška stránky nastavena na 16 990 pixelů.
2. V nabídce Výplň prohlížeče nastavte barvu výplně prohlížeče na modrou.

3. Zatímco je vybrána celá stránka, nastavte barvu stránky v nabídce Výplň na žádná, aby modrá barva výplně prohlížeče prosvítala.
4. Přejdete na stránce přibližně na vzdálenost 2 248 pixelů od horního okraje. Pomocí nástroje Obdélník nakreslete obdélník, který je 3 000 pixelů široký a 2 000 pixelů vysoký. Pomocí nástroje pro výběr umístěte obdélník do středu stránky tak, aby obě strany přesahovaly strany okna prohlížeče.
5. Zatímco je vybrán obdélník, nastavte v nabídce Výplň zelenou barvu výplně. V nabídce Efekty nastavte stínový efekt.

6. Zatímco je vybrán zelený obdélník, zaškrtněte políčko Pohyb na kartě Pohyb na panelu Efektů posouvání. Klikněte na úchyt ve tvaru T a sbalte jej tak, aby byla pozice řídicího prvku nastavena v horním okraji obdélníku, což je v ukázkovém webu 2 248 pixelů.

7. V části Pohyb na začátku nastavte, aby se obdélník posunoval směrem dolů 1,5násobkem rychlosti posouvání. Všechny směry nastavte na 0.
8. Pomocí nástroje Text vytvořte poblíž horní části zeleného obdélníku textové pole. V tomto příkladu je v poli napsáno: This is the roll-up (Toto je rolování). Můžete však vložit textový obsah a formátování textu podle svého přání.
9. Zatímco je vybrán textový rámeček, aktivujte kartu Pohyb na panelu Efekty posouvání. Přetáhněte úchyt ve tvaru T tak, aby byl vyrovnán s horním okrajem zeleného obdélníku, a aktualizujte nastavení, které ovládá, jak se textový rámeček zobrazí na základě posouvání stránky.

10. Nastavte Pohyb na začátku na pohyb směrem dolů 1,5násobkem rychlosti posouvání. Všechny ostatní hodnoty na panelu nastavte na 0. To způsobí, že se textové pole bude pohybovat dolů ve stejném směru a stejnou rychlostí jako zelený obdélník. Jakmile se stránka posune za pozici řídicího bodu, zůstanou obdélník i textový rámeček na místě.
11. Když kliknete na možnost Náhled, můžete přejít dolů a podívat se, jak se zelený obdélník a textové pole rozbalí z horní části do zorného pole. Po dokončení testování klikněte na tlačítko Návrh a pokračujte v úpravě stránky.
12. Pomocí nabídky Zobrazení oddalte návrh webu o 10 %. Vyberte zelený obdélník a textové pole. Stiskněte a podržte klávesu Option/Alt a zároveň přesuňte tyto dva prvky níže na stránku, abyste je duplikovali. Nastavte barvu výplně duplikovaného obdélníku na tmavě modrou a pomocí textového nástroje aktualizujte textový obsah.

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í.

13. Pomocí nástroje pro výběr umístěte duplikovaný obdélník a textový rámeček do vzdálenosti asi 5 448 pixelů od horní části stránky.
14. Zatímco je vybrán tmavě modrý obdélník, zkontrolujte kartu Pohyb na panelu Efekty posouvání. Pozice řídicích prvků bude automaticky aktualizovaná na nové umístění obdélníku (5 448 pixelů) a směr pohybu dolů v části Pohyb na začátku je nadále nastaven na pohyb 1,5násobkem rychlosti posouvání (a všechny ostatní hodnoty jsou nastaveny na 0). Když zkontrolujete duplikovaný textový rámeček, zjistíte, že jsou u duplikovaného prvku zachovány také efekty posouvání.
15. Kroky 12 a 13 čtyřikrát a víckrát zopakujte a vytvořte celkem šest různě velkých obdélníků s textovými rámečky nad nimi. V každém obdélníku je již použit stínový efekt a nastavení efektů posouvání. Poslední čtyři obdélníky umístěte do následujících pozic řídicího prvku: 8 648 pixelů, 11 852 pixelů, 15 058 pixelů a 18 251 pixelů tak, aby byla každá část oddělena asi 1 200 pixely.
16. V nabídce Výplň nastavte barvu výplně obdélníků a použijte různé barvy. Experimentujte tím, že použijete plné barvy i barvy přechodu, aby jednotlivé části na stránce vynikly a lišily se od ostatních částí.
17. Pomocí nástroje Text aktualizujte v každé části textový obsah. Můžete například změnit text tak, aby odrážel barvu pozadí obdélníku pod ním, například: Toto je modrá část.
18. Stránku otestujte výběrem možnosti Soubor > Zobrazit náhled stránky v prohlížeči. Posunutím stránky zjistěte, jak se různé části stránky zobrazují a poté jsou nahrazeny další částí stránky.
19. Zavřete prohlížeč a vraťte se na pracovní plochu aplikace Muse.
    

Dynamický typ

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V tomto příkladu je minimální výška stránky nastavena na 4 854 pixelů.
2. Barvu výplně stránky nastavte na Žádná. Na barvě výplně prohlížeče nezáleží, protože stránka bude v dalším kroku zakryta dlouhým obdélníkem.
3. Pomocí nástroje Obdélník nakreslete velký obdélník, který je asi 1 159 pixelů široký a 4 854 pixelů vysoký. V nabídce Výplň obdélník vyplňte plnou barvou nebo barevným přechodem. V tomto příkladu je ve výplni použit zelenomodrý fuchsiový barevný přechod. Pomocí nástroje pro výběr umístěte obdélník do středu tak, aby vyplnil celou oblast prohlížeče. V případě potřeby lze stránku oddálit, abyste se ujistili, že je obdélník skutečně ve středu.

4. Po umístění obdélníku do středu nastavte přiblížení v nabídce Zobrazení opět na 100 %.
5. V levé části stránky vytvořte pomocí nástroje Text sérii textových rámečků. V tomto příkladu se nachází celkem pět textových rámečků. Obsah jednotlivých textových rámečků je uveden níže. Můžete však zadat jakýkoliv text podle svého přání:
   • Rolování (Five Frames)
   • Pěti rámečků (Scrolling)
   • Při různých rychlostech (At Different Speeds Will)
   • Vytvoří (Create)
   • Dynamické napětí

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.

6. Pomocí nástroje Text vyberte jednotlivé rámečky. Na panelu Text (nebo v možnostech formátování textu v ovládacím panelu) použijte různá webová písma, velikosti písem, barvy a další topografická nastavení tak, aby každý textový rámeček vynikl.
7. Vyberte všechny textové rámečky. Když jsou vybrány, otevřete kartu Pohyb na panelu Efekty posouvání. Zadejte stejnou číselnou hodnotu, abyste nastavili pozici řídicího prvku pro všechny vybrané textové rámečky najednou. (V tomto příkladu je pozice řídicího prvku nastavena na 1 372 pixelů.) Vodorovný směr pro části Pohyb na začátku a Pohyb na konci nastavte napravo. Všechny svislé směry v částech Pohyb na začátku a Pohyb na konci nastavte na 0, aby se textové rámečky svisle nepohybovaly.
8. Klikněte mimo textové rámečky a poté klikněte na jednotlivé rámečky. V každém textovém rámečku zadejte mírně odlišné hodnoty. V seznamu uvedeném níže představuje první hodnota rychlost Úvodního pohybu a druhá hodnota rychlost Konečného pohybu pro vodorovný směr (doprava):
   • Rolování .9x, .1x
   • Pěti rámečků: .12x, .5x
   • Při různých rychlostech: .7x, .17x
   • Vytvoří: 1.1x, .005x
   • Dynamické napětí.: 1x, .01x
     

9. Pomocí nástroje Text vytvořte textové pole a do pravé části stránky zadejte číslo 5. Opět můžete textový rámeček duplikovat a použít různé barvy a formátování textu, abyste vytvořili iluzi zkosených okrajů a vržených stínů. Pokud za účelem návrhu vytvoříte duplikáty textového rámečku, seskupte textové rámečky dohromady, abyste efekty posouvání mohli aplikovat na skupinu.
10. Zatímco je vybrán textový rámeček s číslem 5, zaškrtněte políčko Pohyb na kartě Pohyb na panelu Efekty posouvání. Pozici řídicího prvku lze nastavit číselně nebo přetažením úchytu ve tvaru T (v tomto případě je to 1 425 pixelů). V části Pohyb na začátku nastavte prvek tak, aby se pohyboval doleva 1násobkem rychlosti posouvání. V části Pohyb na konci nastavte prvek tak, aby se pohyboval doleva 0,1násobkem rychlosti posouvání.
11. Stránku otestujte výběrem možnosti Soubor > Zobrazit náhled stránky v prohlížeči. Posunutím stránky zjistěte, zda se pět textových rámečků posouvá na stránce z levé strany, zatímco se textový rámeček s číslem 5 pohybuje z pravé strany. Animaci textových rámečků zobrazte posouváním stránky nahoru a dolů.
12. Zavřete prohlížeč a vraťte se na pracovní plochu aplikace Muse.
    

Vrstvená nabídka

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V ukázkovém webu je minimální výška stránky nastavena na 7 465 pixelů.
2. Barevnou výplň stránky nastavte na žádná a výplň prohlížeče nastavte na plnou barvu. V tomto ukázkovém webu je výplň prohlížeče nastavena na světle hnědou barvu.
3. Pomocí nástroje Text vytvořte nový textový rámeček. Zadejte slovo Domů. Pomocí možností formátování v ovládacím panelu přidejte do textového rámečku barvu na pozadí. Aktualizací možností formátování také vytvořte požadovaný styl textu. Pomocí úchytů po stranách tlačítka roztáhněte jeho šířku a výšku na zhruba 300 pixelů šířky a 115 pixelů výšky.

4. Otevřete panel Stavy. Zvolte stav efektu přechodu a přidejte jinou barvu výplně (nebo styl podle svého výběru) a vytvořte tlačítko přechodu.

5. Po aktualizaci stavu efektu přechodu znovu vyberte normální stav.
6. Otevřete kartu Pohyb panelu Efekty posouvání. Zatímco je vybráno tlačítko, zaškrtněte políčko Pohyb. Přetažením úchytu ve tvaru T nebo zadáním číselné hodnoty nastavte pozici řídicího prvku. Část Pohyb na začátku nastavte tak, aby se pohybovala 0,75násobkem rychlosti posouvání. Ve všech ostatních polích nechte nastavenou hodnotu 0.

7. Stiskněte a podržte klávesu Option/Alt a zároveň přetáhněte tlačítko Domů níže na stránku. Tím se vytvoří duplikát tlačítka. Duplikát zarovnejte svisle s původním tlačítkem Domů. Když jsou oba prvky zarovnány a je vybrán duplikát, zobrazí se dočasně ve středu tmavě modré automatické vodítko.

8. Přesuňte duplikované tlačítko na stránce dolů, asi 460 pixelů pod původní tlačítko.
9. Kroky 7 a 8 zopakujte a vytvořte ještě další dvě duplikovaná tlačítka, abyste nakonec získali čtyři tlačítka rovnoměrně rozmístěná na stránce. Pomocí nástroje text upravte druhé, třetí a čtvrté tlačítko od shora textovým obsahem s těmito popisky: Produkty, Fotografie, Kontaktujte nás.

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).

10. Vypočtěte celkovou výšku čtyř tlačítek, když jsou zarovnána ve své finální pozici tím, že sečtete výšku a mezery. V tomto ukázkovém webu jsou tlačítka 116 pixelů vysoká a je mezi nimi prostor o velikosti 4 pixely. To znamení že je celková výška svislého panelu nabídky (když je sestavena) 476 pixelů. Pomocí nástroje Obdélník nakreslete obdélník, který má požadovanou šířku stránky a stejnou výšku jako panel nabídky. V tomto příkladu je obdélník široký 931 pixelů a vysoký 476 pixelů.
11. Chcete-li design v ukázkovém webu replikovat, můžete nastavit barvu výplně obdélníku na světle růžovou a na světlejší odstín, než je normální stav tlačítek. V případě potřeby můžete také vytvořit kulaté rohy tím, že zadáte hodnotu poloměru rohu v ovládacím panelu. V tomto příkladu jsou všechny čtyři rohy nastaveny na 10 pixelů.

12. Pomocí nástroje pro výběr obdélníky zarovnejte tak, aby byl jejich horní okraj ve vzdálenosti asi 5 094 pixelů od horní části stránky. Zajistěte také, aby levá strana obdélníku byla svisle zarovnána s levou stranou tlačítek. V tomto ukázkovém webu se obdélník a všechna tlačítka nachází ve vzdálenosti 14 pixelů od levé části stránky. Nastavení můžete zobrazit tím, že prvek vyberete a otevřete panel Transformace. Hodnota X představuje vzdálenost od levé strany (14 pixelů) a hodnota X vzdálenost od horní části stránky (5 094).
13. Zatímco je vybrán obdélník, otevřete panel Efekty posouvání a zaškrtněte políčko Pohyb na kartě Pohyb. Pozici řídicího prvku nastavte na 4 979.
14. Pohyb na začátku nastavte na směr doprava a na 1násobek rychlosti posouvání. Nastavení všech ostatních polí na kartě Pohyb ponechte na 0.

15. Vyberte obdélník a zarovnejte jej za čtyři tlačítka pomocí možnosti Objekt >Zcela dozadu.
16. Vyhledejte a vyberte soubor obrázku prostřednictvím možnosti Vybrat soubor > Umístit a poté kliknutím na stránku soubor umístěte. V tomto příkladu je umístěn průhledný soubor PNG, který zobrazuje obrázek žárovky. Žárovka se nachází v horní části velkého obdélníku, na pravé straně mimo oblast, který bude pokryta tlačítky nabídky. V tomto příkladu je obrázek umístěn ve vzdálenosti 501 pixelů od levé strany (pozice X) a 5 245 pixelů od horní části stránky (pozice Y).
17. Vyberte obrázek a zarovnejte jej za čtyři tlačítka pomocí možnosti Objekt > Zcela dozadu. Cílem je zobrazit umístěný obrázek nad velkým obdélníkem, ale za čtyřmi tlačítky.
18. Zatímco je vybrán obrázek, otevřete kartu Pohyb na panelu Efekty posouvání a zaškrtněte Políčko Pohyb. Pozici řídicího prvku nastavte na požadovanou hodnotu. V tomto ukázkovém webu je nastavena na 4 979 pixelů.
19. V části Pohyb na začátku nastavte, aby se pravá hodnota posunovala 0,75násobkem rychlosti posouvání. Všechny hodnoty všech ostatních směrů na 0.

20. Pomocí nástroje Text vytvořte textový rámeček. V ukázkovém souboru má textový rámeček následující obsah: Stack linked text frames with high contrast roll-overs to create unusual menus (Vrstvené propojené textové rámečky s velmi kontrastními přechody, které vytváří neobvyklé nabídky). Můžete však přidat jakýkoliv text podle vašeho přání. Pomocí možností formátování na ovládacím panelu vytvořte požadovaný styl textu. V tomto příkladě textový rámeček neobsahuje barvu výplně pozadí.
21. Pomocí nástroje pro výběr textový rámeček umístěte na pravou stranu umístěného obrázku. V tomto příkladu je textový rámeček nastaven na hodnotu X 357 pixelů (zleva) a hodnotu Y 5 136 pixelů (seshora). Skutečné umístění závisí na textovém obsahu a možnostech formátování, které v textovém rámečku použijete.
22. Zatímco je vybrán textový rámeček, použijte nabídku Možnost > Posunout dozadu a uspořádejte jej nebo jej přesuňte na panel Vrstvy, aby se textový rámeček zobrazil za čtyřmi tlačítky, ale nad velkým obdélníkem.
23. Na panelu Efekty posouvání zaškrtněte políčko Pohyb. Přetažením úchytu ve tvaru T nebo zadáním hodnoty nastavte pozici řídicího prvku. V tomto ukázkovém webu je pozice řídicího prvku nastavena na 4 979 pixelů a stejná hodnota pozice řídicího prvku je použita u umístěného obrázku (grafika žárovky).
24. V části Pohyb na začátku nastavte textový rámeček tak, aby se pohyboval směrem doleva poloviční (0,5násobnou) rychlostí posouvání. Nastavte hodnoty všech ostatních polí na 0.

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.

25. Pomocí nástroje obdélník nakreslete několik obdélníků s různými šířkami. Obdélníky vyplňte stejnou barvou, jako je barva pozadí použitá ve výplni prohlížeče. Tímto způsobem nebudou obdélníky viditelné, dokud se velký obdélník nepřesune na své místo přímo za nimi. V případě potřeby můžete sadu diagonálních obdélníků seskupit a pracovat s nimi jako s jedním prvkem.

26. V případě potřeby použijte panel Vrstvy nebo nabídku Objekt > Posunout dozadu a zarovnejte větší obdélník tak, aby se zobrazil vzadu za všemi ostatními prvky na stránce.
27. Nezapomeňte svůj postup pravidelně testovat kliknutím na tlačítko Náhled nebo zobrazením stránky v náhledu v prohlížeči a jejím posunutím dolů, aby se zobrazil přesun vrstvené nabídky na místo. Po dokončení testování se vraťte do aplikace Muse. 

Pohyb na pozadí

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V tomto ukázkovém webu je minimální výška stránky nastavena na 6 254 pixelů.

2. V horní části stránky nakreslete obdélník pomocí nástroje Obdélník. V tomto ukázkovém webu je obdélník široký 1 159 pixelů a vysoký 1 312 pixelů. Pomocí nástroje pro výběr umístěte obdélník do středu stránky tak, aby obě strany přesahovaly strany okna prohlížeče.
3. Zatímco je stále vybrán obdélník, nastavte v nabídce Výplň obraz pozadí. Nastavte nabídku Přizpůsobení na Dlaždicově, abyste obrázek rozdělili do dlaždic.

4. V případě potřeby můžete v nabídcee Efekty nastavit stínový efekt a vytvořit tak dramatické okraje obklopující obdélník.
5. Zatímco je vybrán vyplněný obdélník, otevřete kartu Posouvání v nabídce Výplň. Zaškrtněte políčko Pohyb a poté přetažením úchytu ve tvaru T nebo zadáním čísla do pole nastavte pozici řídicího prvku. V tomto ukázkovém webu je pozice řídicího prvku nastavena na 512 pixelů. V případě potřeby však můžete úchyt sbalit a zarovnat jej s horním okrajem obdélníku.
6. V části Pohyb na začátku nastavte směr pohybu dolů a doleva a nastavte obě rychlosti na 0,2násobek rychlosti posouvání. Stejné nastavení zopakujte v části Pohyb na konci.

7. Opakováním kroků 2–6 vytvořte další vyplněný obdélník. Nový obdélník umístěte přímo pod první vytvořený obdélník tak, aby neprosvítala žádná oblast výplně prohlížeče a mezi obdélníky nebyl žádný prostor. Nový obdélník vyplňte různou výplní dlaždicového obrazu pozadí.
8. Zopakujte krok 7 a vytvořte třetí velký obdélník, který bude umístěn přímo pod druhým obdélníkem. V nabídce Výplň nastavte různé dlaždicové obrazy pozadí. Může být praktické stránku oddálit pomocí nabídky Zobrazení, aby bylo možné zobrazit všechny obdélníky a zarovnat je svisle na stránce.

9. Zatímco je vybrán druhý obdélník, otevřete kartu Posouvání v nabídce Výplň. Aktualizujte část Pohyb na začátku tak, aby se obdélník pohyboval doprava 0,3násobkem rychlosti posouvání. V části Pohyb na konci použijte stejná nastavení, aby se obdélník pohyboval doprava 0,3násobkem rychlosti posouvání. Obě pole se svislými směry nechte nastavena na 0.

10. Vyberte třetí obdélník a aktualizujte nastavení na kartě Posouvání v nabídce Výplň. Část Pohyb na začátku nastavte tak, aby se obdélník pohyboval nahoru 0,25násobkem rychlosti posouvání a doleva 0,6násobkem rychlosti posouvání. Stejná nastavení použijte pro třetí obdélník v části Pohyb na konci.
11. Stránku otestujte výběrem možnosti Soubor > Zobrazit náhled stránky v prohlížeči. Posunutím stránky dolů zkontrolujte, zda se všechny dlaždicové obdélníky pohybují diagonálně, dokud stránku neposunete až dolů. Při posunu nahoru se budou obdélníky pohybovat také.
12. Zavřete prohlížeč a vraťte se na pracovní plochu aplikace Muse.

Masky

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ě:

1. V zobrazení Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V tomto ukázkovém webu je minimální výška stránky nastavena na 6 076 pixelů.
2. Výplň prohlížeče i stránky vyplňte plnou bílou barvou (nebo jakoukoliv barvou, které dáváte přednost – později však použijte stejnou barvu k vyplnění masky obdélníků).
3. Pomocí nástroje Obdélník nakreslete na stránce velký obdélník. Obdélník v tomto ukázkovém webu má šířku 804 pixelů a výšku 489 pixelů.
4. Barvu výplně obdélníku nastavte na žádná. Natavte barvu tahu dle svého výběru. V nabídce Tah nastavte levou a spodní stranu obdélníku tak, aby zobrazovala tah o tloušťce 20 zatímco horní a pravá strana je nastavena na 0, aby se tah skryl. Tím vytvoříte základ sloupcového grafu.
   

5. Zatímco je vybrán obdélník, otevřete kartu Pohyb na panelu Efekty posouvání. Nastavte pozici řídicího prvku a do všech čtyřech polí zadejte 0. Toto nastavení znamená, že se obdélník před nebo po dosažení pozice řídicího prvku nebude pohybovat, a prvky tak zůstanou na místě.

6. Pomocí nástroje Obdélník nakreslete dva větší obdélníky. První obdélník nakreslete tak, aby byl zarovnán s levou stranou grafu. V tomto ukázkovém webu je obdélník široký 657 pixelů a vysoký 1 810 pixelů.
7. Druhý obdélník nakreslete pod graf, aby byl zarovnán s jeho spodní stranou. V tomto ukázkovém webu je obdélník široký 1 002 pixelů a vysoký 1 541 pixelů.
8. Barvu výplně obou obdélníků nastavte na bílou (nebo na stejnou barvu, jakou má výplň prohlížeče) a tah na 0. Pomocí nástroje pro výběr zarovnejte obdélníky s oběma stranami grafu.
   

9. Zatímco jsou vybrány obdélníky, klikněte pravým tlačítkem a výběrem položky Objekt > Skupina seskupte dvě masky obdélníků dohromady.
10. Zatímco je vybrána skupina obdélníků, otevřete kartu Pohyb na panelu Efekty Posouvání. Nastavte pozici řídicího prvku (v příkladu je to 1 516 pixelů) a ve všech čtyřech polích zadejte 0. Toto nastavení znamená, že se skupina bílých obdélníků nebude před a po dosažení pozice řídicího prvku pohybovat. Skupina zůstane na místě stejně jako vnější okraj grafu.
11. Na panelu Vrstvy skupinu dočasně skryjte a uzamkněte.
12. Přejděte dolů do prostoru pod skupinou a pomocí nástroje Obdélník nakreslete pět obdélníků stejné šířky. V tomto ukázkovém webu mají všechny sloupce šířku 74 pixelů a různé výšky. Výšky pěti obdélníků v příkladu jsou zleva doprava 141, 188, 292, 444 a 583. Všechny obdélníky jsou vyplněny stejnou zelenou barvou, jakou má tah, který definuje levou a spodní stranu grafu.

13. Umístění obdélníků (zleva doprava) je uvedeno níže pomocí hodnot X a Y:
    • X: 200 Y: 2 622
    • X: 330 Y: 2 797
    • X: 460 Y: 3 081
    • X: 590 Y: 3 304
    • X: 721 Y: 3 499
14. Dále vyberte jednotlivé obdélníky postupně zleva doprava. Vyberte obdélník, zaškrtněte políčko Pohyb na kartě Pohyb na panelu Efekty posouvání a nastavte následující pozice řídicích prvků:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
15. Zatímco jsou vybrány obdélníky, aktualizujte nastavení na panelu Efekty posouvání tak, aby se část Pohyb na začátku pohybovala nahoru stejnou rychlostí jako je rychlost posouvání. Nastavte hodnoty všech ostatních polí na 0.
    

16. Na stránku umístěte průhledný soubor PNG. V tomto ukázkovém webu představuje soubor PNG grafiku růžové šipky, která se proplétá nahoru. Soubor PNG použitý v tomto příkladu je široký 695 pixelů a vysoký 443 pixelů. Po umístění na stránku jej přesuňte do pozice X: 78 a Y: 3427.
17. Na panelu Vrstvy uspořádejte soubor PNG tak, aby se nacházel pod prvním a třetím sloupcem (zleva), ale nad druhým, čtvrtým a pátým sloupcem.

18. Zatímco je vybrán obrázek šipky, otevřete kartu Pohyb na panelu Efekty posouvání a zaškrtněte Políčko Pohyb. Nastavte pozici řídicího prvku (v tomto příkladu to je 3 238 pixelů). V části Pohyb na začátku nastavte směr nahoru a doprava a zadejte 0,25násobek rychlosti posouvání pro obě pole úvodního pohybu. Obě pole v části Pohyb na konci nastavte na 0.

19. Na panelu Vrstvy zobrazte a odemkněte skupinu dvou bílých obdélníků, kterou jste předtím skryli a uzamkli. Přesuňte skupinu nad ostatní prvky tak, aby se zobrazila v horní části dalšího obsahu na stránce. Jelikož je skupina nahoře, bude fungovat jako maska a zobrazovat pouze sloupce a šipku při pohybu nahoru v rámečku grafu.
20. Stránku otestujte výběrem možnosti Soubor > Zobrazit náhled stránky v prohlížeči. Posunutím stránky zkontrolujte, zda se sloupcový graf přesouvá do své pozice a dva bílé obdélníky skrývající sloupce skrývají prvky sloupcového grafu, dokud se nepřesunou do grafu.
21. Zavřete prohlížeč a vraťte se na pracovní plochu aplikace Muse.

Příklady návrhů webů s efekty posouvání

Na webu společnosti Demential Lab naleznete praktické ukázky efektů posouvání.