Salah sahiji "hottest" téknik dina web kiwari nyaéta ngagulung parallax. Urang sadaya geus ka maranéhanana loka dimana Anjeun muterkeun nu kabayang ngagugulung on mouse anjeun sarta eusi dina kaca ngalir luhur jeung ka handap atawa di sakuliah kaca anjeun muterkeun nu kabayang mouse.
Pikeun maranéhanana anyar pikeun desain web jeung desain grafis, téhnik ieu tiasa exceedingly hésé ngahontal alatan jumlah CSS diperlukeun.
Mun nu ngajelaskeun anjeun, aya sababaraha aplikasi anu bisa ngan daya tarik pikeun seniman grafis. Aranjeunna dasarna make pendekatan perenah kaca wawuh ka kaca web, nu hartina aya teu pisan, lamun sagala, coding ieu aub. Hiji aplikasi anu geus bener rocketed kana prominence nyaeta Adobe Muse.
Karya keur dilakukeun ku pro grafik maké Muse téh rada endah tur Anjeun bisa nempo hiji sampling tina naon anjeun tiasa ngalakukeun ku ngadatangan Muse Loka The Day. Padahal pro web condong hal Muse salaku mahluk sababaraha nurun "kaulinan angin-up", eta oge dipake ku désainer mun nyieun mobile na web purwa anu bakal pamustunganana dibikeun améh pamekar on tim maranéhanana.
Hiji téhnik anu mangrupa incredibly gampang keur ngalengkepan kalayan Muse téh ngagulung parallax na, upami anjeun hoyong ningali versi réngsé tina latihan Urang bakal leumpang ngaliwatan, arahkeun panyungsi anjeun pikeun kaca ieu. Lamun anjeun gulung kabayang ngagugulung mouse anjeun, téks nu sigana mindahkeun kaluhur atanapi kahandap kaca jeung gambar robah.
Hayu urang ngamimitian.
01 of 07
Jieun Page Web
Lamun anjeun ngajalankeun Muse klik link Anyar Loka. Ieu bakal buka Loka Anyar Pasipatan. Proyék ieu bakal dirancang pikeun aplikasi desktop sarta anjeun bisa milih deui dina tata perenah ménu pop-handap mimiti. Anjeun oge bisa nyetel nilai keur Jumlah Kolom, talang Width, margins, sarta Padding. Dina hal ieu, urang teu sangar museur ieu sareng saukur diklik OK.
02 of 07
Pormat Page nu
Lamun anjeun nyetel sipat situs na diklik OK anjeun dibawa ka naon nu disebut view Plan. Aya Imah Kaca di luhur sarta Master Page di handap jandela. Urang ukur diperlukeun hiji kaca. Pikeun meunang mendesain Témbongkeun kami nu Imah kaca nu dibuka panganteur di ganda-diklik.
Di kénca nyaéta hiji parabot dasar sababaraha na on katuhu téh rupa-rupa panels dipaké pikeun ngamanipulasi eusi dina kaca. Sapanjang luhur mangrupakeun sipat, anu bisa dilarapkeun ka kaca, atawa naon bae nu dipilih dina kaca. Dina hal ieu, urang hayang boga latar hideung. Keur ngalengkepan ieu, urang klik dina chip warna Browser eusian tur milih hideung tina Warna Picker.
03 of 07
Tambahkeun téks pikeun Page nu
Lengkah saterusna nyaeta pikeun nambahkeun sababaraha téks kana kaca. Urang dipilih di Alat téks jeung Drew kaluar hiji kotak téks. Urang diasupkeun kecap "Wilujeng sumping" na, di Pasipatan diatur téks pikeun Arial, 120 piksel Yuda. Puseur Blok.
Urang lajeng switched ka alat Pamilihan, diklik dina Textbox tur nyetel posisi Y -na pikeun 168 piksel ti luhur. Kalayan kotak téks masih dipilih, urang dibuka panel align sarta Blok kotak téks ka pusat.
Tungtungna, ku kotak téks dipilih, urang ngayakeun handap kenop Pilihan / Alt na Shift jeung dijieun opat salinan kotak téks. Simkuring robah téks sarta posisi Y unggal salinan ka:
- Ka, 871
- Grafik, 1621
- Software, 2371
- @ About.com, 3181
Anjeun bakal aya bewara, anjeun nyetel lokasi unggal kotak téks, kaca resizes pikeun nampung lokasi téks.
04 of 07
Tambahkeun pananda tempat Gambar
Lengkah saterusna nyaeta nempatkeun Gambar antara blok tulisan.
Lengkah kahiji nya éta pilih Alat Pasagi tur digambar kami hiji kotak anu manjang ti hiji sisi kaca ka séjén. Kalawan sagi opat anu dipilih, urang nangtukeun jangkungna -na pikeun 250 piksel sarta posisi Y -na pikeun 425 piksel. rencana téh boga aranjeunna salawasna manteng atawa keuna kana kaca rubak pikeun nampung a pamaké viewport browser. Keur ngalengkepan ieu, urang diklik tombol lebar 100% di Pasipatan. Naon ieu teu aya hawuk kaluar nilai X sarta pikeun mastikeun gambar sok 100% lebar viewport dina browser anu.
05 of 07
Tambahkeun Gambar jeung pananda tempat Gambar
Jeung Pasagi dipilih kami diklik nu eusian link - sanes Chip Warna - sarta diklik nu tinta I mage pikeun nambahkeun hiji gambar di sagi opat anu. Di wewengkon pas, urang dipilih Skala pikeun nyocogkeun jeung diklik cecekelan puseur di wewengkon Posisi pikeun mastikeun gambar ieu diskalakeun ti puseur gambar.
Salajengna, urang dipake pilihan / teknik Alt-Shift-sered ka nyieun salinan gambar antara dua blok tulisan munggaran, dibuka panel eusian tur swapped gambar pikeun nu sejen. Urang teu ieu keur dua gambar sésana ogé.
Kalawan gambar di tempat, nya éta waktu pikeun nambahkeun gerak dina.
06 of 07
Tambahkeun Parallax ngagulung
Aya sababaraha cara nambahkeun parallax ngagulung dina Adobe Muse. Simkuring bade ningalikeun maneh cara basajan seja eta.
Jeung eusian panel kabuka, klik tab Gulung na, nalika eta muka, klik centang Motion.
Anjeun bakal ningali nilai keur Motion mimiti na Final. Ieu nangtukeun kumaha gancang gambar ngalir dina hubungan jeung Gulung kabayang. Contona, hiji nilai 1,5 baris mindahkeun gambar 1,5 kali leuwih gancang ti kabayang. Urang dipaké ajén 0 kana konci gambar di tempat.
The horisontal tur nangtung panah nangtukeun arah gerak dina. Lamun nilai nu 0 gambar moal budge paduli nu panah anjeun klik.
Tengah value- Posisi Key - mintonkeun titik dimana gambar mimiti mindahkeun. Garis luhur gambar dimimitian, pikeun gambar ieu, 325 piksel ti luhureun kaca. Nalika ngagugulung ngahontal nilai yen gambar dimimitian pikeun mindahkeun. Anjeun tiasa ngarobah nilai ku boh ngarobah eta dina kotak dialog atanapi ku ngaklik sarta nyered titik dina luhureun garis boh kaluhur atanapi kahandap.
Ngulang ieu gambar lianna dina kaca.
07 of 07
browser Test
Dina tahap ieu, kami réngsé. Hal kahiji urang teu, alesan atra, éta pikeun milih payil> Simpen Loka. Pikeun test browser, urang ngan saukur dipilih File> Nilik Page dina Browser. Ieu dibuka browser standar komputer urang jeung, nalika kaca dibuka, urang dimimitian ngagulung.