Bagaimana Membuat Parallax Scrolling Menggunakan Adobe Muse

Salah satu teknik "paling hangat" di web hari ini adalah menatal paralaks. Kita semua pernah ke laman-laman di mana anda memutarkan roda skrol pada tetikus anda dan kandungan pada halaman bergerak ke atas dan ke bawah atau merentasi halaman sambil anda memutarkan roda tetikus.

Bagi mereka yang baru dalam reka bentuk web dan reka bentuk grafik, teknik ini boleh menjadi sangat sukar untuk dicapai kerana jumlah CSS diperlukan.

Jika itu menggambarkan anda, terdapat beberapa aplikasi yang mungkin hanya menarik kepada artis grafik. Mereka pada asasnya menggunakan pendekatan susun atur halaman yang biasa untuk halaman web, yang bermaksud tidak banyak, jika ada, pengekodan terlibat. Satu aplikasi yang telah benar-benar meraih keunggulan ialah Adobe Muse.

Kerja-kerja yang dilakukan oleh kad grafik menggunakan Muse agak luar biasa dan anda boleh melihat persampelan apa yang boleh anda lakukan dengan melawat Laman Muse Hari Ini . Walaupun sesetengah web cenderung untuk menganggap Muse sebagai sejenis "mainan angin", ia juga digunakan oleh pereka untuk membuat prototaip mudah alih dan web yang akhirnya akan diserahkan kepada pemaju pada pasukan mereka.

Satu teknik yang sangat mudah dicapai dengan Muse adalah menatal paralaks dan, jika anda mahu melihat versi latihan yang lengkap Kami akan berjalan melalui, arahkan pelayar anda ke halaman ini. Apabila anda melancarkan roda skrol tetikus anda, teks itu seolah-olah bergerak ke atas atau ke bawah halaman dan perubahan imej.

Mari kita mulakan.

01 dari 07

Buat Halaman Web

Apabila anda melancarkan Muse klik pautan Tapak Baru . Ini akan membuka Hartanah Tapak Baru . Projek ini akan direka bentuk untuk aplikasi desktop dan anda boleh memilihnya dalam menu pop-down Layout Awal . Anda juga boleh menetapkan nilai untuk bilangan Lajur, Lebar Panjang, Margin, dan Padding. Dalam kes ini, kami tidak begitu bimbang dengan ini dan hanya klik OK .

02 dari 07

Format Halaman

Apabila anda menetapkan sifat tapak dan mengklik OK, anda dibawa ke pandangan yang dipanggil Rancangan . Terdapat halaman Utama di bahagian atas dan Halaman Sarjana di bahagian bawah tetingkap. Kami hanya memerlukan satu halaman. Untuk sampai ke Design Design, kami double-klik Laman Utama yang membuka antara muka.

Di sebelah kiri adalah beberapa alat asas dan di sebelah kanan adalah pelbagai panel yang digunakan untuk memanipulasi kandungan pada halaman. Di sepanjang bahagian atas adalah sifat, yang boleh digunakan pada halaman, atau apa saja yang dipilih pada halaman. Dalam kes ini, kami mahu mempunyai latar belakang hitam. Untuk mencapai ini, kami mengklik pada cip warna Penyemak Imbas dan memilih hitam dari Pemilih Warna.

03 dari 07

Tambah Teks ke Halaman

Langkah seterusnya ialah menambahkan beberapa teks ke halaman. Kami memilih Alat Teks dan mengeluarkan kotak teks. Kami memasuki perkataan "Selamat Datang" dan, dalam Properties menetapkan teks kepada Arial, 120 piksel Putih. Pusat Diselaraskan.

Kami kemudian beralih ke alat Pemilihan, klik pada Textbox dan tetapkan kedudukan Ynya kepada 168 piksel dari bahagian atas. Dengan kotak teks yang masih dipilih, kami membuka panel Align dan menyelaraskan kotak teks ke pusat.

Akhir sekali, dengan kotak teks dipilih, kami menahan kekunci Opsyen / Alt dan Shift dan membuat empat salinan kotak teks. Kami menukar teks dan kedudukan Y masing-masing salinan kepada:

Anda akan melihat, semasa anda menetapkan lokasi setiap kotak teks, saiz halaman diubah untuk mengakomodasi lokasi teks.

04 dari 07

Tambah Pemegang tempat Imej

Langkah seterusnya adalah untuk meletakkan imej di antara blok teks.

Langkah pertama ialah memilih Alat Rectangle dan lukiskan kotak kami yang terbentang dari satu sisi halaman ke yang lain. Dengan segi empat tepat yang dipilih, kami menetapkan ketinggiannya kepada 250 piksel dan kedudukan Ynya kepada 425 piksel . Rancangannya adalah untuk membolehkan mereka sentiasa menghulurkan atau membuat kontrak ke lebar halaman untuk menampung viewport pelayar pengguna. Untuk mencapai ini, kami mengklik butang lebar 100% di Properties. Apa yang dilakukannya adalah kelabu daripada nilai X dan untuk memastikan imej sentiasa 100% lebar paparan viewport dalam pelayar.

05 dari 07

Tambah Imej kepada Pemegang Tempat Imej

Dengan Rectangle yang dipilih kami mengklik pautan Isi - bukan Chip Warna - dan mengklik dakwat I mage untuk menambah imej di segi empat tepat. Di kawasan pemasangan , kami memilih Skala Ke Fit dan mengklik pemegang pusat di kawasan Kedudukan untuk memastikan imej dimensi dari pusat imej.

Seterusnya, kami menggunakan teknik Option / Alt-Shift untuk menyalin salinan imej antara dua blok teks pertama, membuka panel Isi dan menukar imej untuk yang lain. Kami melakukan ini untuk dua imej yang tersisa.

Dengan imej di tempat, sudah tiba masanya untuk menambah gerakan.

06 dari 07

Tambah Parallax Scrolling

Terdapat beberapa cara untuk menambah menatal paralaks di Adobe Muse. Kami akan menunjukkan cara mudah untuk melakukannya.

Dengan panel Isi dibuka, klik tab Skrol dan, apabila ia dibuka, klik kotak pilihan Motion .

Anda akan melihat nilai untuk Gerakan Awal dan Akhir . Ini menentukan berapa pantas imej bergerak berhubung dengan Wheel Scroll. Sebagai contoh, nilai 1.5 akan menggerakkan imej 1.5 kali lebih cepat daripada roda. Kami menggunakan nilai 0 untuk mengunci imej di tempat.

Anak panah mendatar dan menegak menentukan arah gerakan. Jika nilai adalah 0, imej tidak akan berubah tanpa mengira anak panah yang anda klik.

Nilai tengah - Kedudukan Utama - menunjukkan titik di mana imej mula bergerak. Garis di atas imej bermula, untuk imej ini, 325 piksel dari bahagian atas halaman. Apabila skrol mencapai nilai itu imej mula bergerak. Anda boleh mengubah nilai ini dengan mengubahnya di dalam kotak dialog atau dengan mengklik dan menyeret titik di bahagian atas garisan sama ada atas atau bawah.

Ulangi ini untuk imej lain pada halaman.

07 dari 07

Ujian Penyemak Imbas

Pada ketika ini, kami telah selesai. Perkara pertama yang kami lakukan, atas alasan yang jelas, adalah memilih Fail> Simpan Tapak . Untuk ujian penyemak imbas, kami hanya memilih Fail> Halaman Pratonton dalam Penyemak Imbas . Ini membuka penyemak imbas lalai komputer kami dan, apabila halaman dibuka, kami mula menatal.