Dowiedz się, jak dodawać i stosować różne rodzaje efektów przewijania, takie jak „kawałek po kawałku”, przesuwane menu, zwijane menu i inne.

Uwaga:

Do programu Adobe Muse nie są już dodawane nowe funkcje, a jego obsługa zostanie wycofana 26 marca 2020 r. Aby uzyskać szczegółowe informacje i pomoc, zobacz stronę na temat wycofania usługi Adobe Muse.

Propozycje projektowe dla efektów przewijania

W tej sekcji przyjrzymy się wybranym sposobom dodawania do witryn Muse m.in. funkcji interaktywnych, unikatowych elementów nawigacyjnych oraz pełnych wyrazu, ruchomych grafik za pomocą efektów przewijania.

Aby rozpocząć, wykonaj poniższe kroki:

  1. Odwiedź przykładową witrynę i kliknij każdą z sekcji, aby zobaczyć poszczególne przykłady zastosowań. Przewiń każdą ze stron w dół, aby zobaczyć, jak efekty przewijania sterują sposobem wyświetlania elementów strony.
  2. Przewiń przykładową witrynę do końca, aby pobrać plik .muse.
  3. Otwórz przykładową witrynę i zapoznaj się z jej projektem w ramach przestrzeni roboczej programu Muse.
  4. Otwórz panel Warstwy i rozwiń sekcję Zawartość, aby wyświetlić elementy, z których utworzono poszczególne przykłady.

Efekt „kawałek po kawałku”

Ten efekt tworzą „zlatujące się” elementy, które budują projekt strony podczas przewijania jej w dół. Efekty przewijania sterują grafiką i ramkami tekstowymi, które tworzą interaktywną kompilację przypominającą łączące się elementy układanki. To interesujący sposób przedstawiania szczegółów produktu na stronie internetowej.

W tym przykładzie ustawienia w sekcji Ruch początkowy na karcie Ruch w panelu Efekty przewijania sterują układaniem poszczególnych elementów w spójną całość. Ustawienia w sekcji Ruch końcowy danego obiektu są zerowane po zakończeniu jego ruchu, dzięki czemu poszczególne elementy układanki, które znalazły się na swoich miejscach, pozostają na nich w miarę pojawiania się nowych obiektów.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt powstawania kompozycji „kawałek po kawałku”.

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 14 120 pikseli.
  2. Za pomocą narzędzia Tekst utwórz ramkę tekstową i wprowadź żądany tekst.
  3. Otwórz kartę Ruch panelu Efekty przewijania i zaznacz opcję Ruch. W tym przykładzie ustawienia w sekcji Ruch początkowy powodują przesuwanie ramki tekstowej w dół na swoje miejsce z szybkością stanowiącą 0,25 (jedną czwartą) szybkości przewijania. Po przewinięciu strony do położenia kluczowego ramki tekstowej ramka trafia do położenia, w którym znajduje się w widoku Projektowanie. Następnie ustawienia w sekcji Ruch końcowy (wartości zerowe w obu kierunkach) powodują zatrzymanie pierwszego elementu w miejscu, jak gdyby został przypięty.
  4. Pod ramką tekstową zostaje umieszczony plik PNG z przezroczystością (kontur telefonu komórkowego). Wykorzystując ustawienia na karcie Ruch panelu Efekty przewijania, element ten „wlatuje” na stronę od lewej, po czym zatrzymuje się i pozostaje na swoim miejscu.
  5. Tuż za konturem telefonu komórkowego, także od lewej, „wlatuje” podobny element koloru białego i również pozostaje na swoim miejscu. Biała grafika przypomina głośnik znajdujący się w górnej części telefonu komórkowego. Ten zasób (o nazwie phone-earpiece.png) jest ustawiony w panelu Warstwy nad konturem telefonu komórkowego, dlatego jest wyświetlany nad nim. 
  6. Zaraz za głośnikiem, tym razem od prawej, „wlatuje”, naśladując zachowanie głośnika, niewielki element koloru białego, imitujący przycisk ekranu głównego telefonu komórkowego. Także on jest wyświetlany w projekcie na tle konturu telefonu.
  7. Następnie pojawia się ułożona pionowo prostokątna grafika z subtelnym gradientem (od bieli do jasnej szarości), która wsuwa się na swoje miejsce, korzystając z ustawień na karcie Ruch panelu Efekty przewijania. Wpasowuje się ona w środek przezroczystego obszaru pośrodku konturu telefonu komórkowego. Po zajęciu swojego miejsca element pozostaje na nim, imitując ekran telefonu. Element ekranu (phone-screen.png) jest umieszczony na dole panelu Warstwy, zatem wszystkie pozostałe elementy projektu strony są wyświetlane na jego tle.
  8. Następne w kolejności są cztery prostokąty (wypełnione jednolitymi kolorami: niebieskim, zielonym, żółtym i czerwonym), które wsuwają się na swoje miejsca. W celu stworzenia efektu „zlatywania się” z różnych kierunków, na karcie Ruch panelu Efekty przewijania dla każdego z prostokątów ustawiono inny kierunek oraz szybkość ruchu. W sekcji Ruch początkowy niebieski prostokąt zsuwa się w dół i na prawo, prostokąty zielony i żółty wsuwają się do góry i na prawo, a czerwony prostokąt wsuwa się do góry i na lewo. W sekcji Ruch końcowy wszystkie prostokąty mają wartość zerowa dla obu kierunków, co sprawia wrażenie, jakby każdy z nich był przypinany po osiągnięciu miejsca docelowego na ekranie telefonu komórkowego.
  9. Po złożeniu wszystkich elementów z szybkością wynoszącą 0,5 szybkości przewijania strony od dołu nasuwa się druga ramka tekstowa, która zostaje umieszczona pod pierwszą.

Na koniec u dołu pozostają dwa elementy: prostokąt wypełniony takim samym, jednolitym kolorem jak strona (co czyni go niewidocznym w projekcie) oraz grupa obiektów (żółty prostokąt z grafiką przedstawiającą żarówkę) znajdująca się za nim.

Dzięki prostokątowi wypełnionemu jednolitym kolorem można ukryć grupę, która jest umieszczona za nim.

Efekt przewijania „kawałek po kawałku” w programie Adobe Muse
Efekt przewijania „kawałek po kawałku” w programie Adobe Muse

Uwaga:

Podczas gdy oba elementy są zaznaczone, zwróć uwagę, że w polach są wyświetlane wartości liczbowe, które są takie same dla wszystkich zaznaczonych elementów. W tym przykładzie zarówno prostokąt, jak i grupa mają wartość 0 dla kierunku pionowego w sekcji Ruch początkowy oraz wartość 0,0 w sekcji Ruch końcowy. W polu ruchu poziomego sekcji Ruch początkowy nie jest wyświetlana żadna wartość, ponieważ grupa ma ustawioną szybkość ruchu w lewo równą szybkości przewijania, podczas gdy wartość ta dla prostokąta wynosi 0.  

  1. Prostokąt jest praktycznie przypięty na swoim miejscu i nigdy się nie poruszy, ponieważ wszystkie wartości – zarówno w sekcji Ruch początkowy, jak i Ruch końcowy – są dla niego wyzerowane. Podczas przewijania strony do położenia kluczowego grupy zawierającej grafikę żarówki grupa przesuwa się w lewo spod ukrywającego ją dotąd prostokąta i staje się widoczna. W hierarchii warstw grupa żarówki jest umieszczona pomiędzy ekranem telefonu, a jego konturem, dzięki czemu grafika żarówki zdaje się nasuwać na swoje miejsce (podobnie, jak ma to miejsce w przypadku reakcji telefonu na przesunięcie palcem po ekranie). Grupa żarówki zakrywa prostokąt wypełniony gradientem, który przedstawiał ekran telefonu.

Jak widać na tym prostym przykładzie, dzięki połączeniu wyjątkowo długiej strony, serii elementów rozmieszczonych strategicznie w panelu Warstwy oraz karty Ruch panelu Efekty przewijania można utworzyć animację, która stwarza iluzję elementów składających się w całość w miarę przewijania strony.

Przesuwające się menu

Efekt przesuwającego się menu wykorzystuje wiele z konwencji opisanych w przykładzie efektu „kawałek po kawałku”. Wykorzystując ustawienia na karcie Ruch panelu Efekty przewijania, elementy zdają się „wlatywać”, a prostokąty zakrywają część z nich do chwili, gdy są gotowe do wyświetlenia w projekcie strony.

Ten efekt stwarza wrażenie skomplikowanego projektu, wykorzystując strategicznie rozmieszczone grupy prostokątów.

Otwórz przykładową witrynę w przeglądarce, aby zobaczyć wlatujący poziomo od prawej do lewej samolot, zestaw wystylizowanych opcji menu oraz gradientowe tło z ukośnymi paskami.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt przesuwania:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 4665 pikseli.
  2. W hierarchii warstw obraz samolotu jest umieszczony nad pozostałą zawartością strony, w związku z czym znajduje się on na pierwszej pozycji listy w panelu Warstwy. Zgodnie z ustawieniami na karcie Ruch panelu Efekty przewijania ma się poruszać w lewo zarówno przed, jak i po osiągnięciu przypisanego mu położenia kluczowego.
Przesuwające się menu w efektach przewijania programu Adobe Muse
Przesuwające się menu w efektach przewijania programu Adobe Muse

  1. Cztery ramki tekstowe zostały skonfigurowane tak, aby „wleciały” do lewej i ustawiły się w pionowy stos, tworząc menu nawigacyjne. W sekcji Ruch początkowy na karcie Ruch panelu Efekty przewijania każda ramka tekstowa ma taką samą szybkość (1,25-krotność szybkości przewijania). Każda ramka tekstowa ma dodatkowo inne położenie kluczowe. Podczas przewijania strony w dół każda ramka tekstowa wsuwa się na swoje miejsce i wyrównuje do lewej krawędzi projektu. Wszystkie ramki tekstowe mają wartości 0,0 w sekcji Ruch końcowy, co sprawia, że po zatrzymaniu się na swoim miejscu pozycje menu pozostają nieruchome.
  2. Ramki tekstowe są wypełnione jednolitym kolorem tła, choć na pierwszy rzut oka zdają się być obrazami ze względu na ścięte boki. Efekt ten osiągnięto poprzez umieszczenie w hierarchii warstw grupy trzech prostokątów nad ramkami tekstowymi, których kolor wypełnienia odpowiada kolorowi wypełnienia przeglądarki.
Pogrupuj i ułóż prostokąty nad pozycjami menu tak, aby stworzyć efekt ściętych krawędzi bocznych.
Pogrupuj i ułóż prostokąty nad pozycjami menu tak, aby stworzyć efekt ściętych krawędzi bocznych.

  1. Animacja ramki tekstowej jest z początku zakryta przez inną grupę prostokątów, ponieważ w panelu Warstwy ramki znajdują się pod grupą. Grupę tworzą trzy prostokąty: większy z pionowym gradientem oraz dwa mniejsze (jeden kwadratowy, a drugi obrócony), które są wypełnione jednolitym kolorem odpowiadającym górnemu kolorowi gradientu.
  1. Jeśli przewiniesz stronę w dół, aby sprawdzić wygląd dolnej części grupy, zobaczysz serię czterech kolejnych prostokątów o różnych szerokościach, które są obrócone i wyrównane nad prawym dolnym narożnikiem większego prostokąta z gradientem.
Obracaj prostokąty wypełnione tym samym kolorem co strona tak, aby ściąć narożnik prostokąta wypełnionego gradientem.
Obracaj prostokąty wypełnione tym samym kolorem co strona tak, aby ściąć narożnik prostokąta wypełnionego gradientem.

Grupy świetnie nadają się do łączenia różnych elementów i sterowania nimi jak pojedynczym elementem. W tym przykładzie wobec grup różnych prostokątów zastosowano efekty przewijania ruchu, aby poruszały się jak pojedynczy element.

Ten przykład ilustruje także twórcze wykorzystanie pustej przestrzeni. Jeśli wypełnieniem przeglądarki jest jednolity kolor tła, możemy tworzyć interesujące efekty wycinanki, umieszczając prostokąty o takim samym kolorze wypełnienia nad prostokątami o innym wypełnieniu. Zamiast projektować elementy graficzne w specjalnych edytorach wystarczy skorzystać z prostokątów w programie Muse i za ich pomocą tworzyć grafikę.

Tonowanie

Ten animowany wschód i zachód słońca uzyskano dzięki kombinacji dwóch efektów przewijania: ruchu i krycia. W tym przykładzie mamy do czynienia z tłem strony wypełnionym gradientem oraz pojedynczym, umieszczonym plikiem PNG przedstawiającym słońce. Obraz PNG zawiera obszary przezroczyste, które sprawiają, że wypełnienie strony stanowiącej tło jest widoczne.

Otwórz ten przykład w przeglądarce, aby zobaczyć wschód słońca z tonowaniem od 100% przesuwający się na stronie. W punkcie szczytowym słońce jest całkowicie nieprzejrzyste, jednak w miarę przewijania strony w dół, zaczyna zachodzić, a jego przezroczystość wzrasta.
Wykonaj poniższe kroki, aby osiągnąć podobny efekt tonowania:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość wprowadź wartość przekraczającą średnią wysokość monitora, aby utworzyć przewijaną stronę. W przykładowej witrynie wartość ta wynosi 2988 pikseli.
  2. Obraz słońca jest umieszczony pośrodku strony. Na karcie Ruch panelu Efekty przewijania położenie kluczowe jest ustawione na 1410 pikseli. Zwróć także uwagę na ustawienia w sekcjach Ruch początkowy i Ruch końcowy.
Wprowadź ustawienia Ruchu początkowego i Ruchu końcowego dla uzyskania efektu Przenikania.
Wprowadź ustawienia Ruchu początkowego i Ruchu końcowego dla uzyskania efektu Przenikania.

Dzięki tym ustawieniom słońce porusza się po półokręgu od lewej dolnej części strony przez jej środek (gdzie zostaje osiągnięte położenie kluczowe) aż po prawą dolną część strony.

  1. Podczas gdy słońce jest zaznaczone, kliknij kartę Krycie, aby wyświetlić ustawienia. Pole Położenie przyciemnienia 1 ma wartość 726 pikseli (nad słońcem). Pole Położenie przyciemnienia 2 ma wartość 1925 pikseli (pod słońcem). Słońce zaczyna od krycia na poziomie 0% (pełna przezroczystość), a następnie staje się całkowicie nieprzejrzyste po przewinięciu strony do jego położenia kluczowego. W miarę przewijania strony w dół po osiągnięciu położenia kluczowego słońca poziom jego krycia zmniejsza się ze 100 do 0%, tworząc efekt przyciemniania i rozjaśniania.
Dostosuj poziom przezroczystości na karcie Krycie panelu Efekty przewijania.
Dostosuj poziom przezroczystości na karcie Krycie panelu Efekty przewijania.

  1. Przetestuj stronę, wybierając polecenie Plik > Podgląd strony w przeglądarce. Przewiń stronę, aby zobaczyć wschód słońca i jego stopniowe zaciemnianie, a następnie rozjaśnianie aż do całkowitego zniknięcia.
  2. Zamknij przeglądarkę i wróć do przestrzeni roboczej programu Muse.

Edge Animate

Ten przykład ilustruje sterowanie plikami OAM wyeksportowanymi z aplikacji Adobe Edge Animate za pomocą efektów przewijania. W tym przypadku strona jest wypełniona pionowym gradientem od jasnego turkusu po kolor ciemnoniebieski.

Efekt animacji uzyskano dzięki kombinacji ustawień na karcie Ruch panelu Edge Animate.

Trzy instancje tego samego pliku OAM zostały umieszczone obok siebie w poziomie, tworząc rząd animowanych kompasów. Po otwarciu strony w przeglądarce wszystkie trzy kompasy wsuwają się od dołu, a następnie pozostają na swoim miejscu. Każdy z kompasów zdaje się obracać z różną szybkością, jednak wynika to z ustawień w panelu Efekty przewijania, a nie struktury pliku Edge Animation.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt za pomocą trzech umieszczonych plików OAM:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 7465 pikseli.
  2. Zaznacz wszystkie trzy instancje kompasu na stronie. Na karcie Ruch panelu Efekty przewijania widać, że wszystkie trzy pliki OAM mają to samo położenie kluczowe i ustawienia ruchu, ponieważ wszystkie wartości są widoczne.
Twórz animacje dla plików OAM za pomocą efektów przewijania
Twórz animacje dla plików OAM za pomocą efektów przewijania

Jeśli otworzysz stronę w przeglądarce, zauważysz, że wszystkie trzy elementy OAM „wyskakują” jednocześnie i pozostają w jednym rzędzie jak gdyby zostały przypięte.

  1. Kliknij poza kompasami, aby usunąć zaznaczenie, a następnie zaznacz tylko kompas po lewej. Naciśnij i przytrzymaj klawisz Shift i zaznacz kompas po prawej, tak aby zaznaczyć lewy i prawy kompas. Otwórz kartę Edge Animate panelu Efekty przewijania, aby sprawdzić ustawienia.
Odznacz wszystkie trzy kompasy i zaznacz kompas po lewej i po prawej stronie.
Odznacz wszystkie trzy kompasy i zaznacz kompas po lewej i po prawej stronie.

Oba boczne kompasy zostały skonfigurowane do zapętlenia animacji na osi czasu i wyświetlania kolejnych ramek po każdorazowym przewinięciu strony w dół o 350 pikseli.

  1. Usuń zaznaczenie obu bocznych kompasów. Zaznacz środkowy kompas i spójrz ponownie na kartę Edge Animate – w tym przypadku wartość w polu Zmień ramkę co wynosi 400 pikseli. Ustawienie to powoduje, że środkowa animacja jest odtwarzana wolniej od dwóch bocznych.
Zaznacz środkowy kompas i wybierz ustawienie efektów przewijania.
Zaznacz środkowy kompas i wybierz ustawienie efektów przewijania.

Interesujące efekty animowane można uzyskać, ustawiając różną szybkość dla poszczególnych umieszczonych plików Edge Animate względem szybkości przewijania strony. Można np. utworzyć ławicę ryb, niebo z sunącymi obłokami lub inne efekty, dodając wiele instancji tego samego pliku OAM z różnymi ustawieniami efektu przewijania.

Efekt pokazu slajdów

Możesz sterować sposobem wyświetlania zestawu zdjęć w widżecie Pokaz slajdów w zależności od przewijania strony. W tym celu należy dodać do strony widżet Pokaz slajdów, a następnie za pomocą karty Pokaz slajdów panelu Efekty przewijania zaktualizować ustawienia pokazu.

W tym przykładzie pokaz slajdów wyświetla serię obrazów, które tworzą widok plecaka w perspektywie 360 stopni. Aby wykonać tego rodzaju zdjęcia na potrzeby pokazu slajdów, użyj statywu i sfotografuj obiekt umieszczony na obrotowym stojaku. Efekt ten jest przydatny, gdy chcemy zaprezentować interaktywny opis produktu i umożliwić potencjalnym klientom obejrzenie przedmiotu z każdej strony przed zakupem.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt za pomocą widżetu Pokaz slajdów:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 7465 pikseli.
  2. Ramka tekstowa zawierająca wyraz Superpack została skonfigurowana do korzystania z efektów przewijania. Na karcie Ruch dostosuj ustawienia w sekcji Ruch początkowy, aby tekst przesuwał się od lewej do prawej z szybkością przewijania strony. W sekcji Ruch końcowy oba kierunki są ustawione na 0, dzięki czemu ramka tekstowa pozostaje na swoim miejscu, jak gdyby została przypięta do strony.
     
Zaznacz opcję Ruch i skonfiguruj efekty przewijania, aby ramka tekstowa przesuwała się w prawo.
Zaznacz opcję Ruch i skonfiguruj efekty przewijania, aby ramka tekstowa przesuwała się w prawo.

  1. Otwórz Bibliotekę widżetów i przeciągnij na środek strony widżet Pokaz slajdów i umieść go na prawo od miejsca docelowego ramki tekstowej.
  2. Dodaj pliki obrazów do pokazu slajdów, korzystając z polecenia Dodaj obrazy w menu Opcje. 

Podczas gdy pokaz slajdów jest zaznaczony, możesz skorzystać z interfejsu Pinezka w panelu sterowania i przypiąć go do strony. Możesz także dodać pełnoekranowy pokaz slajdów i sterować nim za pomocą efektów przewijania. 

  1. Podczas gdy pokaz slajdów jest zaznaczony, otwórz kartę Pokaz slajdów panelu Efekty przewijania i zaznacz opcję Pokaz slajdów.
  2. Przeciągnij uchwyt T lub wprowadź wartość w polu, aby ustawić położenie kluczowe. W tym przykładzie położenie kluczowe jest ustawione na 1066 pikseli.
  3. Zaznacz przycisk opcji Zmień slajd co i ustaw w polu pod nim wartość 50 pikseli.
Ustaw pokaz slajdów tak, aby kolejny obraz był wyświetlany po przewinięciu strony o 50 pikseli.
Ustaw pokaz slajdów tak, aby kolejny obraz był wyświetlany po przewinięciu strony o 50 pikseli.

  1. Przetestuj stronę w oknie Podgląd lub przeglądarce internetowej. Przewiń stronę w dół, aby zobaczyć obracający się plecak. Dodając do pokazu slajdów serię obrazów różniących się od siebie drobnymi szczegółami (jak klatki w animowanym pliku GIF), możesz tworzyć efekt wznoszenia lub opadania.
  2. Po przetestowaniu efektów przewijania wróć do widoku Projektowanie w programie Muse, aby kontynuować edycję stron.

Nasuwanie

Za pomocą efektów przewijania możesz utworzyć bardzo długą stronę podzieloną na sekcje o diametralnie różnym wyglądzie. W miarę przewijania strony przez osobę odwiedzającą następują przejścia pomiędzy sekcjami, które zdają się nasuwać na siebie. Wyświetlane są też animowane efekty tekstowe oraz oddzielające obwiednie utworzone za pomocą efektu cienia.

Aby zachęcić osoby odwiedzające do przewinięcia strony i zapoznania się z poszczególnymi sekcjami, możesz umieścić na stronie znaczniki zakotwiczenia lub notatkę. Gdy przewiniesz przykładową witrynę do samego dołu i klikniesz przycisk Back to Top (Do początku), zauważysz błyskawiczne przewinięcie strony do początku.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt nasuwania:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 16 990 pikseli.
  2. W menu Wypełnienie przeglądarki ustaw kolor wypełnienia na jednolity niebieski.
W menu Wypełnienie przeglądarki ustaw odpowiedni kolor wypełnienia.
W menu Wypełnienie przeglądarki ustaw odpowiedni kolor wypełnienia.

  1. Podczas gdy cała strona jest zaznaczona, ustaw w menu Wypełnienie kolor strony na Brak, aby niebieski kolor wypełnienia przeglądarki stał się widoczny.
  2. Przewiń stronę w dół o około 2248 pikseli. Za pomocą narzędzia Prostokąt narysuj prostokąt o wymiarach 3000 × 2000 pikseli (szer. × dł.). Za pomocą narzędzia Zaznaczanie umieść prostokąt pośrodku strony w taki sposób, aby oba jego boki wystawały szeroko poza okno przeglądarki.
  3. Podczas gdy prostokąt jest zaznaczony, w menu Wypełnienie ustaw kolor wypełnienia na jednolity zielony. W menu Efekty ustaw efekt cienia.
Zastosuj efekt cienia wobec prostokąta, aby uczynić go bardziej wyrazistym.
Zastosuj efekt cienia wobec prostokąta, aby uczynić go bardziej wyrazistym.

  1. Podczas gdy zielony prostokąt jest zaznaczony, zaznacz opcję Ruch na karcie Ruch panelu Efekty przewijania. Kliknij i przeciągnij uchwyt T, a następnie zwiń go, aby położenie kluczowe znalazło się równo z górną krawędzią prostokąta. W przykładowej witrynie jest to wysokość 2248 pikseli.
  1. W sekcji Ruch początkowy ustaw kierunek ruchu prostokąta w dół z szybkością 1,5 raza większą od szybkości przewijania. Wszystkie pozostałe kierunki ustaw na 0.
  2. Za pomocą narzędzia Tekst utwórz pole tekstowe w pobliżu górnej części zielonego prostokąta. W tym przykładzie tekst w polu to „This is the roll-up”. Możesz dowolnie dostosować brzmienie i formatowanie tego tekstu.
  3. Gdy ramka tekstowa jest zaznaczona, otwórz kartę Ruch panelu Efekty przewijania. Przeciągnij uchwyt T i wyrównaj go z górną krawędzią zielonego prostokąta, a następnie dostosuj ustawienia, aby sterować wyświetlaniem ramki tekstowej w zależności od przewijania strony.
Wyrównaj uchwyt T z górną krawędzią prostokąta.
Wyrównaj uchwyt T z górną krawędzią prostokąta.

  1. W sekcji Ruch początkowy wybierz kierunek w dół z szybkością 1,5 raza większą od szybkości przewijania. Wszystkie pozostałe wartości w panelu ustaw na 0. Dzięki temu pole tekstowe będzie się poruszać w dół zgodnie z zielonym prostokątem i z taką samą szybkością. Zarówno prostokąt, jak i ramka tekstowa pozostaną na swoich miejscach, gdy strona zostanie przewinięta poza ich położenia kluczowe.
  2. Jeśli klikniesz Podgląd, możesz przewinąć stronę w dół i zobaczyć, jak zielony prostokąt i pole tekstowe nasuwają się od góry i stają się widoczne. Po zakończeniu testowania kliknij przycisk Projektowanie, aby kontynuować edycję strony.
  3. Za pomocą menu Widok zmniejsz powiększenie projektu witryny do 10%. Zaznacz zielony prostokąt i pole tekstowe. Naciśnij i przytrzymaj klawisz Option/Alt i przeciągnij oba elementy w dół strony, aby je powielić. Ustaw kolor wypełnienia powielonych elementów na ciemnoniebieski, a następnie zaktualizuj zawartość tekstową za pomocą narzędzia Tekst.
Zaktualizuj kolor wypełnienia tła powielonego prostokąta i zmień zawartość ramki tekstowej na potrzeby nowej sekcji strony.
Zaktualizuj kolor wypełnienia tła powielonego prostokąta i zmień zawartość ramki tekstowej na potrzeby nowej sekcji strony.

W tym przykładzie powielona ramka zawiera tekst: „Use it to drastically alter the appearance of your website”. Aby odróżnić ciemnoniebieską sekcję strony, możesz wpisać do ramki dowolny tekst.

  1. Za pomocą narzędzia Zaznaczanie umieść powielony prostokąt i ramkę tekstową w odległości ok. 5448 pikseli od górnej części strony.
  2. Podczas gdy ciemnoniebieski prostokąt jest zaznaczony, wybierz kartę Ruch panelu Efekty przewijania. Wartość położenia kluczowego została automatycznie zaktualizowana do nowego położenia prostokąta (5448 piks.), a w sekcji Ruch początkowy dla kierunku w dół nadaj jest ustawiona szybkość będąca 1,5-krotnością szybkości przewijania (pozostałe wartości są wyzerowane). Jeśli spojrzysz na powieloną ramkę tekstową, zauważysz, że efekty przewijania zostały zachowane także dla niej.
  3. Powtórz kroki 12 i 13 jeszcze cztery razy, aby utworzyć łącznie sześć dużych prostokątów z ramką tekstową umieszczoną u góry. Każdy prostokąt ma zastosowany efekt cienia oraz ustawienia efektów przewijania. Ustaw ostatnie cztery prostokąty w następujących położeniach kluczowych: 8648 pikseli, 11 852 pikseli, 15 058 pikseli i 18 251 pikseli, tak aby każda z sekcji była oddzielona od poprzedniej o ok. 1200 pikseli.
  4. W menu Wypełnienie ustaw różne kolory wypełnienia prostokątów. Możesz zastosować kolory jednolite i gradienty, aby odróżnić od siebie poszczególne sekcje strony.
  5. Za pomocą narzędzia Tekst zaktualizuj zawartość tekstową poszczególnych sekcji. Możesz np. wpisać tekst związany z kolorem danej sekcji: „To jest sekcja niebieska”.
  6. Przetestuj stronę, wybierając polecenie Plik > Podgląd strony w przeglądarce. Przewiń stronę, aby wyświetlić poszczególne sekcje i sprawdzić efekt nasuwania się kolejnych.
  7. Zamknij przeglądarkę i wróć do przestrzeni roboczej programu Muse.

Tekst dynamiczny

Dzięki połączeniu efektów przewijania ruchu i czcionek internetowych Adobe Edge możesz tworzyć nietypowe projekty typograficzne. Czcionki internetowe umożliwiają stylizowanie tekstu podczas wczytywania strony. Zamiast umieszczać i animować obrazy tekstu utworzone w specjalnych edytorach, dzięki czcionkom internetowym Edge możesz tworzyć strony atrakcyjne wizualnie i łatwe do aktualizowania. Efekty przewijania nadają animacjom więcej wyrazu podczas przewijania strony w dół.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt za pomocą tekstu dynamicznego:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 4854 pikseli.
  2. Ustaw kolor wypełnienia strony na Brak. Kolor wypełnienia przeglądarki nie ma znaczenia, ponieważ w następnym kroku zakryjemy ją długim prostokątem.
  3. Za pomocą narzędzia Prostokąt narysuj duży prostokąt o wymiarach 1159 × 4854 pikseli (szer. × dł.). W menu Wypełnienie ustaw wypełnienie prostokąta kolorem jednolitym lub gradientem. W tym przykładzie jako wypełnienie zastosowano gradient od koloru morskiego do fuksji. Za pomocą narzędzia Zaznaczanie umieść prostokąt tak, aby wypełnił cały obszar przeglądarki. Jeśli chcesz, możesz zmniejszyć podgląd strony, aby upewnić się, że prostokąt jest wyśrodkowany na stronie.
Zmniejsz poziom powiększenia i umieść prostokąt na środku długiej strony.
Zmniejsz poziom powiększenia i umieść prostokąt na środku długiej strony.

  1. Po wyśrodkowaniu prostokąta przywróć poziom powiększenia do 100%.
  2. W lewej części strony za pomocą narzędzia Tekst utwórz kilka ramek tekstowych. W tym przykładzie mamy do czynienia z pięcioma ramkami. Zawartość ramek można znaleźć poniżej, jednak do każdej z nich możesz wpisać dowolny tekst:
    • Pięć ramek
    • przewijających się
    • z różną szybkością
    • dodaje
    • dynamizmu

Opcjonalnie możesz powielić część ramek tekstowych i zastosować wobec nich nieco odmienne style. W tym przykładzie ramka tekstowa zawierająca słowo „dodaje” została powielona, a obie instancje ułożono na sobie w celu utworzenia efektu jasnoniebieskiego cienia.

  1. Za pomocą narzędzia Tekst zaznacz każdą z ramek tekstowych. W panelu Tekst (lub korzystając z opcji formatowania w panelu sterowania) zastosuj czcionki internetowe o różnych rozmiarach, kolorach i innych ustawieniach typograficznych, aby odróżnić od siebie poszczególne czcionki.
  2. Zaznacz wszystkie ramki tekstowe. Podczas gdy są zaznaczone, otwórz kartę Ruch panelu Efekty przewijania. Wprowadź tę samą wartość liczbową, aby za jednym razem ustalić położenie kluczowe wszystkich zaznaczonych ramek. (W tym przykładzie położenie kluczowe jest ustawione na 1372 pikseli). Ustaw także kierunek ruchu w prawo w sekcjach Ruch początkowy i Ruch końcowy. W sekcjach tych ustaw także zerową wartość dla kierunków pionowych, aby ramki tekstowe nie przesuwały się w pionie.
  3. Kliknij poza ramkami tekstowymi, a następnie kliknij każdą z nich osobno. Dla każdej z ramek wprowadź nieco inną wartość. Na liście poniżej pierwsza wartość to szybkość ruchu poziomego w prawo dla Ruchu początkowego, a druga to szybkość ruchu poziomego w prawo dla Ruchu końcowego:
    • Pięć ramek: 0,9x, 0,1x
    • przewijających się: 0,12x, 0,5x
    • z różną szybkością: 0,7x, 0,17x
    • dodaje: 1,1x, 0,005x
    • dynamizmu: 1x, 0,01x

Uwaga:

Jeśli zdecydujesz się powielić którąś ramkę tekstową, aby utworzyć efekt cienia, możesz zgrupować dwie lub więcej jej instancji i sterować nimi jak pojedynczą grupą podczas stosowania efektów przewijania.

  1. Za pomocą narzędzia Tekst utwórz pole tekstowe i wpisz do niego cyfrę 5 w prawej części strony. I tym razem możesz powielić ramkę tekstową, a następnie zastosować różne kolory i odmienne formatowanie, aby stworzyć wrażenie fazowanych krawędzi i cieni. Jeśli utworzysz kopie ramki tekstowej podczas projektowania, zgrupuj je razem, aby stosować efekty przewijania wobec grupy.
  2. Podczas gdy ramka z cyfrą 5 jest zaznaczona, zaznacz opcję Ruch na karcie Ruch panelu Efekty przewijania. Ustaw położenie kluczowe, wprowadzając wartość liczbową lub przeciągając uchwyt T (w tym przykładzie jest to 1425 pikseli). W sekcji Ruch początkowy ustaw kierunek ruchu elementu w lewo z szybkością równą szybkości przewijania. W sekcji Ruch końcowy ustaw kierunek ruchu elementu w lewo z szybkością stanowiąca 0,1 szybkości przewijania.
  3. Przetestuj stronę, wybierając polecenie Plik > Podgląd strony w przeglądarce. Przewiń stronę, aby zobaczyć, jak pięć ramek tekstowych nasuwa się na stronę od lewej, a ramka z cyfrą 5 nasuwa się od prawej. Przewiń stronę w górę i w dół, aby odtworzyć animację ramek.
  4. Zamknij przeglądarkę i wróć do przestrzeni roboczej programu Muse.
     

Za pomocą efektów przewijania można tworzyć interaktywne elementy nawigacyjne stron i sprawić, aby poszczególne przyciski „wlatywały” do widocznego obszaru strony i ustawiały się, tworząc pasek menu. W tym przykładzie cztery przyciski najazdu nasuwają się od dołu strony w miarę jej przewijania, a następnie zatrzymują, tworząc pionowy pasek menu.

Po zrównaniu się czterech przycisków zawartość tła (w postaci grafiki przedstawiającej żarówkę, kolorowego tła, ramki tekstowej i ukośnych pasków narożnika) „wlatuje” z obu stron, tworząc sekcję witryny.

Choć przyciski w tym przykładzie nie są połączone, można dodać do nich łącza za pomocą rozwijanego menu Hiperłącza. Dzięki temu osoby odwiedzające będą mogły je kliknąć, aby wczytać nową stronę, lub skorzystać ze znaczników zakotwiczeń, aby przeskoczyć do innej części bieżącej strony.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt menu stosowego:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 7465 pikseli.
  2. Ustaw kolor wypełnienia strony na Brak, a wypełnienie przeglądarki na jednolity kolor. W przykładowej witrynie wypełnienie przeglądarki stanowi kolor jasnobrązowy.
  3. Za pomocą narzędzia Tekst utwórz nową ramkę tekstową. Wpisz słowo Home (Strona główna). Za pomocą opcji formatowania w panelu sterowania dodaj kolor tła do ramki tekstowej. Korzystając z tych samych opcji, wystylizuj tekst wg własnego uznania. Za pomocą uchwytów po bokach przycisku ustaw jego wymiary na ok. 300 × 115 pikseli (szer. × dł.).
Za pomocą opcji w panelu sterowania wystylizuj ramkę tekstową.
Za pomocą opcji w panelu sterowania wystylizuj ramkę tekstową.

  1. Otwórz panel Stany. Zaznacz stan Najazd i dodaj inny kolor (lub zmień stylizację), aby utworzyć przycisk najazdu.
Zaznacz stan Najazd i wystylizuj przycisk, aby jego wygląd różnił się od przycisku ze stanem Zwykły.
Zaznacz stan Najazd i wystylizuj przycisk, aby jego wygląd różnił się od przycisku ze stanem Zwykły.

  1. Po zaktualizowaniu stanu Najazd zaznacz ponownie stan Zwykły.
  2. Otwórz kartę Ruch panelu Efekty przewijania. Podczas gdy przycisk jest zaznaczony, zaznacz opcję Ruch. Ustaw położenie kluczowe, przeciągając uchwyt T lub wprowadzając wartość liczbową. W sekcji Ruch początkowy ustaw ruch elementu w górę z szybkością równą 0,75 szybkości przewijania strony. Pozostaw wartość 0 we wszystkich pozostałych polach.
Na karcie Ruch włącz efekty przewijania, a następnie ustaw kierunek i szybkość ruchu.
Na karcie Ruch włącz efekty przewijania, a następnie ustaw kierunek i szybkość ruchu.

  1. Naciśnij i przytrzymaj klawisz Option/Alt, a następnie przeciągnij przycisk Home w dół strony. W ten sposób powielisz przycisk. Upewnij się że kopia przycisku jest wyrównana w pionie ze źródłowym przyciskiem Home. Gdy oba elementy są wyrównane, a kopia przycisku jest nadal zaznaczona, na środku pojawia się na chwilę ciemnoniebieska linia pomocnicza.
Naciśnij i przytrzymaj klawisz Option/Alt i przeciągnij kopię przycisku tak, aby wyrównać ją w pionie.
Naciśnij i przytrzymaj klawisz Option/Alt i przeciągnij kopię przycisku tak, aby wyrównać ją w pionie.

  1. Przesuń kopię przycisku w dół strony na odległość ok. 460 pikseli od pierwotnego przycisku.
  2. Powtórz kroki 7 i 8, aby powielić przycisk jeszcze dwa razy, tworząc łącznie cztery przyciski rozmieszczone równomiernie na stronie. Za pomocą narzędzia Tekst dokonaj edycji drugiego, trzeciego i czwartego przycisku, nadając im etykiety: Products (Produkty), Photos (Zdjęcia) i Contact Us (Kontakt).
Przeredaguj tekst w ramkach, aby nadać przyciskom różne etykiety.
Przeredaguj tekst w ramkach, aby nadać przyciskom różne etykiety.

W ramach operacji powielania przycisku Home została skopiowana stylizacja ramki tekstowej, jej zawartość oraz ustawienia efektów przewijania. Jeśli zaznaczysz jeden z powielonych przycisków i spojrzysz na panel Efekty przewijania, zauważysz, że ustawienia na karcie Ruch odpowiadają ustawieniom zastosowanym wobec przycisku Home. Położenie kluczowe każdego przycisku znajduje się w odległości 460 pikseli od poprzedniego (takiej samej jak odległość między przyciskami na stronie).

  1. Oblicz łączną długość dla czterech przycisków po wyrównaniu ich w położeniach docelowych, dodając poszczególne długości i odstępy. W przykładowej witrynie każdy z przycisków ma długość 116 pikseli, a odstęp pomiędzy przyciskami wynosi 4 piksele. Oznacza to, że łącza długość pionowa paska menu (po zestawieniu) wynosi 476 pikseli. Za pomocą narzędzia Prostokąt narysuj prostokąt o szerokości sekcji strony i długości paska menu. W tym przykładzie prostokąt ten ma wymiary 931 × 476 pikseli.
  2. Jeśli chcesz powielić projekt z przykładowej witryny, ustaw kolor wypełnienia prostokąta na bladoróżowy w jaśniejszym odcieniu niż stan Zwykły przycisków. Możesz także zaokrąglić narożniki, wprowadzając wartość promienia narożnika w panelu sterowania. W tym przykładzie dla wszystkich czterech narożników ustawiono wartość 10 pikseli.
Wybierz prostokąt i ustaw promień narożnika, aby uzyskać efekt zaokrąglenia.
Wybierz prostokąt i ustaw promień narożnika, aby uzyskać efekt zaokrąglenia.

  1. Za pomocą narzędzia Zaznaczanie wyrównaj prostokąt tak, aby jego górna krawędź znajdowała się w odległości ok. 5094 pikseli od górnej części strony. Upewnij się także, że lewy bok prostokąta jest wyrównany w pionie z lewą stroną sekcji przycisków. W przykładowej witrynie prostokąt i przyciski znajdują się w odległości 14 pikseli od lewej krawędzi strony. Ustawienia te są widoczne po zaznaczeniu elementu i otwarciu panelu Przekształć. Wartość X to odległość od lewej krawędzi (14 pikseli), a wartość Y to odległość od górnej części strony (5094 piksele).
  2. Podczas gdy pokaz slajdów jest zaznaczony, otwórz panel Efekty przewijania i zaznacz opcję Ruch na karcie o tej samej nazwie. Ustaw położenie kluczowe na 4979.
  3. W sekcji Ruch początkowy ustaw ruch elementu w prawo z szybkością równą szybkości przewijania strony (1). We wszystkich pozostałych polach na karcie Ruch ustaw wartość 0.
Zastosuj efekty przewijania, aby prostokąt „wleciał” się na stronę od lewej i przesunął w prawo na swoje miejsce.
Zastosuj efekty przewijania, aby prostokąt „wleciał” się na stronę od lewej i przesunął w prawo na swoje miejsce.

  1. Aby upewnić się, że prostokąt jest ustawiony za czterema przyciskami, zaznacz go i wybierz polecenie Obiekt > Przesuń na spód.
  2. Wybierz polecenie Plik > Umieść, a następnie wybierz plik obrazu i umieść go na stronie kliknięciem. W tym przykładzie umieszczono obraz PNG z przezroczystością, który przedstawia żarówkę. Żarówka jest umieszczona na dużym prostokącie po prawej stronie z dala od obszaru, który zostanie zakryty przyciskami menu. W tym przykładzie obraz jest umieszczony w odległości 501 pikseli od lewej (pozycja X) i 5245 pikseli od górnej części strony (pozycja Y).
  3. Aby upewnić się, że umieszczony obraz jest ustawiony za czterema przyciskami, zaznacz go i wybierz polecenie Obiekt > Przesuń na spód. Celem w tym przypadku jest wyświetlanie umieszczonego obrazu pomiędzy dużym prostokątem a czterema przyciskami.
  4. Podczas gdy umieszczony obraz jest zaznaczony, otwórz kartę Ruch panelu Efekty przewijania i zaznacz opcję Ruch. Ustaw żądaną wartość położenia kluczowego. W przykładowej witrynie jest to 4979 pikseli.
  5. W sekcji Ruch początkowy ustaw kierunek ruchu prostokąta w dół z szybkością równą 0,75 szybkości przewijania. Ustaw wszystkie inne wartości kierunku na 0.
W sekcji Ruch początkowy ustaw ruch w prawo z taką samą szybkością jak szybkość ruchu prostokąta.
W sekcji Ruch początkowy ustaw ruch w prawo z taką samą szybkością jak szybkość ruchu prostokąta.

  1. Za pomocą narzędzia Tekst utwórz ramkę tekstową. W przykładowym pliku ramka tekstowa zawiera następujący tekst: „Stack linked text frames with high contrast roll-overs to create unusual menus”. Zawartość tę możesz zastąpić dowolną inną. Za pomocą opcji formatowania w panelu sterowania wystylizuj tekst wg uznania. W tym przykładzie ramka tekstowa nie ma zastosowanego koloru wypełnienia tła.
  2. Za pomocą narzędzia Zaznaczanie umieść ramkę tekstową na prawo od umieszczonego obrazu. W tym przykładzie ramka tekstowa ma wartość X wynoszącą 357 pikseli (od lewej) i wartość Y wynoszącą 5136 pikseli (od góry). Faktyczne położenie tego elementu zależy od zawartości ramki tekstowej oraz zastosowanych opcji formatowania.
  3. Podczas gdy ramka tekstowa jest zaznaczona, wybierz polecenie Obiekt > Przesuń do tyłu, aby ją ułożyć, lub przesuń ją w panelu Warstwy, aby była wyświetlana pomiędzy czterema przyciskami a dużym prostokątem.
  4. W panelu Efekty przewijania zaznacz opcję Ruch. Ustaw położenie kluczowe, przeciągając uchwyt T lub wprowadzając wartość. W poniższym przykładzie położenie kluczowe jest ustawione na 4979 pikseli – w tym samym miejscu, co umieszczony obraz (żarówka).
  5. W sekcji Ruch początkowy ustaw kierunek ruchu ramki tekstowej w lewo z szybkością równą połowie (0,5) szybkości przewijania strony. Ustaw wszystkie pozostałe pola na 0.
Ramka tekstowa będzie się poruszać w lewo (w kierunku przeciwnym do prostokąta i umieszczonego obrazu) z mniejszą szybkością.
Ramka tekstowa będzie się poruszać w lewo z mniejszą szybkością.

Podstawowa sekcja menu stosowego jest gotowa. Możesz jednak dodać do projektu jeszcze jeden element. Wiąże się to z koniecznością dodania kilku obróconych prostokątów i umieszczenia ich nad prawym dolnym narożnikiem dużego prostokąta w sposób podobny do efektu Przesuwającego się menu, w którym dzięki obróconym prostokątom powstały ukośne paski.

  1. Za pomocą narzędzia Prostokąt narysuj kilka prostokątów o różnej szerokości. Wypełnij prostokąty tym samym kolorem, który stanowi wypełnienie przeglądarki. Dzięki temu prostokąty będą niewidoczne aż do chwili, gdy duży prostokąt przesunie się w prawo na swoje miejsce pod nimi. Jeśli chcesz, możesz utworzyć grupę ukośnych prostokątów, aby sterować nimi jak pojedynczym elementem.
Obróć kilka prostokątów tak, aby utworzyły ukośne paski w prawym dolnym narożniku dużego prostokąta.
Obróć kilka prostokątów tak, aby utworzyły ukośne paski w prawym dolnym narożniku dużego prostokąta.

  1. Jeśli to konieczne, za pomocą panelu Warstwy lub polecenia Obiekt > Przesuń do tyłu ustaw duży prostokąt na spodzie – pod wszystkimi pozostałymi elementami na stronie.
  2. Zachęcamy do regularnego testowania postępów pracy poprzez kliknięcie przycisku Podgląd lub otwarcie strony w przeglądarce i przewinięcie jej w celu sprawdzenia ruchu menu. Po zakończeniu testowania wróć do programu Muse. 

Ruchome tło

Aby uzyskać efekt ruchomego tła, możesz utworzyć serię dużych prostokątów wypełnionych obrazami tła ustawionymi sąsiadująco, które zakryją całą długość strony. W tym przykładzie ustawienia ruchu wprowadzono na karcie Przewiń menu Wypełnienie (a nie na karcie Ruch panelu Efekty przewijania).

Wykonaj poniższe kroki, aby osiągnąć podobny efekt ruchomego tła:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 6254 piksele.

Uwaga:

W tym przykładzie nie ma znaczenia ustawienie koloru wypełnienia przeglądarki, ponieważ strona zostania zakryta prostokątami. Ustaw kolor wypełnienia strony na Brak.

  1. W górnej części strony za pomocą narzędzia Prostokąt narysuj duży prostokąt. W przykładowej witrynie prostokąt ten ma wymiary 1159 × 1312 pikseli (szer. × dł.). Za pomocą narzędzia Zaznaczanie umieść prostokąt pośrodku strony w taki sposób, aby oba jego boki wystawały szeroko poza okno przeglądarki.
  2. Podczas gdy prostokąt jest zaznaczony, w menu Wypełnienie ustaw kolor wypełnienia. W menu Dopasowanie wybierz opcję Sąsiadująco.
Ustaw obraz ustawiony sąsiadująco jako wypełnienie prostokąta.
Ustaw obraz ustawiony sąsiadująco jako wypełnienie prostokąta.

  1. Jeśli chcesz, w menu Efekty ustaw efekt cienia, aby nadać wyrazu obwiedni prostokąta.
  2. Podczas gdy prostokąt jest zaznaczony, otwórz kartę Przewiń w menu Wypełnienie. Zaznacz opcję Ruch, a następnie kliknij i przeciągnij uchwyt T lub wprowadź wartość w polu, aby ustawić położenie kluczowe. W przykładowej witrynie położenie kluczowe jest ustawione na 512 pikseli. Jeśli chcesz, możesz także zwinąć uchwyt i wyrównać go z górną krawędzią prostokąta.
  3. W sekcji Ruch początkowy ustaw kierunek ruchu w dół i w lewo. W obu kierunkach szybkość ma być równa 0,2 szybkości przewijania strony. Użyj tych samych ustawień w sekcji Ruch końcowy. 
Ustaw opcje ruchu na karcie Przewiń w menu Wypełnienie.
Ustaw opcje ruchu na karcie Przewiń w menu Wypełnienie.

  1. Powtórz kroki 2–6, aby utworzyć jeszcze jeden prostokąt z wypełnieniem. Umieść nowy prostokąt bezpośrednio pod pierwszym, tak aby wypełnienie tła nie było widoczne, a między prostokątami nie występował odstęp. Wypełnij nowy prostokąt innym obrazem ustawionym sąsiadująco.
  2. Powtórz krok 7, aby utworzyć trzeci duży prostokąt i umieść go bezpośrednio pod drugim prostokątem. W menu Wypełnienie wybierz dla prostokąta obraz tła ustawiony sąsiadująco. Aby lepiej przyjrzeć się prostokątom i wyrównać je w pionie na stronie, zmniejsz poziom powiększenia strony.
Zmniejsz poziom powiększenia i za pomocą narzędzia Zaznaczanie rozmieść trzy prostokąty w pionie.
Zmniejsz poziom powiększenia i za pomocą narzędzia Zaznaczanie rozmieść trzy prostokąty w pionie.

Uwaga:

W przykładowej witrynie trzeci prostokąt jest dłuższy od pierwszego i drugiego. Przeciągnij uchwyty, aby wydłużyć trzeci prostokąt, lub utwórz czwarty prostokąt, aby wypełnić nim pozostały obszar u dołu strony.  

  1. Podczas gdy drugi prostokąt jest zaznaczony, otwórz kartę Przewiń w menu Wypełnienie. W sekcji Ruch początkowy ustaw kierunek ruchu prostokąta w prawo z szybkością równą 0,3 szybkości przewijania. W sekcji Ruch końcowy użyj tych samych ustawień. W obu polach ruchu pionowego ustaw wartość 0.
W sekcjach Ruch początkowy i Ruch końcowy ustaw ruch drugiego prostokąta w prawo.
W sekcjach Ruch początkowy i Ruch końcowy ustaw ruch drugiego prostokąta w prawo.

  1. Zaznacz trzeci prostokąt i zaktualizuj ustawienia na karcie Przewiń w menu Wypełnienie. W sekcji Ruch początkowy ustaw ruch w górę z szybkością równą 0,25 szybkości przewijania strony oraz ruch w lewo z szybkością równą 0,6 szybkości przewijania strony. Użyj tych samych ustawień w sekcji Ruch końcowy.
  2. Przetestuj stronę, wybierając polecenie Plik > Podgląd strony w przeglądarce. Przewiń stronę do samego końca, aby obserwować ruch każdego z prostokątów po przekątnej. Prostokąty poruszają się też, gdy przewijasz stronę do góry.
  3. Zamknij przeglądarkę i wróć do przestrzeni roboczej programu Muse.

Maski

W tym przykładzie obserwujemy animowany wykres słupkowy. Grafika przedstawiająca różową strzałkę porusza się w górę, przeplatając się między słupkami wykresu. Choć słupki wykresu zdają się „wyrastać” z osi wykresu, tak naprawdę są prostokątami wypełnionymi jednolitym kolorem z zastosowanymi efektami przewijania ruchu i pojawiają się zza większych białych prostokątów (wypełnionych tym samym jednolitym białym kolorem co tło strony).

W tym przykładzie oprócz efektów przewijania wykorzystano także kilka innych technik. Elementy przeplatają się ze sobą za sprawą ustawień w panelu Warstwy. Białe prostokąty są rysowane na elementach graficznych. Gdy białe prostokąty zakrywają wykres słupkowy, słupki i strzałka są niewidoczne (jakby zamaskowane). Białe prostokąty i tabela wykresu są ustawione na 0 w panelu efektów przewijania, dzięki czemu pozostają na swoich miejscach podczas przewijania strony. Wobec słupków oraz grafiki różowej strzałki ustawionych na niższej warstwie zastosowano efekty przewijania ruchu, które powodują ich przesunięcie w górę i wyświetlenie w miarę zestawiania wykresu.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt maski:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 6076 pikseli.
  2. Ustaw wypełnienie strony i przeglądarki na jednolity biały kolor (lub inny preferowany kolor, pamiętając, aby wypełnić nim później także prostokąty maskujące).
  3. Za pomocą narzędzia Prostokąt narysuj na stronie duży prostokąt. W przykładowej witrynie prostokąt ma wymiary 804 × 489 pikseli (szer. × dł.).
  4. Ustaw kolor wypełnienia prostokąta na Brak. Ustaw dowolny kolor obrysu. W menu Obrys dla lewej i dolnej krawędzi prostokąta ustaw grubość obrysu 20, a dla górnej i prawej krawędzi 0, aby je ukryć. W ten sposób powstała baza wykresu słupkowego.
     
W menu Obrys ustaw grubość lewej i dolnej krawędzi prostokąta.
W menu Obrys ustaw grubość lewej i dolnej krawędzi prostokąta.

  1. Podczas gdy prostokąt jest zaznaczony, otwórz kartę Ruch panelu Efekty przewijania. Ustaw wartość położenia kluczowego i wprowadź 0 we wszystkich czterech polach. Dzięki temu ustawieniu prostokąt (a co za tym idzie cały element) pozostanie na miejscu bez względu na to, czy położenie kluczowe zostanie osiągnięte.
Wprowadź 0 we wszystkich polach, aby przypiąć prostokąt do strony.
Wprowadź 0 we wszystkich polach, aby przypiąć prostokąt do strony.

  1. Za pomocą narzędzia Prostokąt narysuj dwa większe prostokąty. Narysuj pierwszy prostokąt równo z lewą krawędzią wykresu. W przykładowej witrynie prostokąt ten ma wymiary 657 × 1810 pikseli (szer. × dł.).
  2. Narysuj drugi prostokąt pod wykresem, równo z jego dolną krawędzią. W przykładowej witrynie prostokąt ten ma wymiary 1002 × 1541 pikseli (szer. × dł.).
  3. Ustaw kolor wypełnienia obu prostokątów na biały (lub taki sam jak wypełnienie przeglądarki) i grubość obrysu równą 0. Za pomocą narzędzia Zaznaczanie wyrównaj oba prostokąty względem dwóch krawędzi wykresu.
Umieść dwa większe prostokąty względem wykresu (z lewej i u dołu).
Umieść dwa większe prostokąty względem wykresu (z lewej i u dołu).

  1. Podczas gdy prostokąty maskujące są zaznaczone, kliknij je prawym przyciskiem i wybierz polecenie Obiekt > Grupowanie, aby utworzyć z nich grupę.
  2. Podczas gdy grupa prostokątów jest zaznaczona, otwórz kartę Ruch panelu Efekty przewijania. Ustaw wartość położenia kluczowego (w przykładzie jest to 1516 pikseli) i wprowadź 0 we wszystkich czterech polach. Dzięki temu ustawieniu grupa białych prostokątów nie przesunie się bez względu na to, czy położenie kluczowe zostanie osiągnięte. Grupa pozostanie na swoim miejscu, podobnie jak zewnętrzna tabela wykresu.
  3. Za pomocą panelu Warstwy tymczasowo ukryj i zablokuj grupę.
  4. Przewiń stronę do obszaru znajdującego się pod grupą i za pomocą narzędzia Prostokąt narysuj pięć prostokątów o takiej samej szerokości. W przykładowej witrynie wszystkie słupki wykresu mają szerokość 74 pikseli i różne długości. Wysokości prostokątów od lewej do prawej wynoszą kolejno 141, 188, 292, 444 i 583 piksele. Wszystkie prostokąty są wypełnione tym samym zielonym kolorem co obrys definiujący lewą i dolną krawędź wykresu.
Rozmieść pięć prostokątów na stronie.
Rozmieść pięć prostokątów na stronie.

  1. Poniżej znajdują się położenia prostokątów wg wartości X i Y:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. Następnie zaznacz każdy z prostokątów od lewej do prawej. Zaznacz każdy z nich, włącz opcję Ruch na karcie Ruch panelu Efekty przewijania, a następnie ustaw poniższe położenia kluczowe:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Podczas gdy wszystkie prostokąty są zaznaczone, zaktualizuj ustawienia w panelu Efekty przewijania, aby w sekcji Ruch początkowy ruch odbywał się w górę z szybkością przewijania strony (1). Ustaw wszystkie pozostałe pola na 0.
     
Ustaw wartości ruchu dla wszystkich pięciu prostokątów w panelu Efekty przewijania.
Ustaw wartości ruchu dla wszystkich pięciu prostokątów w panelu Efekty przewijania.

  1. Umieść na stronie obraz PNG z przezroczystością. W przykładowej witrynie plik PNG zawiera grafikę przedstawiającą strzałkę biegnąca zygzakiem do góry. Plik użyty w przykładzie ma wymiary 695 × 443 piksele (szer. × dł.). Po umieszczeniu pliku na stronie przesuń go do położenia o współrzędnych X: 78 i Y: 3427.
  2. W panelu Warstwy ułóż plik PNG pod pierwszym i trzecim słupkiem (od lewej), ale nad drugim, czwartym i piątym.
Za pomocą panelu Warstwy ułóż obrazek PNG strzałki tak, aby stworzyć efekt przeplotu między słupkami wykresu.
Za pomocą panelu Warstwy ułóż obrazek PNG strzałki tak, aby stworzyć efekt przeplotu między słupkami wykresu.

  1. Podczas gdy obraz strzałki jest zaznaczony, otwórz kartę Ruch panelu Efekty przewijania i zaznacz opcję Ruch. Ustaw wartość położenia kluczowego (w przykładzie jest to 3238 pikseli). W sekcji Ruch początkowy ustaw kierunki ruchu elementu w górę i w prawo z szybkością równą w obu przypadkach 0,25 szybkości przewijania. W obu polach w sekcji Ruch końcowy wprowadź wartość 0.
Zaktualizuj ustawienia ruchu w panelu Efekty przewijania.
Zaktualizuj ustawienia ruchu w panelu Efekty przewijania.

  1. W panelu Warstwy pokaż i odblokuj ukrytą wcześniej grupę dwóch prostokątów. Przesuń grupę na pozostałe elementy na stronie tak, aby były wyświetlana na ich tle. Z racji tego, że grupa znajduje się na wierzchu, będzie ona pełnić funkcję maski, pokazując tylko słupki wykresu i strzałkę pojawiające się w ramce wykresu.
  2. Przetestuj stronę, wybierając polecenie Plik > Podgląd strony w przeglądarce. Przewiń stronę, aby zobaczyć, jak wykres wsuwa się na swoje miejsce i obserwuj, jak białe prostokąty maskujące ukrywają elementy wykresu słupkowego do momentu aż znajdą się one w jego ramce.
  3. Zamknij przeglądarkę i wróć do przestrzeni roboczej programu Muse.

Przykłady witryn z zastosowaniem efektów przewijania

Aby zobaczyć, jak działają efekty przewijania, odwiedź witrynę Demential Lab.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online