İnternetdə "isti" üsullardan biri bu gün paralaks kaydırmadır. Siçan təkərini döndüyünüzdə, siçan üzərində sürüşmə çarxını döndərdiyiniz və səhifənin məzmunu yuxarı və ya aşağıya və ya səhifəyə doğru hərəkət etdiyiniz saytlara gəldik.
Veb dizayn və qrafik dizayn üçün yeni olanlar üçün bu texnika tələb olunan CSS miqdarı səbəbindən nail olmaq üçün çox çətin ola bilər.
Əgər siz təsvir etsəniz, yalnız qrafik rəssamlara müraciət edə biləcək bir sıra proqramlar var. Onlar əsasən veb səhifələrə tanış olan bir səhifə düzəlişindən istifadə edirlər, yəni kodlaşdırma olduqca çox deyildir. Həqiqətən ön plana çıxan bir tətbiq Adobe Muse'dur.
Muse istifadə edərək qrafika işçiləri tərəfindən görülən işlər olduqca şaşırtıcıdır və günün Muse saytını ziyarət edərək nə edə biləcəyinizi nümunə götürə bilərsiniz. Vebsaytlar, Musei bir növ "küləyin oyuncağı" kimi qiymətləndirirlərsə də, dizaynerlər tərəfindən nəticədə komanda üzərində inkişaf edənlərə veriləcək mobil və veb prototipləri yaratmaq üçün istifadə olunur.
Muse ilə başa çatdırmaq üçün inanılmaz dərəcədə asan olan bir üsul paralaks scrolling və həyata keçirilməsi tamamlanmış versiyası görmək istəyirsinizsə, biz gəzmək olacaq, brauzerinizin bu səhifəyə baxın. Siçanınızın kaydırmalı təkərini gəzdirəndə, mətn səhifə yuxarıya və ya aşağıya hərəkət edir və şəkillər dəyişir.
Gəlin başlayaq.
01-də 07
Veb səhifə yaradın
Muse'i başlattığınızda Yeni Site bağlantısını basın. Bu yeni saytın xüsusiyyətlərini açacaqdır. Bu layihə masa üstü proqram üçün nəzərdə tutulacaq və onu İlk Layout açılır menyusunda seçə bilərsiniz. Siz həmçinin Sütunlar, Gutter Genişlik, Margins və Padding sayıları üçün də dəyərləri təyin edə bilərsiniz. Bu vəziyyətdə, biz bununla kifayətlənməmişik və sadəcə OK düyməsini basdıq .
02/07
Səhifəni formatlaşdırın
Saytın xüsusiyyətlərini təyin edərkən və OK düyməsinə tıkladığınız zaman Plan görünüşü deyilənlərə götürdünüz . Üstün bir Ana səhifə və pəncərənin altındakı Master Page var . Yalnız bir səhifəyə ehtiyacımız var. Dizayn baxımına gəlmək üçün interface açan Əsas səhifə cüt tapdıq.
Solda bir neçə əsas vasitə var və sağda səhifənin məzmununu manipulyasiya etmək üçün istifadə olunan müxtəlif panellər var. Üst hissədə, səhifəyə və ya seçilmiş bir səhifədə tətbiq edilə bilən xüsusiyyətlər vardır. Bu vəziyyətdə biz qara bir fon istədi. Bunu yerinə yetirmək üçün, Browser Dolgu rəng çipini tıklayır və Renk Seçicisindən qara seçirik.
03/07
Səhifəyə Mətn əlavə edin
Sonrakı addım, səhifəyə bəzi mətn əlavə etməkdir. Mətn Toolunu seçdik və mətn qutusunu çıxardıq. Biz "Xoş gəlmisiniz" sözünə daxil oldum və Properties-də mətn Arial-ə 120 piksel Ağ təyin etdi. Mərkəz hizalı.
Sonra Seçmə alətinə keçdik, mətn qutusuna tıkladık və Y mövqeyini yuxarıdan 168 pikselə qoyduq. Mətn qutusu hələ də seçildikdə, Hizala panelini açdıq və mətn qutusunu mərkəzə düzəltdik.
Nəhayət, seçilmiş mətn qutusu ilə biz Seçim / Alt və Shift düymələrini saxladıq və mətn qutusunun dörd nüsxəsini hazırladıq. Hər bir nüsxənin mətni və Y mövqeyini dəyişdik:
- 871
- Graphics, 1621
- Proqram təminatı, 2371
- @ 3181
Hər bir mətn qutusunun yerini təyin edərkən, səhifə, mətnin yerini yerləşdirmək üçün yenidən ölçülür.
04/07
Image yer tutucularını əlavə edin
Növbəti addım mətn blokları arasında şəkillər qoymaqdır.
İlk addım Dikdörtgə Tool seçmək və bir tərəfdən digər tərəfdən uzanan bir qutu çəkməkdir. Dikdörtgen seçildikdə, onun yüksəkliyini 250 piksel , Y mövqeyi isə 425 piksel olaraq təyin etdik. Plan, bir istifadəçinin brauzerinin görünüşünü yerləşdirmək üçün həmişə səhifənin eninə uzanması və ya müqavilə olmasıdır. Bunu yerinə yetirmək üçün Properties (Properties) 'dəki % 100 genişlik düyməsini tıkladık. Bunun nəyi X dəyərindən boz və bir brauzerdə görünüşün genişliyini həmişə 100% -dən təmin etməkdir.
05/07
Image yer tutucularına Şəkillər əlavə edin
Dikdörtgen seçildikdə, biz Color Chip-də deyil , Doldurma bağlantısını tıkladık və düzbucaqda bir şəkil əlavə etmək üçün I mage mürgəməsini tıkladıq. Uydurma sahəsindəki, Fit üçün Ölçəkliyi seçdik və təsvirin mərkəzin mərkəzindən ölçülmüş olmasını təmin etmək üçün Mövqe sahəsindəki orta qolu tıkladık.
Daha sonra, ilk iki mətn bloku arasında şəkilin surətini yaratmaq üçün Dəstə panelini açdıq və təsvirini başqa birinə köçürdükdən sonra Seçim / Alt-Shift-drag texnikasını istifadə etdik. Qalan iki görünüş üçün də bunu etdik.
Yerli təsvirlər ilə hərəkətin əlavə olunması vaxtıdır.
06-dan 07-ə
Parallax Scrolling əlavə edin
Adobe Muse-də parallax sürüşmə əlavə etmək üçün bir sıra yollar var. Biz bunu sadə şəkildə göstərəcəyik.
Doldurma paneli açıq olaraq, Gedin sekmesini basın və açıldığında Hareket onay kutusunu basın.
İlkin və Final Motion üçün dəyərləri görəcəksiniz. Bunlar, şəkilin Kaydırma Təkərinə aid sürətli hərəkət etdiyini müəyyənləşdirir. Məsələn, 1,5 ədəd vahiddən 1,5 dəfə daha sürətlə hərəkət edəcəkdir. Buradakı şəkilləri kilidləmək üçün 0 dəyərini istifadə etdik.
Yatay və şaquli oxlar hərəkət istiqamətini müəyyənləşdirir. Əgər dəyərlər 0 olarsa, hansı cədvəldən asılı olmayaraq, şəkillər çəkilməyəcək.
Orta dəyər - Əsas mövqe - şəkillərin hərəkətə başladığı nöqtəni göstərir. Görünüşün üstündəki xətt, bu şəkil üçün, səhifənin yuxarısından 325 piksel başlar. Kaydırma bu dəyərə çatdıqda, şəkil hərəkətə başlayır. Bu dəyəri, onu informasiya qutusunda dəyişməklə və ya satırın yuxarısındakı nöqtəni yuxarıya və ya aşağıya sürükleyerek dəyişə bilərsiniz.
Bunu səhifənin digər şəkilləri üçün təkrarlayın.
07 07
Tarayıcı Testi
Bu nöqtədə biz bitirdik. İlk etdiyimiz şey, açıq-aydın bir səbəbdən, Fayl> Saxla Saxla seçmək idi. Brauzer testi üçün biz Browser brauzerində Fayl> Önizleme səhifəsini seçdik . Bu, bizim kompüterin default brauzerini açdı və səhifənin açıldığı zaman biz kaydırmaya başladık.