Როგორ შევქმნათ Parallax Scrolling გამოყენებით Adobe Muse

ვებ-გვერდზე "ცხელი" ტექნიკის ერთ-ერთი საშუალება არის პარალიზებული სენსორული. ჩვენ ყველა იმ საიტებზე დავინახეთ, სადაც თაგვის გადასაადგილებლად მოძრაობთ თქვენი მაუსის და შინაარსი გვერდზე მოძრაობს ქვევით და ქვემოთ ან მთელს გვერდში, როგორც თაგვის საჭე.

იმ ახალი ვებ დიზაინი და გრაფიკული დიზაინი, ეს ტექნიკა შეიძლება იყოს ძალიან რთული, რათა მივაღწიოთ თანხის CSS საჭირო.

თუ ეს აღწერს თქვენ, არსებობს მთელი რიგი პროგრამები, რომლებიც შეიძლება უბრალოდ მიმართონ გრაფიკულ მხატვრებს. ისინი ძირითადად იყენებენ ვებ გვერდების ნაცნობი გვერდის განლაგებას, რაც იმას ნიშნავს, რომ არ არის ბევრი, თუ რომელიმე, კოდირება ჩართულია. ერთ-ერთი პროგრამა, რომელიც მართლაც გამორჩეულად არის ცნობილი, არის Adobe Muse.

სამუშაოები, რომლებიც მუჭა პროზას იყენებს, საკმაოდ საოცარია და ხედავთ, თუ რა შეგიძლიათ გააკეთოთ, თუ რა შეგიძლიათ გააკეთოთ მუზეუმის საიტების დათვალიერება . მიუხედავად იმისა, რომ ვებ პროსექსუალებს მუზეუმი "ქარიშხალი" უწოდებენ, მას ასევე იყენებს დიზაინერები, რომ შექმნან მობილური და ვებ პროტოტიპები, რომლებიც საბოლოოდ გადააგზავნიან დეველოპერებს თავიანთ გუნდში.

ერთი მეთოდი, რომელიც მუზეუმთან შედარებით ადვილია, არის parallax scrolling და, თუ გვინდა, რომ დასრულებული ვერსია exercise ჩვენ ვივლით, აღვნიშნო თქვენი ბრაუზერის ამ გვერდზე. როდესაც თქვენ გააფართოვოს თქვენი მაუსის ის გადახვევა საჭე, ტექსტი, როგორც ჩანს, გადაადგილება ან ქვემოთ გვერდი და გამოსახულებები შეცვალოს.

დავიწყოთ.

01 წლის 07

შექმნა ვებ გვერდი

როდესაც დაიწყე "Muse" - ის ახალი საიტის ლინკზე გაშვება. ეს გაიხსნება ახალი საიტის თვისებები . ეს პროექტი განკუთვნილი იქნება დესკტოპის აპლიკაციისთვის და შეგიძლიათ აირჩიოთ ის პირველადი განლაგება Pop-down მენიუში. ასევე შეგიძლიათ დააყენოთ მნიშვნელობები სვეტების რაოდენობა, გრაფტერ სიგანე, ზღვარი და პედინგი. ამ შემთხვევაში, ჩვენ არ იყო საშინლად შეშფოთებული ამ და უბრალოდ დაწკაპავთ OK .

02 07

გვერდის ფორმატირება

საიტის თვისებების დაყენებისას და დააჭირეთ ღილაკს OK თქვენ გადაიყვანეს გეგმის ნახვა. ფანჯრის ბოლოში არის მთავარი გვერდი ზედა გვერდზე და სამაგისტრო გვერდი . ჩვენ მხოლოდ ერთი გვერდი გვჭირდებოდა. დაათვალიერეთ დიზაინი, ჩვენ ორჯერ დააწკაპუნეთ მთავარ გვერდზე, რომელიც გაიხსნა ინტერფეისი.

მარცხენა არის რამდენიმე ძირითადი იარაღები და უფლება არის სხვადასხვა პანელები გამოიყენება მანიპულირება შინაარსი გვერდზე. გვერდში თავმოყრილია ისეთი თვისებები, რომლებიც შეიძლება გამოყენებულ იქნეს გვერდზე, ან გვერდზე შერჩეული არაფერი. ამ შემთხვევაში, გვსურდა შავ ფონზე. ამ მიზნის მისაღწევად, დააჭირეთ ღილაკს ბრაუზერის შევსების ფერის ჩიპი და შეარჩიეთ შავი ფერის არჩევანი.

07 წლის 03

ტექსტის დამატება გვერდზე

მომდევნო ნაბიჯი არის გვერდის ტექსტის დამატება. ტექსტის ხელსათიდან შევარჩიეთ ტექსტი ტექსტი. ჩვენ შევედით სიტყვით "გამარჯობა" და, Properties- ში მითითებული ტექსტი Arial, 120 პიქსელი თეთრი. ცენტრის მოწყობა.

ჩვენ გადავედით შერჩევის ხელსაწყოზე, დააწკაპეთ ტექსტს და დააყენეთ Y პოზიცია 168 პიქსელიდან. ტექსტის ყუთთან კვლავ შეარჩია, ჩვენ გაიხსნა პანელის გასწორება და ტექსტის ყუთი ცენტრში.

საბოლოო ჯამში, შერჩეული ტექსტური ყუთით, ჩვენ შევასრულეთ ვარიანტი / Alt და Shift გასაღებები და გააკეთეთ ტექსტის ყუთში ოთხი ეგზემპლარი. ჩვენ შევცვლით ტექსტს და თითოეული ასლის Y პოზიციას:

თქვენ შეამჩნევთ, როგორც თითოეული ტექსტის ყუთს მიუთითებთ, გვერდს განაპირობებს ტექსტის ადგილმდებარეობის განთავსებას.

04 წლის 07

დაამატეთ სურათი პლიუსები

შემდეგი ნაბიჯი არის სურათების ბლოკავს სურათებს შორის.

პირველი ნაბიჯი არის შეარჩიოთ მართკუთხედი ინსტრუმენტი და გავამახვილოთ ჩვენი ყუთი, რომელიც ერთ მხარეს გვერდიდან მეორეზე გადადის. შერჩეული ოთხკუთხედის გამოყენებით, ჩვენ სიმაღლეს 250 პიქსელამდე და მისი Y პოზიცია 425 პიქსელამდე დააყენეთ. გეგმა არის მათ ყოველთვის მონაკვეთი ან ხელშეკრულების გვერდზე სიგანე განსახლება მომხმარებლის ბრაუზერის viewport. ამ მიზნის მისაღწევად, ჩვენ დაემატა 100% სიგანე ღილაკს თვისებები. რას აკეთებს ეს რება X- ის მნიშვნელობით და უზრუნველყოს გამოსახულება ყოველთვის ბრაუზერში ვიზუალურ სიგანე 100%.

07 წლის 05

სურათების ჩასმა სურათების დამატება

მართკუთხა შერჩევით ჩვენ დააკლიკეთ შევსების ბმული - არ არის ფერი ჩიპი და დააკლიკეთ მე მელნის მელნი, რომ დაამატოთ გამოსახულება მართკუთხაში. Fitting ფართობი, ჩვენ შეარჩია მასშტაბი შეესაბამება და დაწკაპავთ ცენტრის სახელური პოზიცია ფართობი, რათა უზრუნველყოს გამოსახულება scaled საწყისი ცენტრში გამოსახულება.

შემდეგი, ჩვენ ვიყენეთ ვარიანტი / Alt-Shift-drag ტექნიკის შექმნა ასლი გამოსახულება შორის პირველი ორი ტექსტური ბლოკები, გახსნა შევსების პანელი და გაცვალეს იმიჯი სხვა. ჩვენ ამას გავაკეთეთ დარჩენილი ორი გამოსახულებაც.

სურათებით სურათებით, დროა დაამატოთ შუამდგომლობა.

06 07

პარალელური სენსორების დამატება

Adobe Muse- ში parallax scrolling- ის დასტების რამდენიმე გზა არსებობს. ჩვენ ვაპირებთ გაჩვენოთ მარტივი გზა ამის გაკეთება.

შევსების პანელის გახსნით, დააჭირეთ ღილაკს Scroll tab და, როდესაც იგი იხსნება, დააწკაპუნეთ Motion Checkbox .

თქვენ იხილავთ ფასეულობებს თავდაპირველი და საბოლოო მოძრაობისთვის . ეს განსაზღვრავს, თუ რამდენად სწრაფად გამოსახულია გადაადგილება Scroll Wheel. მაგალითად, 1.5-ის ღირებულება გადაადგილდება 1.5-ჯერ უფრო სწრაფად ვიდრე საჭეზე. ჩვენ ვიღებდით 0-ის ღირებულებას სურათების ჩაკეტვაზე.

ჰორიზონტალური და ვერტიკალური ისრები განსაზღვრავს მოძრაობის მიმართულებას. თუ ფასეულობა 0-ისაა, სურათებს არ აუკრძალებენ, რომელთა გარეშეც დააჭირეთ ღილაკს.

შუა ღირებულება - ძირითადი პოზიცია - გვიჩვენებს წერტილს, სადაც გამოსახულებები გადაადგილდება. სურათზე გამოსახული ხაზი იწყება ამ სურათისთვის, გვერდის თავზე, 325 პიქსელი. როდესაც გადახვევა აღწევს ამ მნიშვნელობას გამოსახულება იწყებს გადაადგილებას. თქვენ შეგიძლიათ შეცვალოთ ეს მნიშვნელობა ან შეცვალოთ იგი დიალოგურ ყუთში ან დაწკაპვით და გადმოიტანეთ წერტილი ხაზის ზედა ნაწილში ან ქვემოთ.

გაიმეორეთ ეს სხვა სურათებზე გვერდზე.

07 07

ბრაუზერის ტესტი

ამ ეტაპზე ჩვენ დასრულდა. პირველი რაც ჩვენ გავაკეთეთ, აშკარა მიზეზების გამო, იყო ფაილების> საიტის შენახვა . ბრაუზერის გამოცდაზე, უბრალოდ აირჩიეთ ფაილი> Preview გვერდი ბრაუზერში . ამან გახსნა ჩვენი კომპიუტერის ნაგულისხმევი ბრაუზერი და, როდესაც გვერდი გაიხსნა, ჩვენ დავიწყეთ სენსორული.