Adobe Muse-dan foydalanib, Parallax kayfini yaratish

Bugungi kunda vebdagi "eng issiq" metodlardan biri parallaks kayfiyatidir. Biz barchamiz sichqoncha bo'ylab aylanadigan g'ildirakni aylantiradigan va sahifadagi kontentni yuqoriga va pastga yoki sahifaning bo'ylab sichqoncha g'ildiragini aylantirganingizda aylantirdik.

Veb-dizayn va grafik dizayni uchun yangi bo'lganlar uchun, bu texnik talab qilinadigan CSS miqdori tufayli erishish juda qiyin bo'lishi mumkin.

Agar bu sizni ta'rif qilsa, grafik san'atkorlarga murojaat qilishi mumkin bo'lgan bir nechta ilovalar mavjud. Ular, asosan, veb-sahifalarga taniqli sahifa tartibini ishlatishadi, ya'ni kodlash mavjud bo'lsa, juda ko'p narsa yo'q. Haqiqatan ham mashhurlikka aylangan dastur Adobe Muse hisoblanadi.

Muzeyni ishlatib, grafika mutaxassisi tomonidan olib borilayotgan ishlar juda hayratlanarli va siz "Muse" saytiga tashrif buyurib, nima qilishingiz mumkinligini bilib olishingiz mumkin. Veb-hunar egalari Museni "shamol o'yinchoq" deb hisoblashlari bilan birga, dizaynerlar tomonidan mobil va veb-prototiplar yaratishda foydalaniladi, ular oxir-oqibatda ishlab chiqaruvchilarga o'z jamoalarida topshiriladi.

Muse bilan bajarish juda oson bo'lgan usullardan biri parallax kaydırmasıdır va agar siz mashqlar tugallangan versiyasini ko'rishni xohlasangiz, biz orqali o'tamiz, brauzeringizni ushbu sahifaga yo'naltiring. Sichqoncha aylantirish g'ildiragini siljitishganda, matn sahifani yuqoriga yoki pastga siljitadi va tasvirlar o'zgaradi.

Qani boshladik.

01dan 07 gacha

Veb-sahifa yaratish

Muse-ni ishga tushirganingizda, yangi sayt havolasini bosing. Bu yangi sayt xususiyatlarini ochadi. Ushbu loyiha ish stoli dasturiga mo'ljallangan bo'lib, uni Bosh Layout pop-up menyusida tanlashingiz mumkin. Bundan tashqari, qiymatlarni Sütunlar, Olukluk kengligi, Yon bo'shliqlar va Padding soniga o'rnatishingiz mumkin. Bunday holda, biz bu bilan juda xavotirlanmagan edik va OK ni bosdik.

02 ning 07

Sahifani formatlash

Sayt xususiyatlarini o'rnatganingiz va OK ni bosganingizda, siz Muzika ko'rinishi deb nomlangan narsaga qo'ydingiz. Yuqoridagi Bosh sahifa va deraza pastki qismida usta sahifa mavjud. Faqat bitta sahifa kerak. Dizayn ko'rinishiga o'tish uchun interfeysni ochgan Bosh sahifani ikki marta chertdik.

Chapda bir nechta asosiy vosita va o'ng tomonda sahifadagi kontentni boshqarish uchun ishlatiladigan turli panellar mavjud. Yuqorida yuqorida ko'rsatilgan sahifaga yoki sahifada tanlangan narsalarga qo'llaniladigan xususiyatlar mavjud. Bu holatda biz qora fonga ega bo'lishni xohladik. Buni amalga oshirish uchun brauzerda to'ldirish rangli chiziqni bosamiz va Rang tanlash panelidan qora tanlaymiz.

03 ning 07

Sahifaga matn qo'shish

Keyingi qadam, sahifaga matn qo'shishdir. Biz matnni tanladik va matn qutisini chiqarib oldik. "Xush kelibsiz" degan so'zni kiritdik va Xususiyatlar-da Arial-ga matnni 120 piksel oq rangga qo'ydi. Markazi hizalanadi.

Tanlov vositasiga o'tdik, matn qutisini ochdik va Y pozitsiyasini yuqoridan 168 pikselgacha o'rnatdik. Matn qutisi hali tanlanmagan bo'lsa, biz Hizalanish panelini ochdik va matn qutisini markazga aylantirdik.

Nihoyat, tanlangan matn qutisi bilan biz Variant / Alt va Shift tugmalarini bosib ushladik va matn qutisining to'rt nusxasini yaratdik. Har bir replikatsiya matnini va Y pozitsiyasini quyidagicha o'zgartirdik:

Siz har bir matn maydonining o'rnini belgilaganingizda matnni joylashtirish uchun sahifa qayta o'lchamlarini sezasiz.

04 dan 07 gacha

Rasmni ushlab turuvchilarni qo'shish

Keyingi qadam, matn bloklari orasidagi rasmni qo'yishdir.

Birinchi qadam, to'rtburchak vositasini tanlash va sahifaning bir chetidan boshqasiga cho'zilgan bir quti olishdir. To'rtburchak tanlanganidan keyin uning balandligi 250 piksel va Y pozitsiyasini 425 pikselgacha o'rnatdik. Reja, foydalanuvchining brauzerining tashqi ko'rinishini moslash uchun sahifaning kengligi har doim uzaytirishi yoki shartnoma bo'lishi kerak. Buni amalga oshirish uchun biz Properties-da 100% kenglik tugmasini bosdik. Bu nimani anglatadi, X qiymatidan kulrang va tasvirni brauzerda har doim 100% viewport kengligining bo'lishini ta'minlash.

05 dan 07 gacha

Rasm joylashtirish egalariga rasm qo'shish

To'rtburchak tanlanganidan so'ng biz To'rtburchakda rasm qo'shish uchun I- nayrang siyohini bosib, to'ldirish- ni bosgandik. Fitting maydonida rasmni markazdan o'lchab olishini ta'minlash uchun Fit for Scale (Fit for Scale) ni tanladik va Position (Obyekt) maydonidagi markani ushlab turdik.

So'ngra, dastlabki ikkita matn bloklari orasidagi rasmning nusxasini yaratish uchun Option / Alt-Shift-drag uslubini qo'lladik, to'ldirish panelini ochdik va tasvirni boshqasiga o'zgartirdik. Buni qolgan ikkita rasm uchun ham qildik.

Joylarda tasvirlar bilan harakatni qo'shish vaqti keldi.

07 of 07

Parallax kaytini qo'shish

Adobe Muse-ga paralakka o'tishni qo'shishning bir qancha usullari mavjud. Sizga buni qilishning oddiy usulini ko'rsatamiz.

To'ldirish paneli yoqilgan bo'lsa, O'tkazish yorlig'ini bosing va ochilganda Harakat nazorati katagiga bosing .

Dastlabki va oxirgi harakatlar uchun qiymatlarni ko'rasiz. Ular tasvirning harakatlanuvchi g'ildirakka nisbatan qanchalik tez harakat qilayotganligini aniqlaydi. Masalan, 1,5 qiymatida suratni g'ildirakka nisbatan 1,5 barobar tezroq harakatlantiradi. Rasmlarni joyida saqlash uchun 0 qiymatini ishlatdik.

Landshaft va vertikal strelkalar harakatning yo'nalishini aniqlaydi. Agar qiymatlar 0 bo'lsa, siz qaysi o'qni bosganingizdan qat'i nazar, tasvirlar siltanmaydi.

O'rtacha qiymat - Klaviatura holati - tasvirlar harakatga keladigan nuqtani ko'rsatadi. Tasvirning yuqorisidagi chiziq, bu tasvir uchun sahifa boshidan 325 piksel boshlanadi. O'tkazish bu qiymatga yetgach, tasvir harakatlana boshlaydi. Ushbu qiymatni uni muloqot oynasida o'zgartirish yoki chiziqning yuqorisidagi nuqtani yuqoriga yoki pastga siljitish orqali sudrab olishingiz mumkin.

Buni sahifadagi boshqa tasvirlar uchun takrorlang.

07 of 07

Brauzer testi

Shu nuqtada biz tugatdik. Biz aniq bir sababga ko'ra, biz Fayl> Saytni saqlash- ni tanlagan edik. Brauzer sinovi uchun biz Brauzerda Fayl> Preview Page ni tanladik. Bu bizning kompyuterimizning standart brauzerini ochdi va biz sahifani ochganda biz o'ynashni boshladik.