Jedną z "najgorętszych" technik w Internecie jest przewijanie paralaksy. Wszyscy byliśmy w tych miejscach, w których obracasz kółkiem myszy, a zawartość strony przesuwa się w górę iw dół lub na drugą stronę podczas obracania kółka myszy.
Dla tych, którzy dopiero zaczynają projektowanie stron internetowych i projektowanie graficzne, ta technika może być niezwykle trudna do osiągnięcia ze względu na wymaganą ilość CSS.
Jeśli to cię opisuje, istnieje wiele aplikacji, które mogą po prostu przemawiać do grafików. Zasadniczo stosują oni znane strony do stron internetowych, co oznacza, że nie ma zbyt wiele, jeśli w ogóle, kodowania. Jedną z aplikacji, która naprawdę zyskała na popularności, jest Adobe Muse.
Praca wykonywana przez profesjonalistów graficznych za pomocą Muse jest niesamowita i możesz zobaczyć, co możesz zrobić, odwiedzając Muse Miejsce Dnia . Choć profesjonaliści internetowi uważają, że Muse jest czymś w rodzaju "zabawki na zakręcie", jest ona także wykorzystywana przez projektantów do tworzenia prototypów mobilnych i internetowych, które zostaną ostatecznie przekazane deweloperom w ich zespole.
Jedna technika, która jest niesamowicie łatwa do osiągnięcia dzięki Muse, to przewijanie paralaksy i, jeśli chcesz zobaczyć ukończoną wersję ćwiczenia. Po przewinięciu kółka myszy tekst wydaje się poruszać w górę lub w dół strony, a obrazy się zmieniają.
Zacznijmy.
01 z 07Utwórz stronę internetową
Po uruchomieniu Muse kliknij przycisk Nowa strona połączyć. To otworzy okno Nowe właściwości witryny. Ten projekt zostanie zaprojektowany dla aplikacji komputerowej i możesz go wybrać w Początkowy układ menu rozwijane. Można również ustawić wartości dla liczby kolumn, szerokości marginesów, marginesów i wypełnienia. W tym przypadku nie byliśmy tym zaniepokojeni i po prostu kliknęliśmy dobrze.
Formatuj stronę
Po ustawieniu właściwości witryny i kliknięciu dobrze Zostałeś zabrany do tego, co się nazywa Plan widok. Tam jest Dom strona u góry i Strona główna w dolnej części okna. Potrzebowaliśmy tylko jednej strony. Aby przejść do widoku projektu, dwukrotnie kliknęliśmy stronę główną, która otworzyła interfejs.
Po lewej stronie znajduje się kilka podstawowych narzędzi, a po prawej znajdują się różne panele służące do manipulowania treścią na stronie. W górnej części znajdują się właściwości, które można zastosować do strony lub dowolne elementy wybrane na stronie. W tym przypadku chcieliśmy mieć czarne tło. Aby to osiągnąć, klikamy na Wypełnienie przeglądarki układ koloru i wybrał kolor czarny z Próbnika kolorów.
03 z 07Dodaj tekst do strony
Następnym krokiem jest dodanie tekstu do strony. Wybraliśmy Narzędzie tekstowe i wyrysował pole tekstowe. Wprowadziliśmy słowo "Witamy" i we właściwościach ustawiamy tekst na Arial, 120 pikseli biały. Wyrównany środek.
Następnie przełączyliśmy się do narzędzia Zaznaczanie, kliknęliśmy pole tekstowe i ustawiliśmy jego Pozycja Y do 168 piksele od góry. Po zaznaczeniu pola tekstowego otworzyliśmy plik Wyrównaj panel i wyrównane pole tekstowe do centrum.
Ostatecznie, po zaznaczeniu pola tekstowego, przytrzymaliśmy Opcja / Alt i Przesunięcie klucze i wykonane cztery kopie pola tekstowego. Zmieniliśmy tekst i pozycję Y każdej kopii na:
- Do, 871
- Grafika, 1621
- Oprogramowanie, 2371
Zauważysz, że podczas ustawiania położenia każdego pola tekstowego, rozmiar strony zmienia się w celu dostosowania położenia tekstu.
04 z 07Dodaj placeholders obrazów
Następnym krokiem jest umieszczenie obrazów między blokami tekstu.
Pierwszym krokiem jest wybranie Narzędzie Prostokąt i narysuj nasze pudełko, które rozciąga się od jednej strony strony do drugiej. Po wybraniu prostokąta ustawiamy jego wysokość do 250 pikseli i jego Pozycja Y do 425 pikseli. Plan polega na tym, aby zawsze rozciągać lub zmniejszać szerokość strony w celu dostosowania do okna przeglądarki użytkownika. Aby to osiągnąć, kliknęliśmy przycisk 100% szerokości przycisk w oknie Właściwości. To, co to robi, jest szarej wartości X i upewnić się, że obraz jest zawsze 100% szerokości rzutni w przeglądarce.
05 z 07Dodaj obrazy do obrazków
Po wybraniu Rectangle kliknęliśmy przycisk Wypełnij link - nie kolor chip - i kliknąłem Iatrament mag , aby dodać obraz do prostokąta. w Dopasowywanie obszar, który wybraliśmy Skalowanie w celu dopasowania i kliknąłem uchwyt środkowy w Pozycja obszar, aby obraz był skalowany od środka obrazu.
Następnie użyliśmy Option / Alt-Shift-przeciągnij technikę tworzenia kopii obrazu między pierwszymi dwoma blokami tekstu, otworzyłem panel Wypełnienie i zamieniłem obraz na inny. Zrobiliśmy to także dla pozostałych dwóch obrazów.
Po wprowadzeniu obrazów nadszedł czas na dodanie ruchu.
06 07Dodaj przewijanie paralaksy
Istnieje kilka sposobów dodawania przewijania paralaksy w programie Adobe Muse. Pokażemy Wam prosty sposób na zrobienie tego.
Po otwarciu panelu wypełnienia kliknij przycisk Przewiń kartę i po otwarciu kliknij przycisk Pole wyboru ruchu.
Zobaczysz wartości dla Inicjał i Końcowy ruch. Określają one szybkość poruszania się obrazu względem koła przewijania. Na przykład wartość 1,5 spowoduje przesunięcie obrazu 1,5 raza szybciej niż koło. Użyliśmy wartości 0, aby zablokować obrazy w miejscu.
The Strzałki poziome i pionowe określić kierunek ruchu.Jeśli wartości wynoszą 0, obrazy nie będą się przesuwały niezależnie od tego, którą strzałkę klikniesz.
Średnia wartość – Kluczowa pozycja - pokazuje punkt, w którym obrazy zaczynają się poruszać. Linia powyżej obrazu zaczyna się, dla tego obrazu, 325 pikseli od górnej krawędzi strony. Kiedy scroll osiągnie tę wartość, obraz zaczyna się poruszać. Możesz zmienić tę wartość, zmieniając ją w oknie dialogowym lub klikając i przeciągając punkt u góry linii w górę lub w dół.
Powtórz to dla pozostałych obrazów na stronie.
07 z 07Test przeglądarki
W tym momencie skończyliśmy. Pierwszą rzeczą, którą zrobiliśmy, z oczywistych względów, było wybranie Plik> Zapisz witrynę. Do testu przeglądarki po prostu wybraliśmy Plik> Podgląd strony w przeglądarce. Otworzyło się domyślna przeglądarka naszego komputera i po otwarciu strony zaczęliśmy przewijanie.
