របៀបបង្កើត Parallax រមូរដោយប្រើ Adobe Muse

បច្ចេកវិជ្ជាមួយក្នុងចំណោម "បច្ចេកវិជ្ជាក្តៅបំផុត" នៅលើបណ្តាញនាពេលបច្ចុប្បន្ននេះគឺការរមូរ parallax ។ យើងទាំងអស់គ្នាបានទៅគេហទំព័រទាំងនោះដែលអ្នកបង្វិលកង់រមូរនៅលើកណ្តុររបស់អ្នកហើយមាតិកានៅលើទំព័រផ្លាស់ទីឡើងលើឬចុះក្រោមឬនៅលើទំព័រនៅពេលអ្នកបង្វិលកង់កណ្តុរ។

សម្រាប់អ្នករចនាគេហទំព័រថ្មីនិងការរចនាក្រាហ្វិចបច្ចេកទេសនេះអាចជាការលំបាកខ្លាំងណាស់ដើម្បីសម្រេចបានដោយសារតែបរិមាណនៃ CSS ដែលត្រូវការ។

ប្រសិនបើនោះពណ៌នាអំពីអ្នកមានកម្មវិធីមួយចំនួនដែលអាចទាក់ទាញអ្នកគាំទ្រក្រាហ្វិច។ ពួកគេជាទូទៅប្រើវិធីប្លង់ទំព័រដែលធ្លាប់ស្គាល់ចំពោះទំព័របណ្ដាញដែលមានន័យថាមិនមានច្រើនទេប្រសិនបើមានការសរសេរកូដ។ កម្មវិធីមួយដែលត្រូវបានគេយកចិត្តទុកដាក់យ៉ាងខ្លាំងគឺ Adobe Muse ។

ការងារដែលត្រូវបានធ្វើដោយអ្នកជំនាញក្រាហ្វិកដោយប្រើ Muse ពិតជាអស្ចារ្យណាស់ហើយអ្នកអាចមើលឃើញគំរូនៃអ្វីដែលអ្នកអាចធ្វើបានដោយចូលទៅកាន់គេហទំព័រ Muse Site of the Day ។ បើទោះបីជាអ្នកជំនាញខាងអ៊ីនធឺណិតមានគំនិតថា Muse ជាឧបករណ៍ប្រដាប់ក្មេងលេងក៏ដោយវាក៏ត្រូវបានប្រើប្រាស់ដោយអ្នកឌីហ្សាញដើម្បីបង្កើតគំរូទូរស័ព្ទនិងបណ្តាញដែលនឹងត្រូវបានប្រគល់ជូនដល់អ្នកអភិវឌ្ឍន៍នៅទីបំផុត។

បច្ចេកទេសមួយដែលងាយស្រួលក្នុងការសំរេចបានជាមួយ Muse គឺការរមូរ parallax ហើយប្រសិនបើអ្នកចង់ឃើញការធ្វើលំហាត់ប្រាណដែលបានបញ្ចប់យើងនឹងដើរតាមរយៈការចង្អុលកម្មវិធីរុករករបស់អ្នកទៅទំព័រនេះ។ នៅពេលអ្នករមៀលកង់រមូរកណ្តុររបស់អ្នកអត្ថបទហាក់ដូចជាផ្លាស់ទីឡើងលើឬចុះក្រោមហើយរូបភាពនឹងផ្លាស់ប្តូរ។

តោះ​ចាប់ផ្តើម។

01 នៃ 07

បង្កើតទំព័របណ្តាញ

នៅពេលដែលអ្នកបើកដំណើរការ Muse សូមចុចលើ គេហទំព័រថ្មី ។ នេះនឹងបើក លក្ខណសម្បត្តិថ្មី ។ គម្រោងនេះនឹងត្រូវបានរចនាឡើងសម្រាប់កម្មវិធីផ្ទៃតុហើយអ្នកអាចជ្រើសរើសវានៅក្នុងម៉ឺនុយលេចឡើង ប្លង់ដំបូង ។ អ្នកក៏អាចកំណត់តម្លៃសម្រាប់ចំនួនជួរឈរទទឹងគែមនិងរឹម។ ក្នុងករណីនេះយើងមិនបានគិតអំពីបញ្ហានេះទេហើយគ្រាន់តែចុច OK

02 នៃ 07

ធ្វើទ្រង់ទ្រាយទំព័រ

នៅពេលអ្នកកំណត់លក្ខណសម្បត្តិរបស់វែបសាយនិងចុចយល់ព្រមអ្នកត្រូវបានគេនាំទៅអ្វីដែលគេហៅថាទិដ្ឋភាព ផែនការ ។ មាន ទំព័រដើម នៅផ្នែកខាងលើនិង ទំព័រមេ នៅផ្នែកខាងក្រោមនៃបង្អួច។ យើងត្រូវការតែទំព័រមួយប៉ុណ្ណោះ។ ដើម្បីចូលមើល Design View យើងបានចុចទ្វេដងលើទំព័រដើមដែលបានបើកចំណុចប្រទាក់។

នៅខាងឆ្វេងមានឧបករណ៍មូលដ្ឋានមួយចំនួនហើយនៅខាងស្ដាំមានបន្ទះផ្សេងៗដែលប្រើដើម្បីរៀបចំមាតិកានៅលើទំព័រ។ នៅលើកំពូលគឺជាលក្ខណៈសម្បត្តិដែលអាចត្រូវបានអនុវត្តទៅទំព័រឬអ្វីដែលបានជ្រើសរើសនៅលើទំព័រ។ ក្នុងករណីនេះយើងចង់មានប្រវត្តិខ្មៅ។ ដើម្បីសម្រេចនេះយើងចុចលើ កម្មវិធី Browser fill color ហើយជ្រើសពណ៌ខ្មៅពី Color Picker ។

03 នៃ 07

បន្ថែមអត្ថបទទៅទំព័រ

ជំហានបន្ទាប់គឺត្រូវបន្ថែមអត្ថបទខ្លះទៅទំព័រ។ យើងបានជ្រើសរើស ឧបករណ៍អត្ថបទ និងដកចេញប្រអប់អត្ថបទ។ យើងបានបញ្ចូលពាក្យ "ស្វាគមន៍" ហើយក្នុងលក្ខណសម្បត្តិកំណត់អត្ថបទទៅជា Arial 120 ភីចសែល។ តម្រឹមកណ្តាល។

បន្ទាប់មកយើងបានប្តូរទៅឧបករណ៍ជម្រើសចុចលើប្រអប់អត្ថបទហើយកំណត់ ទីតាំង Y របស់វា ទៅ 168 ភីកសែលពីកំពូល។ ជាមួយប្រអប់អត្ថបទនៅតែត្រូវបានជ្រើសរើសយើងបើក បន្ទះតម្រឹម និងតម្រឹមប្រអប់អត្ថបទទៅកណ្តាល។

ចុងបញ្ចប់ជាមួយប្រអប់អត្ថបទដែលបានជ្រើសរើសយើងបានសង្កត់ គ្រាប់ចុច Option / Alt and Shift ហើយចម្លងបួនប្រអប់។ យើងបានផ្លាស់ប្តូរអត្ថបទនិងទីតាំង Y នៃច្បាប់ចម្លងនីមួយៗដើម្បី:

អ្នកនឹងកត់សម្គាល់ឃើញថានៅពេលអ្នកកំណត់ទីតាំងរបស់ប្រអប់អត្ថបទទំព័រប្តូរទំហំដើម្បីផ្ទុកទីតាំងនៃអត្ថបទ។

04 នៃ 07

បន្ថែមកន្លែងដាក់រូបភាព

ជំហានបន្ទាប់គឺដាក់រូបភាពរវាងប្លុកអត្ថបទ។

ជំហានដំបូងគឺត្រូវជ្រើសយក ចតុកោណឧបករណ៍ និងគូសប្រអប់របស់យើងដែលលាតសន្ធឹងពីផ្នែកម្ខាងនៃទំព័រមួយទៅទំព័រមួយទៀត។ ជាមួយចតុកោណដែលបានជ្រើសយើងកំណត់ កម្ពស់ របស់វា ទៅ 250 ភីកសែល និង ទីតាំង Y របស់វា ដល់ 425 ភីកសែល ។ ផែនការនេះគឺដើម្បីឱ្យពួកគេតែងតែលាតសន្ធឹងឬចុះកិច្ចសន្យាទៅនឹងទទឹងទំព័រដើម្បីឱ្យអ្នកបើកមើលកម្មវិធីរុករករបស់អ្នកប្រើ។ ដើម្បីសម្រេចកិច្ចការនេះយើងបានចុចប៊ូតុង ទទឹង 100% នៅក្នុងលក្ខណសម្បត្តិ។ អ្វីដែលវាធ្វើគឺពណ៌ប្រផេះចេញពីតម្លៃ X និងដើម្បីធានាថារូបភាពគឺជានិច្ច 100% នៃទទឹងការបង្ហាញនៅក្នុងកម្មវិធីរុករក។

05 នៃ 07

បន្ថែមរូបភាពទៅកន្លែងដាក់រូបភាព

ជាមួយនឹងចតុកោណដែលបានជ្រើសរើសយើងបានចុច តំណភ្ជាប់ - មិនមែនពណ៌ចំរុះ - ហើយចុច ទឹកខ្មៅម៉ាឃ័រ ដើម្បីបន្ថែមរូបក្នុងចតុកោណកែង។ នៅក្នុងតំបន់ដែលបាន តុបតែង យើងបានជ្រើសរើស ធ្វើមាត្រដ្ឋានឱ្យសម និងចុច ចំណុចទាញកណ្តាល នៅក្នុង ទីតាំង ដើម្បីធានាថារូបភាពត្រូវបានធ្វើមាត្រដ្ឋានពីចំណុចកណ្ដាលនៃរូបភាព។

បន្ទាប់មកយើងបានប្រើបច្ចេកទេស Option / Alt-Shift-drag ដើម្បីបង្កើតច្បាប់ចម្លងរូបភាពរវាងប្លុកអត្ថបទដំបូងពីរបានបើកផ្ទាំងបំពេញហើយដោះដូររូបភាពសម្រាប់មួយផ្សេងទៀត។ យើងបានធ្វើរឿងនេះសម្រាប់រូបភាពពីរដែលនៅសល់ផងដែរ។

ជាមួយនឹងរូបភាពនៅនឹងកន្លែងវាដល់ពេលបញ្ចូលចលនា។

06 នៃ 07

បន្ថែមការរមូរ Parallax

មានមធ្យោបាយមួយចំនួនក្នុងការបន្ថែមការរមូរ parallax នៅក្នុង Adobe Muse ។ យើងនឹងបង្ហាញវិធីសាមញ្ញក្នុងការធ្វើវា។

ដោយបើកបន្ទះបំពេញរួចចុច ផ្ទាំងរមូរ ហើយនៅពេលវាបើកចុច ប្រអប់ធីកចលនា

អ្នកនឹងឃើញតម្លៃសម្រាប់ ចលនា ដំបូង និង ចុងក្រោយ ។ ទាំងនេះកំណត់ពីរបៀបដែលរូបភាពដែលមានចលនារហ័សទាក់ទងនឹងកង់រមូរ។ ឧទាហរណ៍តម្លៃ 1.5 នឹងផ្លាស់ទីរូបភាពលឿនជាងកង់ 1,5 ដង។ យើងបានប្រើតម្លៃ 0 ដើម្បីចាក់សោរូបភាព។

ព្រួញផ្ដេកនិងបញ្ឈរ កំណត់ទិសនៃចលនា។ ប្រសិនបើតម្លៃគឺ 0 រូបភាពនឹងមិនបន្ថយដោយមិនគិតពីព្រួញណាមួយដែលអ្នកចុច។

តម្លៃកណ្តាល - ទីតាំងកូនសោ - បង្ហាញពីចំណុចដែលរូបភាពចាប់ផ្តើមផ្លាស់ទី។ បន្ទាត់ខាងលើរូបភាពចាប់ផ្ដើមសម្រាប់រូបភាពនេះ 325 ភីកសែលពីកំពូលទំព័រ។ នៅពេលដែលរមូរទៅដល់តម្លៃនោះរូបភាពចាប់ផ្តើមផ្លាស់ទី។ អ្នកអាចផ្លាស់ប្ដូរតម្លៃនេះបានដោយផ្លាស់ប្តូរវានៅក្នុងប្រអប់ឬដោយចុចនិងទាញចំណុចនៅកំពូលនៃបន្ទាត់ឡើងលើឬចុះក្រោម។

ធ្វើម្តងទៀតនេះសម្រាប់រូបភាពផ្សេងទៀតនៅលើទំព័រ។

07 នៃ 07

សាកល្បងកម្មវិធីរុករក

នៅចំណុចនេះយើងត្រូវបានបញ្ចប់។ រឿងដំបូងដែលយើងបានធ្វើសម្រាប់ហេតុផលជាក់ស្តែងគឺជ្រើសរើស File> Save Site ។ ដើម្បីសាកល្បងកម្មវិធីរុករកយើងគ្រាន់តែជ្រើស File> Preview Page ក្នុង Browser ។ នេះបានបើកកម្មវិធីរុករកលំនាំដើមរបស់កុំព្យូទ័រយើងហើយនៅពេលទំព័របើកយើងចាប់ផ្តើមរមូរ។