Een vun den "heiartesten" Techniken am Internet ass haut Parallax. Mir sinn all op déi Siten wou Dir den Scrollrad op der Maus dreift an d'Inhalter op der Säit riicht op oder down oder iwwer d'Säit wéi Dir den Mausrad gedreemt.
Fir dës nei Webdesign a Grafikdesign kann dës Technik ganz schwiereg erreechen wéinst der Quantitéit vum CSS.
Wann Dir dat beschreift, ginn et eng Rei Applikatiounen, déi einfach Grafiker kënne beruffen. Si benotzen grondsätzlech eng vertraute Säit Layout Approche un Websäiten, dat heescht et ass net vill, wann et eng Kodéierung gëtt involvéiert. Eng Uwendung, déi e ganz prominent ugeklickt huet ass Adobe Muse.
D'Aarbechten duerch Grafik-Virdeeler mat Muse ass zimlech erstaunlech a Dir kënnt e Sampling vu wat Dir maache kënnt, andeems Dir op der Muse Site vum Dag kënnt besicht . Obwuel Web-Profien tendéieren dozou, Muse als eng Zort vun "Wind-up-Toys" ze kucken, ass och vun Designeren benotzt fir Mobil a Web Prototypen ze erstellen, déi schliisslech un d'Entwéckler op hir Team ginn.
Eng Technik déi ganz einfach mat Muse ass ze maachen ass Parallax-Scrollen an, wann Dir déi komplett Ofgestëmmung vun der Übung gesitt Dir wëlle weider maachen, bréngen Äre Browser op dës Säit. Wann Dir Är Mauszeechtsroll gedreift, de Text schéngt d'Säit ze wiesselen oder d'Säiten änneren.
Looss eis un.
01 vum 07
Eng Websäit erstellen
Wann Dir Muse starten klickt op den neie Site Link. Dëst erlaabt d' Neits Site Properties . Dëse Projet soll fir eng Desktopsapplikatioun entwéckelt ginn an Dir kënnt et am Popupmenü vum Initial Layout auswielen. Dir kënnt och d'Wäerter fir d'Zuel vu Spalten, Gutterbreedung, Margins, an Padding setzen. An dësem Fall hu mir et net schrecklech betrëfft, a klickt einfach op OK .
02 vum 07
Format vun der Säit
Wann Dir d'Site Eegeschafte festleet an op OK klickt, hutt Dir d'Produkter Plan view genannt. Et ass eng Homepage am Top an en Master Page am ënneschten der Fënster. Mir brauche nëmmen eng Säit. Fir bei Design View ze kommen, hu mir d'Homepage doppelklickt, déi d'Interface erënnert huet.
Linke sinn e puer Basisinstrumenten an op der rietser Säit sinn e puer Panele fir den Inhalt op der Säit ze manipuléieren. Entlooft sinn d'Eegeschafte, déi op d'Säit applizéiere kënnen oder op der Säit gewielt ginn. An dësem Fall wollten mir e schwaarze Background hunn. Fir dëst ze realiséieren, klickt d' Browser-Fillerschaangen -Chips a wählte schwaarz aus dem Faarfpicker.
03 vum 07
Setzt Text op d'Säit
De nächste Schrëtt ass fir e puer Text op der Säit ze addéieren. Mir hunn den Textinstrument ausgewielt an hunn e Textfeld erausgestallt. Mir hunn de Begrëff "Welcome" an an, an de Properties setzen den Text op Arial, 120 Pixel White. Center ausgeriicht.
Mir sinn an d'Selektiounstil ugewisen, op den Textbox geklickt an seng Y Positioun op 168 Pixel vun der Spëtzt gesaat. Mat den Textkast nach ëmmer gewielt, hu mir d' Align a Panel geännert an de Textfeld am Zentrum ausgeriicht.
Endlech, mam Texttextfeld hu mir d' Option / Alt- a Shift- Tastend gedréckt an hunn 4 Exemplare vum Textfeld gemaach. Mir hunn den Text an d'Y Positioun vun all Exemplare geännert:
- Op 871
- Grafik, 1621
- Software, 2371
- @ About.com, 3181
Dir kënnt kucken, wéi Dir de Stand vun all Textfeld festleet, ännert d'Säit fir de Standpunkt vum Text ze ënnerhuelen.
04 vun 07
Bildraum Placeholders addéieren
Den nächste Schrëtt ass d'Biller tëschent den Textblocken ze setzen.
Den éischte Schrëtt ass fir de Rectangle Tool ze wielen an ze weisen eis eng Këscht déi vun enger Säit vun der Säit op déi aner erreecht. Mat der Rectangle ausgewielt, setzen se hir Héichte op 250 Pixel a seng Y Positioun op 425 Pixel . De Plang ass ze hunn ëmmer ze strecken oder op der Säitbreedung ze contractéieren fir de Browservisualiséierungsbrowser ze benotzen. Fir dëst ze maachen, hu mir déi 100% Breet- Knäppchen an den Eegeschaften geklickt. Wat dat maacht ass d'Graue vum X-Wäert a fir datt den Image ëmmer 100% vun der Betrag vun der Betrag ass an engem Browser.
05 vum 07
Biller op Image Placeholders eropzelueden
Mat de Rectangle ausgewielt hutt Dir d' Fill Link geklickt - net de Faarwen-Chip - a klickt d'I mage Tinte fir e Bild am Rechteck ze addéieren. Am Fitting Area wäerte mir Scale To Fit gewielt hunn an klickt den Centerhandel an der Positiounefläche fir datt den Image garantéiert ass aus dem Zentrum vum Bild.
Niewendlech hu mir d' Option / Alt-Shift-Zieh- Technik benotzt fir eng Kopie vum Bild tëschent den éischten zwee Textplaze fir z'ënnerstëtzen, d'Fillplang ze geheffen an d'Bild fir eng aner ze hunn. Mir hunn dat gemaach fir déi zwee aner Biller.
Mat Biller hu se Zäit fir d'Bewegung ze addéieren.
06 vum 07
Add Parallax Scrolling
Et ginn e puer Weeër fir Parallax ze scrollen am Adobe Muse. Mir ginn Iech eng einfach Manéier ze maachen.
Mat der Füllpanel opmaachen, klickt op d' Maustro zréck a klickt op d' Maachtkäschtepunkt op .
Dir wäert Wäerter fir Initial a Final Motion gesinn . Dës bestëmmen, wéi schnell de Bilan am Bezuch op d'Scroll Wheel hënnert. Zum Beispill gëtt e Wäert vun 1,5 de Bild 1.5 Mol méi schnell wéi de Rad. Mir hunn e Wäert vun 0 benotzt fir d'Biller op der Plaz ze sperren.
Déi horizontal a vertikale Pfeile bestëmmen d'Richtung vun der Bewegung. Wann d'Wäerter sinn 0 d'Biller wäerten net an der Regioun këmmeren, egal wat de Pfeil klickt.
D'Mëttelwäert- Taste Positioun - weist de Punkt wou d'Biller begéinen. D'Linn iwwer dem Image fänkt fir dëst Bild 325 Pixel aus der Spëtzt vun der Säit. Wann d'Scrollen dëse Wäert erreecht gëtt, fänkt d'Bild un. Dir kënnt dëse Wäert änneren andeems se et am Dialogfeld geännert ginn oder andeems Dir den Punkt an der Spëtzt vun der Linn entweder op oder down dréckt.
Wiederhol dat fir déi aner Biller op der Säit.
07 vum 07
Browser Test
Zu dësem Zäitpunkt hu mir fäerdeg gemaach. Dat éischt wat mer gemaach hunn, aus evidenter Grënn, wär d' Datei "Site späicheren" ze wielen . Browser-Test, mir wäerten einfach Datei> Preview Page am Browser gewuer ginn . Dëst huet de Standardbrowser vum Computer gefrot a wéi d'Säit opgemaach gouf, hu mer ugefaangen duerch de Scrollen.