Kako kreirati Parallax Scrolling Koristeći Adobe Muse

Jedna od "najtoplijih" tehnika na webu danas je skretanje parallaks. Svi smo bili na onim sajtovima na kojima rotirate točkići za pomeranje na vašem mišu i sadržaj na stranici se kreće nagore ili nadole ili preko stranice dok rotirate točkić miša.

Za one nove na web dizajn i grafički dizajn, ova tehnika može biti izuzetno teško postići zbog količine CSS-a koji je potreban.

Ako vas to opisuje, postoji veliki broj aplikacija koje se mogu obratiti grafičkim umetnicima. Oni u osnovi koriste poznati izgled stranice na web stranice, što znači da nema mnogo, ako postoji, kodiranja. Jedna aplikacija koja je zaista istaknuta u vidu je Adobe Muse.

Rad koji obavljaju grafički profesori koristeći Muse je sasvim neverovatan i možete videti uzorak onoga što možete učiniti posećujući Muse sajt dana . Iako web profesionalci smatraju da je Muse neka vrsta "igračaka za vetru", dizajneri ga koriste i za kreiranje mobilnih i web prototipova koji će na kraju biti predati programerima u njihovom timu.

Jedna tehnika koja je neverovatno lako postići s muzikom je paralakalno pomicanje i, ako želite da vidite kompletnu verziju vežbe, idemo kroz vašu pretragu na ovu stranicu. Kada okrenete točkić za pomeranje miša, tekst izgleda da se kreće nagore ili nadole, a slike se menjaju.

Hajde da počnemo.

01 od 07

Kreirajte Web stranicu

Kada pokrenete Muse, kliknite na link za Novo mesto . Otvaraće se nove osobine . Ovaj projekat će biti dizajniran za desktop aplikaciju i možete ga odabrati u padajućem meniju Initial Layout . Takođe možete podesiti vrednosti za broj kolona, ​​širine žljebova, margina i paddinga. U ovom slučaju, nismo bili strašno zabrinuti i jednostavno smo kliknuli OK .

02 od 07

Formatirajte stranicu

Kada postavite svojstva lokacije i kliknete OK, odvedeni ste u ono što se zove Plan pogled. Postoji Glavna stranica na vrhu i Glavna stranica na dnu prozora. Trebalo nam je samo jedna stranica. Da biste došli do Design View-a, dvaput smo kliknuli na početnu stranicu koja je otvorila interfejs.

Sa leve strane nalaze se nekoliko osnovnih alata, a desno su razne panele koje se koriste za manipulaciju sadržajem na stranici. Na vrhu su osobine koja se mogu primeniti na stranicu ili bilo šta odabrano na stranici. U ovom slučaju želeli smo da imamo crnu pozadinu. Da bi ovo postigli, kliknuli smo na obojeni čip Browser Fill i izabrali crnu od Color Picker-a.

03 od 07

Dodajte tekst na stranicu

Sledeći korak je dodavanje nekog teksta na stranicu. Izabrali smo tekstualnu alatku i izvadili okvir za tekst. Ušli smo u reč "Dobrodošli" i, u Properties postavili tekst na Arial, 120 pixels White. Centar poravnat.

Zatim smo prešli na alatku Selection, kliknuli na Textbox i postavili Y poziciju na 168 piksela sa vrha. Sa još uvek izabranim tekstom, otvorili smo panel Align i poravnuli tekstualno polje sa centrom.

Na kraju, uz odabrano polje za tekst zadržali smo tastere Option / Alt i Shift i napravili četiri kopije polja za tekst. Promenili smo tekst i poziciju Y svake kopije na:

Primetićete, pošto ste postavili lokaciju svakog polja s tekstom, stranica promeni veličinu da bi se prilagodila lokacija teksta.

04 od 07

Dodajte podnosioce slika

Sledeći korak je postavljanje slika između tekstualnih blokova.

Prvi korak je odabir Alatke pravougaonika i nacrtati našu kutiju koja se proteže sa jedne strane stranice na drugu. Sa izabranim pravougaonicom postavili smo visinu do 250 piksela i njegovu poziciju Y na 425 piksela . Plan je da se uvek razvijaju ili ugovoraju širina stranice kako bi se prilagodio pogledu pretraživača pregledača korisnika. Da bismo to postigli, kliknuli smo dugme 100% širine u Properties. Ono što ovo čini je siva od X vrijednosti i osigurati da je slika uvijek 100% širine pogleda u pretraživaču.

05 od 07

Dodajte slike u slike vlasnika slika

Sa odabranim pravougaonikom kliknuli smo na vezu Napuniti - a ne na Chip za boje - i kliknula na mastilo I mage da dodam sliku u pravougaonik. U oblasti Fitting izabrali smo Scale To Fit i kliknuli na središnju dršku u području Pozicije da bi se osiguralo da se slika pomjeri iz centra slike.

Zatim smo koristili tehniku Option / Alt-Shift-drag za kreiranje kopije slike između prva dva tekstualna bloka, otvorili panel za popunjavanje i zamenili sliku za drugu. Uradili smo to za preostale dve slike.

Sa slikama na mjestu, vreme je da dodate pokret.

06 od 07

Dodajte Parallax Scrolling

Postoji niz načina dodavanja parallaks skroliranja u Adobe Museu. Pokazaćemo vam jednostavan način da to uradite.

Kada je panel otvoren, kliknite na scroll karticu i, kada se otvori, kliknite na polje za potvrdu Motion .

Videćete vrednosti za početni i završni zahtev . Oni određuju koliko brzo se slika pomera u odnosu na točkić za pomeranje. Na primjer, vrijednost 1,5 pomjeriće sliku 1,5 puta brže od volana. Koristili smo vrednost od 0 za zaključavanje slika na mestu.

Horizontalne i vertikalne strelice određuju pravac kretanja. Ako su vrednosti 0, slike se neće prebacivati ​​bez obzira na koju strelicu kliknete.

Položaj ključne pozicije - pokazuje tačku u kojoj se slike kreću. Linija iznad slike počinje, za ovu sliku, 325 piksela sa vrha stranice. Kada svitak dostigne tu vrednost, slika počinje da se pomera. Možete promeniti ovu vrijednost promjenom u dijalogu ili klikom i povlačenjem tačke na vrhu linije, gore ili dole.

Ponovite ovo za ostale slike na stranici.

07 od 07

Testiranje pregledača

U ovom trenutku smo završili. Prvo što smo uradili, iz očiglednih razloga, bilo je odabrati File> Save Site . Za testiranje pretraživača jednostavno smo izabrali File> Preview Page u pretraživaču . Ovo je otvorilo podrazumevani pretraživač našeg računara, a kada se stranica otvorila, započeli smo skrolovanje.