Salah sawijining teknik "paling padhang" ing web iki yaiku parallax scrolling. Kita kabeh wis menyang situs sing sampeyan muter roda gulung ing mouse lan isi ing kaca gerakane munggah utawa mudhun utawa tengen kaca nalika sampeyan muter roda mouse.
Kanggo desain web anyar lan desain grafis, teknik iki bisa dadi angel banget kanggo entuk amergo jumlah CSS sing dibutuhake.
Yen sing nggambarake sampeyan, ana sawetara aplikasi sing mung bisa diajeni kanggo seniman grafis. Padha nggunakake pendekatan tata letak kaca sing akrab kanggo kaca-kaca web, sing artine ora ana akeh, yen ana, kode kasebut dilibatake. Salah satunggaling aplikasi ingkang saestu roket dados prominent inggih punika Adobe Muse.
Pakaryan sing digawé dening grafis nggunakake Muse cukup apik tenan lan sampeyan bisa ndeleng sampling apa sampeyan bisa nindakake kanthi ngunjungi Situs Muse The Day . Éwadéné pro web nganggep Muse minangka dolanan "dolanan angin", uga dipigunakaké para perancang kanggo nggawé prototype seluler lan web sing pungkasané bakal dikirim menyang para pangembang ing tim.
Siji teknik sing gampang banget kanggo ngrampungake karo Muse yaiku nampilake parallax lan, yen sampeyan pengin ndeleng versi latihan sing wis rampung Kita bakal mlaku liwat, arahake browser sampeyan menyang kaca iki. Nalika sampeyan nggulung roda nggulung mouse, teks kasebut katon kanthi serep utawa mudhun.
Ayo diwiwiti.
01 saka 07
Nggawe Web Page
Nalika sampeyan mbukak Muse klik link Situs Anyar . Iki bakal mbukak Properti Situs Anyar . Proyèk iki bakal dirancang kanggo aplikasi desktop lan sampeyan bisa milih ing menu pop-down Initial Layout . Sampeyan uga bisa nyetel angka kanggo jumlah Kolom, Gutter Width, Margins, lan Padding. Ing kasus iki, kita ora banget kuwatir lan mung diklik OK .
02 saka 07
Format Page
Nalika ngatur properti situs banjur diklik OK sampeyan dijupuk menyang apa sing disebut tampilan Rencana . Ana kaca Ngarep ing sisih ndhuwur lan Page Master ing ngisor jendhela. Kita mung butuh siji kaca. Kanggo mlebu menyang Design View, kita ngeklik kaca Ngarep sing mbukak antarmuka.
Ing sisih kiwa ana sawetara alat dhasar lan ing sisih tengen ana macem-macem panel sing digunakake kanggo ngolah isi ing kaca. Bebarengan karo ndhuwur iku sifat, sing bisa diterapake ing kaca, utawa apa wae sing dipilih ing kaca kasebut. Ing kasus iki, kita pengin duwe latar ireng. Kanggo ngrampungake iki, kita klik ing chip werna Browser Isi lan milih ireng saka Color Picker.
03 saka 07
Tambah Tèks menyang Page
Langkah sabanjure yaiku nambah sawetara teks menyang kaca. Kita milih Tool Text lan narik metu kothak teks. We nulis tembung "Welcome" lan, ing Properties nyetel teks kanggo Arial, 120 piksel Putih. Pusat Aligned.
Kita banjur pindhah menyang alat pilihan, diklik ing Textbox lan nyetel sawijining posisi Y kanggo 168 piksel saka ndhuwur. Kanthi kothak teks isih dipilih, kita kabuka panel Align lan nampilake kotak teks ing tengah.
Pungkasan, karo kotak teks sing dipilih, kita sijine tombol Option / Alt lan Shift lan digawe papat salinan kothak teks. Kita ganti teks lan posisi Y saben salinan kanggo:
- Kanggo, 871
- Graphics, 1621
- Piranti lunak, 2371
- @ About.com, 3181
Sampeyan bakal sok dong mirsani, nalika sampeyan ngeset lokasi saben kothak teks, kaca bakal ganti ukuran kanggo nyedhiyakake lokasi teks kasebut.
04 saka 07
Tambah Gambar Pemegang
Langkah sabanjure yaiku kanggo nyisipake gambar ing antarane pamblokiran teks.
Langkah pisanan yaiku milih Alat Rectangle lan tarik kothak kita sing mbentang saka sisih pinggir kaca menyang sisih liyane. Kanthi sektengah dipilih, kita nyetel dhuwur dadi 250 piksel lan posisi Y dadi 425 piksel . Rencana iki supaya wong-wong mau tansah ngliwati utawa nglumpukake menyang kaca amba kanggo nampung pangontrolan tampilan browser panganggo. Kanggo ngrampungake iki, kita ngeklik tombol jembar 100% ing Properties. Apa iki ora werna abu-abu nimbang nilai X lan kanggo mesthine gambar tansah 100% saka jembar viewport ing browser.
05 saka 07
Tambahake gambar kanggo Pemegang Gambar
Kanthi Rectangle sing dipilih, kita ngeklik link Isi - ora Chip Warna - lan ngeklik tinta I mage kanggo nambah gambar ing persegi panjang. Ing wilayah fitting , kita milih Scale To Fit lan ngeklik gagang tengah ing wilayah Posisi kanggo njamin gambar kasebut ukurane saka tengah gambar.
Sabanjure, kita nggunakake teknik Option / Alt-Shift kanggo nggawe salinan gambar antarane rong blok teks kapisan, mbukak panel Isi lan ngganti gambar kanggo liyane. Kita nindakake iki kanggo rong foto sing isih ana.
Kanthi gambar ing panggonan, wektu kanggo nambah gerak.
06 saka 07
Nambah Parallax Scrolling
Ana sawetara cara nambah penundaan parallax ing Adobe Muse. Kita bakal nuduhake sampeyan cara prasaja kanggo nglakoni.
Kanthi panel Isi mbukak, klik tab Gulung lan, nalika mbukak, klik kothak Motion .
Sampeyan bakal weruh angka-angka kanggo Motion Initial lan Final . Iki bakal nemtokake manawa gambar kasebut cepet-cepet digandhengake karo Wheel Scroll. Contone, nilai 1,5 bakal mindhah gambar 1.5 kaping luwih cepet tinimbang roda. Kita nggunakake nilai 0 kanggo ngunci gambar ing panggonan.
Gerakan horisontal lan vertikal nemtokake arah gerak. Yen angka sing ana 0, gambar ora bakal diputer manawa panah sampeyan klik.
Nilai tengah- Posisi Kunci - nuduhake titik ing endi gambar mulai mindhah. Baris ing ndhuwur gambar diwiwiti, kanggo gambar iki, 325 piksel saka ndhuwur kaca. Nalika gulung tekan angka kasebut, gambar kasebut wiwit ditindakake. Sampeyan bisa ngganti nilainya kanthi ngganti kasebut ing kotak dialog utawa ngeklik lan nyeret titik ing sisih ndhuwur garis kasebut munggah utawa mudhun.
Baleni maneh kanggo gambar liyane ing kaca.
07 saka 07
Test Browser
Ing titik iki, kita wis rampung. Ing bab pisanan, kanggo alasan sing jelas, yaiku milih File> Save Site . Kanggo test browser, kita mung milih File> Preview Page in Browser . Iki mbukak browser default komputer lan, nalika kaca dibukak, kita mulai nggulung.