បន្ទាប់ពីបានបញ្ចប់គម្រោងដែលតម្រូវឱ្យខ្ញុំរៀនអ្វីគ្រប់យ៉ាងដែលខ្ញុំអាចធ្វើបានអំពីចលនា CSS និង SVG ខ្ញុំបានចាប់ផ្តើមសរសេរស៊េរីនេះអំពី Smashing Animations និង "How Classic Cartoons Inspire Modern CSS" ។ ដើម្បីបញ្ចប់ឆ្នាំនេះ ខ្ញុំចង់បង្ហាញអ្នកពីរបៀបប្រើ CSS ទំនើបដើម្បីបង្កើតធាតុដែលធ្វើឱ្យ Toon Titles មានឥទ្ធិពលខ្លាំង៖ អក្សរពុម្ពរបស់វា។ ចំណងជើង ការរចនាស្នាដៃសិល្បៈ នៅក្នុងយុគសម័យស្ងាត់នៃទសវត្សរ៍ឆ្នាំ 1920 និងដើមទសវត្សរ៍ទី 30 អក្សរពុម្ពនៃប័ណ្ណចំណងជើងនៃខ្សែភាពយន្តបានបង្កើតអារម្មណ៍ កំណត់ឈុតឆាក និងរំឭកទស្សនិកជនអំពីប្រភេទខ្សែភាពយន្តដែលពួកគេចង់មើល។
ប័ណ្ណចំណងជើងគំនូរជីវចលក៏ត្រូវបានដាក់ស្លាកយីហោ អារម្មណ៍ និងឈុតឆាកផងដែរ ដែលទាំងអស់ត្រូវបានបញ្ចូលទៅក្នុងមួយ។ នៅដើមឆ្នាំ ពេលដែលថវិកាស្ទូឌីយោធំៗកាន់តែធំ ប័ណ្ណចំណងជើងទាំងនេះច្រើនតែជាគំនូរ និងជាគំនូរ។
ប៉ុន្តែនៅពេលដែលទូរទស្សន៍រីកដុះដាលក្នុងកំឡុងទសវត្សរ៍ឆ្នាំ 1950 ថវិកាបានធ្លាក់ចុះ ហើយកាតដែលរចនាដោយវិចិត្រករដូចជា Lawrence “Art” Goble បានទទួលយកភាសាដែលមើលឃើញថ្មី ក្លាយជាក្រាហ្វិក រចនាប័ទ្ម និងមិនសូវស្មុគស្មាញ។ ចំណាំ៖ Lawrence “Art” Goble គឺជាវីរបុរសម្នាក់ក្នុងចំណោមវីរបុរសដែលតែងតែមើលរំលងនៃគំនូរជីវចលអាមេរិកពាក់កណ្តាលសតវត្ស។ គាត់បានធ្វើការជាចម្បងឱ្យ Hanna-Barbera ក្នុងកំឡុងឆ្នាំដែលមានឥទ្ធិពលបំផុតក្នុងទសវត្សរ៍ឆ្នាំ 1950 និង 1960 ។ Goble មិនមែនជាតួអង្គគំនូរជីវចលទេ។ តួនាទីរបស់គាត់គឺបង្កើតបរិយាកាស ដូច្នេះគាត់បានរចនាបរិយាកាសសម្រាប់ The Flintstones, Huckleberry Hound, Quick Draw McGraw និង Yogi Bear ក៏ដូចជាកាតចំណងជើងដែលកំណត់សម្លេង។ ប័ណ្ណចំណងជើងរបស់គាត់ដែលមានរូបគំនូរដែលមានរូបសញ្ញាត្រួតលើគ្នាបានជួយកំណត់រូបរាងរបស់ Hanna-Barbera ។ ស្នាដៃសិល្បៈរបស់ Goble សម្រាប់តួអង្គដូចជា Quick Draw McGraw និង Yogi Bear មានប្រសិទ្ធភាពនៅលើអេក្រង់ទូរទស្សន៍តូចជាង។ ជាជាងការផលិតឡើងវិញនូវរូបថ្លុក គាត់បានផ្តោតលើការបង្ហាញពីគំនិតដ៏រឹងមាំតែមួយ - ជាញឹកញាប់នៅក្នុងរូបភាពស្រមោល - ដែលចាប់យកខ្លឹមសាររបស់វា។ នៅក្នុង "The Buzzin' Bear" Yogi ស្រែកឡើងដោយឧទ្ធម្ភាគចក្រ។ គាត់លោតចេញ កន្ត្រក pic-a-nic នៅក្នុងដៃនៅក្នុង "Bear on a Picnic" ហើយសម្រាប់ "Prize Fight Fright" របស់គាត់ Yogi ដាក់ប្រអប់អត្ថបទចំណងជើង។
ដោយមានចលនាតិចតួច ឬគ្មានដើម្បីពឹងផ្អែក ស៊ុមតែមួយរបស់ Goble ត្រូវតែបង្កើតអារម្មណ៍ កំណត់កន្លែងកើតហេតុ និងពណ៌នារឿងមួយ។ ពួកគេបានធ្វើវាដោយប្រើពណ៌សំប៉ែត រាងក្រាហ្វិក និងការវាយអក្សរដែលត្រូវបានបញ្ចូលជាញឹកញាប់ក្នុងការងារសិល្បៈ។
ក្នុងនាមជាអ្នករចនាដែលធ្វើការលើបណ្តាញ ចំណងជើង Toon អាចបង្រៀនយើងជាច្រើនអំពីរបៀបបង្ហាញបុគ្គលិកលក្ខណៈរបស់ម៉ាក បង្កើតចំណាប់អារម្មណ៍ដំបូង និងកំណត់ការរំពឹងទុកសម្រាប់បទពិសោធន៍របស់នរណាម្នាក់ដោយប្រើផលិតផល ឬគេហទំព័រ។ យើងអាចរៀនពីបច្ចេកទេសរបស់វិចិត្រករក្នុងការបង្កើតបដាដែលមានប្រសិទ្ធិភាព បឋមកថាទំព័រចុះចត និងសូម្បីតែអេក្រង់ពណ៌ដែលមានម៉ូដល្អ។ ការវាយអត្ថបទចំណងជើង Toon កាតចំណងជើងរឿងគំនូរជីវចលបង្ហាញពីរបៀបដែលការបញ្ចូលគ្នារវាងប្រភេទជាមួយរូបភាពផ្តល់នូវកណ្តាប់ដៃដែលចង់បានចំណងជើង ឬវីរបុរស។ ជាមួយនឹងការប្រើប្រាស់នូវ Text-shadow, text-stroke, and transform tricks, CSS ទំនើបអនុញ្ញាតឱ្យអ្នកចូលទៅក្នុងថាមពលដូចគ្នានោះ។
កម្មវិធីបង្កើតចំណងជើងអត្ថបទ Toon ដោយផ្នែកតាមរយៈការសរសេរអត្ថបទនេះ ខ្ញុំបានដឹងថាវានឹងមានប្រយោជន៍ក្នុងការមានឧបករណ៍សម្រាប់បង្កើតអត្ថបទដែលមានរចនាប័ទ្មដូចចំណងជើងគំនូរជីវចលដែលខ្ញុំចូលចិត្តខ្លាំងណាស់។ ដូច្នេះខ្ញុំបង្កើតមួយ។ កម្មវិធីបង្កើតចំណងជើងអត្ថបទ My Toon អនុញ្ញាតឱ្យអ្នកសាកល្បងជាមួយពណ៌ សញ្ញា និងស្រមោលអត្ថបទច្រើន។ អ្នកអាចកែតម្រូវលំដាប់ថ្នាំលាប អនុវត្តគម្លាតអក្សរ មើលអត្ថបទរបស់អ្នកជាមុននៅក្នុងជម្រើសនៃពុម្ពអក្សរគំរូ ហើយបន្ទាប់មកចម្លង CSS ដែលបានបង្កើតត្រង់ទៅក្ដារតម្បៀតខ្ទាស់របស់អ្នកដើម្បីប្រើក្នុងគម្រោងមួយ។ Toon ចំណងជើង CSS អ្នកគ្រាន់តែអាចចម្លង-បិទភ្ជាប់ CSS ដែល Toon Text Title Generator ផ្តល់ឱ្យអ្នក។ ប៉ុន្តែសូមមើលឱ្យកាន់តែជិតនូវអ្វីដែលវាធ្វើ។ ស្រមោលអត្ថបទ រកមើលប្រភេទនៅក្នុងចំណងជើងនេះពីរឿង "Yuk-Yuk Duck" របស់ Augie Doggie ជាមួយនឹងអក្សរពណ៌លឿងស្លេក និងស្រមោលងងឹត រឹង និងអុហ្វសិត ដែលលើកវាចេញពីផ្ទៃខាងក្រោយ និងបង្កើតការបំភាន់នៃជម្រៅ។
អ្នកប្រហែលជាដឹងហើយថាស្រមោលអត្ថបទទទួលយកតម្លៃបួន៖ (1) ផ្ដេក និង (2) អុហ្វសិតបញ្ឈរ (3) ព្រិលៗ និង (4) ពណ៌ដែលអាចរឹង ឬពាក់កណ្តាលថ្លា។ តម្លៃអុហ្វសិតទាំងនោះអាចជាវិជ្ជមាន ឬអវិជ្ជមាន ដូច្នេះខ្ញុំអាចចម្លង "កូនទា" ដោយប្រើស្រមោលរឹងទាញចុះក្រោម និងទៅខាងស្តាំ៖ ពណ៌៖ #f7f76d; ស្រមោលអត្ថបទ៖ 5px 5px 0 #1e1904;
ម្យ៉ាងវិញទៀត ចំណងជើង "Pint Giant" នេះមានអារម្មណ៍ខុសគ្នាជាមួយនឹងស្រមោលពាក់កណ្តាលទន់អវិជ្ជមានរបស់វា៖ ពណ៌៖ #c2a872; ស្រមោលអត្ថបទ៖ -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
ដើម្បីបន្ថែមជម្រៅបន្ថែម និងបង្កើតបែបផែនគួរឱ្យចាប់អារម្មណ៍បន្ថែមទៀត ខ្ញុំអាចដាក់ស្រមោលជាច្រើន។ សម្រាប់ "Let's Duck Out" ខ្ញុំបានបញ្ចូលគ្នានូវស្រមោលចំនួនបួន៖ ទីមួយជាស្រមោលរឹងជាមួយនឹងអុហ្វសិតផ្តេកអវិជ្ជមានដើម្បីលើកអត្ថបទចេញពីផ្ទៃខាងក្រោយ បន្ទាប់មកដោយស្រមោលទន់បន្តិចម្តងៗដើម្បីបង្កើតភាពព្រិលៗជុំវិញវា៖ ពណ៌៖ #6F4D80; ស្រមោលអត្ថបទ៖ -5px5px 0 #260e1e, /* ស្រមោល 1 */ 0 0 15px #e9ce96, /* ស្រមោល 2 */ 0 0 30px #e9ce96, /* ស្រមោល 3 */ 0 0 30px #e9ce96; /* ស្រមោល 4 */
ស្រមោលទាំងនេះបង្ហាញថាការប្រើស្រមោលអត្ថបទមិនមែនគ្រាន់តែបង្កើតបែបផែនពន្លឺប៉ុណ្ណោះទេព្រោះវាក៏អាចជាការតុបតែង និងបន្ថែមបុគ្គលិកលក្ខណៈផងដែរ។ អត្ថបទដាច់សរសៃឈាមខួរក្បាល កាតចំណងជើងគំនូរជីវចលជាច្រើនមានអក្សរដែលមានគ្រោងដិតដែលធ្វើឱ្យពួកវាលេចធ្លោចេញពីផ្ទៃខាងក្រោយ។ ខ្ញុំអាចបង្កើតបែបផែននេះឡើងវិញដោយប្រើការវាយអក្សរ។ អស់រយៈពេលជាយូរមក លក្ខណសម្បត្តិនេះអាចប្រើបានតែតាមរយៈ -webkit- បុព្វបទ ប៉ុន្តែនោះក៏មានន័យថាឥឡូវនេះវាត្រូវបានគាំទ្រនៅលើកម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបផងដែរ។
text-stroke គឺជាអក្សរកាត់សម្រាប់លក្ខណៈសម្បត្តិពីរ។ ទីមួយ ទទឹងអក្សរ គូរវណ្ឌវង្កជុំវិញអក្សរនីមួយៗ ចំណែកទីពីរ អក្សរវាយពណ៌ គ្រប់គ្រងពណ៌របស់វា។ សម្រាប់ "Whatever Goes Pup" ខ្ញុំបានបន្ថែមសញ្ញាពណ៌ខៀវ 4px ទៅអត្ថបទពណ៌លឿង៖ ពណ៌៖ #eff0cd; -webkit-text-stroke៖ 4px #7890b5; វាយអត្ថបទ៖ 4px #7890b5;
ជំងឺដាច់សរសៃឈាមខួរក្បាលអាចមានប្រយោជន៍ជាពិសេសនៅពេលដែលពួកវាត្រូវបានផ្សំជាមួយស្រមោល ដូច្នេះសម្រាប់ "ការរីកលូតលាស់ លូតលាស់ បាត់" ខ្ញុំបានបន្ថែមការដាច់សរសៃឈាមខួរក្បាល 3px ស្តើងទៅស្រមោល 1px ដែលស្ទើរតែមិនច្បាស់ ដើម្បីបង្កើតបែបផែនអត្ថបទបីវិមាត្រនេះ៖ ពណ៌៖ #fbb999; ស្រមោលអត្ថបទ៖ 3px 5px 1px #5160b1; -webkit-text-stroke៖ 3px #984336; អក្សរកាត់៖ 3px #984336;
លំដាប់ថ្នាំលាប ការប្រើអក្សរវាយអក្សរមិនតែងតែទទួលបានលទ្ធផលរំពឹងទុកនោះទេ ជាពិសេសជាមួយនឹងអក្សរស្តើង និងអក្សរក្រាស់ជាងមុន ពីព្រោះតាមលំនាំដើម កម្មវិធីរុករកតាមអ៊ីនធឺណិតទាញសញ្ញាដាច់សរសៃឈាមខួរក្បាលលើការបំពេញ។ គួរឱ្យស្តាយ CSS នៅតែមិនអនុញ្ញាតឱ្យខ្ញុំកែតម្រូវទីតាំងដាច់សរសៃឈាមខួរក្បាល ដូចដែលខ្ញុំតែងតែធ្វើនៅក្នុង Sketch ។ ទោះយ៉ាងណាក៏ដោយ ទ្រព្យសម្បត្តិបញ្ជាទិញថ្នាំលាបមានតម្លៃដែលអនុញ្ញាតឱ្យខ្ញុំដាក់ស្នាមដាច់ពីក្រោយ ជាជាងនៅពីមុខការបំពេញ។
paint-order: stroke លាបថ្នាំដាច់សរសៃឈាមខួរក្បាលជាមុនសិន បន្ទាប់មកការបំពេញ ចំណែក paint-order: fill ធ្វើផ្ទុយពីនេះ៖ ពណ៌៖ #fbb999; លំដាប់ថ្នាំលាប: បំពេញ; ស្រមោលអត្ថបទ៖ 3px 5px 1px #5160b1; text-stroke-color: #984336; text-stroke-width: 3px;
ការដាច់សរសៃឈាមខួរក្បាលដ៏មានប្រសិទ្ធភាពរក្សាអក្សរដែលអាចអានបាន បន្ថែមទម្ងន់ ហើយ - នៅពេលរួមបញ្ចូលគ្នាជាមួយស្រមោល និងលំដាប់ថ្នាំលាប - ផ្តល់ឱ្យអត្ថបទរាបស្មើ។ ផ្ទៃខាងក្រោយខាងក្នុងអត្ថបទ ប័ណ្ណចំណងជើងគំនូរជីវចលជាច្រើនហួសពីពណ៌សំប៉ែត ដោយបន្ថែមវាយនភាព ជម្រាល ឬបង្ហាញព័ត៌មានលម្អិតទៅអក្សរ។ ពេលខ្លះវាជាវាយនភាព ពេលខ្លះវាអាចជាពណ៌ជម្រាលជាមួយនឹងការផ្លាស់ប្តូរសំនៀងតិចៗ។ នៅលើបណ្តាញ ខ្ញុំអាចបង្កើតបែបផែននេះឡើងវិញដោយប្រើរូបភាពផ្ទៃខាងក្រោយ ឬពណ៌ជម្រាលនៅពីក្រោយអត្ថបទ ហើយបន្ទាប់មកកាត់វាទៅជារាងអក្សរ។ វាពឹងផ្អែកលើលក្ខណៈសម្បត្តិពីរដែលធ្វើការជាមួយគ្នា៖ ឈុតផ្ទៃខាងក្រោយ៖ អត្ថបទ និងពណ៌បំពេញអត្ថបទ៖ ថ្លា។
ដំបូងខ្ញុំអនុវត្តផ្ទៃខាងក្រោយនៅខាងក្រោយអត្ថបទ។ នេះអាចជាផែនទីប៊ីត ឬរូបភាពវ៉ិចទ័រ ឬជម្រាល CSS ។ សម្រាប់ឧទាហរណ៍នេះពីវគ្គ Quick Draw McGraw “Baba Bait” អត្ថបទចំណងជើងរួមមានជម្រាលកំពូល-ខាងក្រោមស្រាលៗពីងងឹតទៅពន្លឺ៖ ផ្ទៃខាងក្រោយ៖ ជម្រាលលីនេអ៊ែរ(0deg, #667b6a, #1d271a);
បន្ទាប់មក ខ្ញុំកាត់ផ្ទៃខាងក្រោយនោះទៅជាក្រាហ្វិក ហើយធ្វើឱ្យអត្ថបទមានតម្លាភាព ដូច្នេះផ្ទៃខាងក្រោយបង្ហាញតាមរយៈ៖ -webkit-background-clip៖ អត្ថបទ; -webkit-text-fill-color: ថ្លា;
ដោយគ្រាន់តែបន្ទាត់ទាំងពីរនោះ ផ្ទៃខាងក្រោយមិនត្រូវបានលាបពណ៌នៅពីក្រោយអត្ថបទទៀតទេ។ ផ្ទុយទៅវិញវាត្រូវបានលាបពណ៌នៅក្នុងវា។ បច្ចេកទេសនេះមានប្រសិទ្ធភាពជាពិសេសនៅពេលរួមបញ្ចូលគ្នាជាមួយនឹងការដាច់សរសៃឈាមខួរក្បាលនិងស្រមោល។ ជម្រាលដែលបានកាត់ផ្តល់នូវអក្សរជាមួយនឹងពណ៌ និងវាយនភាព ការដាច់សរសៃឈាមខួរក្បាលរក្សាគែមរបស់វាឱ្យមុតស្រួច ហើយស្រមោលលើកវាពីផ្ទៃខាងក្រោយ។ រួមគ្នាពួកគេបង្កើតរូបរាងជាស្រទាប់នៃប័ណ្ណចំណងជើងដែលគូរដោយដៃដោយប្រើអ្វីក្រៅពី CSS បន្តិច។ ដូចសព្វមួយដង សាកល្បងអត្ថបទដែលបានកាត់ដោយប្រុងប្រយ័ត្ន ព្រោះពេលខ្លះកម្មវិធីរុករកអាចប៉ះពាល់ដល់ស្រមោល និងការបង្ហាញ។ ការបំបែកអត្ថបទទៅជាតួអក្សរបុគ្គល ពេលខ្លះខ្ញុំមិនចង់ធ្វើរចនាប័ទ្មពាក្យទាំងមូលឬក្បាល។ ខ្ញុំចង់រចនាអក្សរនីមួយៗ — ដើម្បីដាក់តួអក្សរមួយឱ្យចូលកន្លែង ផ្តល់ទម្ងន់បន្ថែមមួយ glyph ឬធ្វើចលនាអក្សរពីរបីដោយឯករាជ្យ។ នៅក្នុង HTML និង CSS ធម្មតា មានវិធីដែលអាចទុកចិត្តបានតែមួយគត់ដើម្បីធ្វើវា៖ រុំតួអក្សរនីមួយៗនៅក្នុងធាតុវិសាលភាពរបស់វា។ ខ្ញុំអាចធ្វើវាដោយដៃ ប៉ុន្តែវានឹងមានភាពផុយស្រួយ ពិបាកក្នុងការថែទាំ ហើយនឹងដាច់ពីគ្នាភ្លាមៗនៅពេលចម្លងការផ្លាស់ប្តូរ។ ផ្ទុយទៅវិញ នៅពេលដែលខ្ញុំត្រូវការការគ្រប់គ្រងក្នុងមួយអក្សរ ខ្ញុំប្រើបណ្ណាល័យបំបែកអត្ថបទដូចជា splt.js (ទោះបីជាមានដំណោះស្រាយផ្សេងទៀតក៏ដោយ)។ វាយកថ្នាំងអត្ថបទ ហើយរុំពាក្យ ឬតួអក្សរដោយស្វ័យប្រវត្តិ ផ្តល់ឱ្យខ្ញុំនូវទំពក់បន្ថែមដើម្បីធ្វើចលនា និងរចនាប័ទ្មដោយមិនធ្វើឱ្យមានការសម្គាល់របស់ខ្ញុំរញ៉េរញ៉ៃ។ វាជាវិធីសាស្រ្តដែលរក្សា HTML របស់ខ្ញុំអាចអានបាន និងមានន័យ ខណៈពេលដែលផ្តល់ឱ្យខ្ញុំនូវការគ្រប់គ្រងល្អិតល្អន់ ខ្ញុំត្រូវការបង្កើតឡើងវិញនូវភាពមិនស្មើគ្នា និងតួអក្សរដែលអ្នកឃើញនៅក្នុងកាតចំណងជើងគំនូរជីវចលបុរាណ។ ទោះជាយ៉ាងណាក៏ដោយវិធីសាស្រ្តនេះភ្ជាប់មកជាមួយការព្រមានអំពីលទ្ធភាពចូលប្រើគឺដោយសារអ្នកអានអេក្រង់ភាគច្រើនអានថ្នាំងអត្ថបទតាមលំដាប់លំដោយ។ ដូច្នេះនេះ៖
Hum Sweet Hum
…អានដូចដែលអ្នករំពឹងទុក៖ ហ៊ឹម ហ៊ឹម ផ្អែម
ប៉ុន្តែនេះ៖
H u m
… អាចត្រូវបានបកស្រាយខុសគ្នាអាស្រ័យលើកម្មវិធីរុករក និងកម្មវិធីអានអេក្រង់។ អ្នកខ្លះនឹងភ្ជាប់អក្សរ និងអានពាក្យបានត្រឹមត្រូវ។ អ្នកផ្សេងទៀតអាចផ្អាករវាងអក្សរ ដែលនៅក្នុងសេណារីយ៉ូដែលអាក្រក់បំផុតអាចស្តាប់ទៅដូចជា៖ “ហ…” “អ៊ូ…” “ម…”
គួរឲ្យសោកស្តាយ ដំណោះស្រាយបំបែកមួយចំនួនមិនផ្តល់លទ្ធផលដែលអាចចូលប្រើបានជានិច្ច ដូច្នេះខ្ញុំបានសរសេរកម្មវិធីបំបែកអត្ថបទផ្ទាល់ខ្លួនរបស់ខ្ញុំគឺ splinter.js ដែលបច្ចុប្បន្នស្ថិតនៅក្នុងបេតា។ ការផ្លាស់ប្តូរអក្សរបុគ្គល ដើម្បីដំណើរការ Toon Text Splitter របស់ខ្ញុំ ខ្ញុំបន្ថែម data-attribute ទៅធាតុដែលខ្ញុំចង់បំបែក៖
Hum Sweet Hum
ទីមួយ ស្គ្រីបរបស់ខ្ញុំបំបែកពាក្យនីមួយៗទៅជាអក្សរនីមួយៗ ហើយរុំវានៅក្នុងធាតុវិសាលភាពជាមួយនឹងថ្នាក់ និងគុណលក្ខណៈ ARIA ដែលត្រូវបានអនុវត្ត៖
បន្ទាប់មកស្គ្រីបយកខ្លឹមសារដំបូងនៃធាតុបំបែក ហើយបន្ថែមវាជាគុណលក្ខណៈ aria ដើម្បីជួយរក្សាភាពងាយស្រួល៖
ជាមួយនឹងគុណលក្ខណៈថ្នាក់ទាំងនោះដែលបានអនុវត្ត បន្ទាប់មកខ្ញុំអាចកំណត់រចនាប័ទ្មតួអក្សរនីមួយៗតាមដែលខ្ញុំជ្រើសរើស។
ឧទាហរណ៍ សម្រាប់ "Hum Sweet Hum" ខ្ញុំចង់ចម្លងពីរបៀបដែលអក្សររបស់វាផ្លាស់ប្តូរឆ្ងាយពីបន្ទាត់គោល។ បន្ទាប់ពីប្រើ Toon Text Splitter របស់ខ្ញុំ ខ្ញុំបានអនុវត្តតម្លៃបកប្រែបួនផ្សេងគ្នាដោយប្រើ : nth-child selectors ជាច្រើនដើម្បីបង្កើតរូបរាងពាក់កណ្តាលចៃដន្យ៖ /*ទី៤ ទី៨ ទី១២...*/ .toon-char:nth-child(4n) { បកប្រែ៖ 0 -8px; } /* ទី 1, ទី 5, ទី 9 ... */ .toon-char:nth-child(4n+1) { បកប្រែ៖ 0 -4px; } /* ទី 2 ទី 6 ទី 10 ... */ .toon-char:nth-child(4n+2) { បកប្រែ៖ 0 4px; } /* ទី 3, ទី 7, ទី 11 ... */ .toon-char:nth-child(4n+3) { បកប្រែ៖ 0 8px; }
ប៉ុន្តែការបកប្រែគឺជាទ្រព្យសម្បត្តិតែមួយគត់ដែលខ្ញុំអាចប្រើដើម្បីបំប្លែងអត្ថបទតូនរបស់ខ្ញុំ។
ខ្ញុំក៏អាចបង្វិលតួឯកៗទាំងនោះសម្រាប់មើលទៅកាន់តែវឹកវរទៀតផង៖ /*ទី៤ ទី៨ ទី១២...*/ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* ទី 1, ទី 5, ទី 9 ... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* ទី 2 ទី 6 ទី 10 ... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* ទី 3, ទី 7, ទី 11 ... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
ប៉ុន្តែការបកប្រែគឺជាទ្រព្យសម្បត្តិតែមួយគត់ដែលខ្ញុំអាចប្រើដើម្បីបំប្លែងអត្ថបទតូនរបស់ខ្ញុំ។ ខ្ញុំក៏អាចបង្វិលតួឯកៗទាំងនោះសម្រាប់មើលទៅកាន់តែវឹកវរទៀតផង៖ /*ទី៤ ទី៨ ទី១២...*/ .toon-line .toon-char:nth-child(4n) { បង្វិល: -4deg; }
/* ទី 1, ទី 5, ទី 9 ... */ .toon-char:nth-child(4n+1) { បង្វិល: -8 ដឺក្រេ; }
/* ទី 2 ទី 6 ទី 10 ... */ .toon-char:nth-child(4n+2) { បង្វិល: 4deg; }
/* ទី 3, ទី 7, ទី 11 ... */ .toon-char:nth-child(4n+3) { បង្វិល: 8 ដឺក្រេ; }
ហើយជាការពិតណាស់ ខ្ញុំអាចបន្ថែមគំនូរជីវចលដើម្បីលេងសើចតួអក្សរទាំងនោះ ហើយនាំយកចំណងជើងរចនាប័ទ្មអត្ថបទរបស់ខ្ញុំទៅជាជីវិត។ ដំបូងខ្ញុំបានបង្កើតចលនា keyframe ដែលបង្វិលតួអក្សរ៖
@keyframes លេងសើច { 0%, 100% { បំប្លែង៖ បង្វិល(var(--base-rotate, 0deg)); } 25% { បំប្លែង៖ បង្វិល(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
មុនពេលអនុវត្តវាទៅធាតុវិសាលភាពដែលបង្កើតឡើងដោយ Toon Text Splitter របស់ខ្ញុំ៖ .toon-char { ចលនា៖ កន្ត្រាក់ 3s ភាពងាយស្រួលគ្មានកំណត់ ចូល-ចេញ; ប្រភពដើមនៃការផ្លាស់ប្តូរ៖ កណ្តាលខាងក្រោម; }
ហើយចុងក្រោយ កំណត់ចំនួនបង្វិល និងការពន្យាពេល មុនពេលតួអក្សរនីមួយៗចាប់ផ្តើមកន្ត្រាក់៖ .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
ស៊ុមមួយដើម្បីធ្វើឱ្យមានការចាប់អារម្មណ៍ សិល្បករចំណងជើងគំនូរជីវចលមានស៊ុមមួយដើម្បីធ្វើឱ្យមានការចាប់អារម្មណ៍ ហើយការវាយអក្សររបស់ពួកគេមានសារៈសំខាន់ដូចស្នាដៃសិល្បៈដែលពួកគេគូរ។ ដូចគ្នាដែរនៅលើគេហទំព័រ។ បឋមកថា ឬវីរបុរសដែលបានរចនាយ៉ាងល្អតំបន់ត្រូវការភាពច្បាស់លាស់ ចរិតលក្ខណៈ និងទំនុកចិត្ត — មិនមែនគ្រាន់តែជារូបភាពផ្ទៃខាងក្រោយពេញទទឹងនោះទេ។ ជាមួយនឹងលក្ខណៈសម្បត្តិ CSS ដែលបានជ្រើសរើសយ៉ាងប្រុងប្រយ័ត្នមួយចំនួន — ស្រមោល, ជំងឺដាច់សរសៃឈាមខួរក្បាល, ផ្ទៃខាងក្រោយដែលបានច្រឹប និងចលនាដែលរារាំងមួយចំនួន — យើងអាចបង្កើតផលប៉ះពាល់ដូចគ្នានេះ។ ខ្ញុំចូលចិត្តអក្សរ Toon មិនមែនដោយសារតែខ្ញុំអាឡោះអាល័យនោះទេ ប៉ុន្តែដោយសារតែការរចនារបស់វាមានចេតនា។ ធ្វើការជ្រើសរើសដោយចេតនា ហើយអនុញ្ញាតឱ្យការវាយអត្ថបទអក្សរតូច បន្ថែមកណ្តាប់ដៃទៅការរចនារបស់អ្នក។
