ថ្មីៗនេះ ខ្ញុំបានធ្វើឱ្យក្រាហ្វិកមានចលនាឡើងវិញនៅលើគេហទំព័ររបស់ខ្ញុំជាមួយនឹងប្រធានបទថ្មី និងក្រុមតួអង្គត្រួសត្រាយ ដោយដាក់ឱ្យអនុវត្តនូវបច្ចេកទេសជាច្រើនដែលខ្ញុំបានចែករំលែកនៅក្នុងស៊េរីនេះ។ គំនូរជីវចលមួយចំនួនរបស់ខ្ញុំផ្លាស់ប្តូររូបរាងនៅពេលដែលនរណាម្នាក់ធ្វើអន្តរកម្មជាមួយពួកគេ ឬនៅពេលផ្សេងគ្នានៃថ្ងៃ។
ពណ៌នៅក្នុងក្រាហ្វិកនៅលើទំព័រប្លក់របស់ខ្ញុំផ្លាស់ប្តូរពីព្រឹករហូតដល់យប់ជារៀងរាល់ថ្ងៃ។ បន្ទាប់មក មានមុខងារព្រិល ដែលបន្ថែមពណ៌ត្រជាក់ និងរចនាប័ទ្មរដូវរងា ដោយមានការគួរសមនៃស្រទាប់ជាន់លើ និងរបៀបលាយបញ្ចូលគ្នា។
ខណៈពេលដែលកំពុងធ្វើការលើបញ្ហានេះ ខ្ញុំចាប់ផ្តើមឆ្ងល់ថាតើតម្លៃពណ៌ដែលទាក់ទងគ្នារបស់ CSS អាចផ្តល់ឱ្យខ្ញុំនូវការគ្រប់គ្រងបន្ថែមទៀត ខណៈពេលដែលការធ្វើឱ្យដំណើរការកាន់តែងាយស្រួលផងដែរ។ ចំណាំ៖ នៅក្នុងមេរៀននេះ ខ្ញុំនឹងផ្តោតលើតម្លៃពណ៌ដែលទាក់ទង និងទំហំពណ៌ OKLCH សម្រាប់ក្រាហ្វិក និងចលនា។ ប្រសិនបើអ្នកចង់ចូលជ្រៅទៅក្នុងពណ៌ដែលទាក់ទង Ahmad Shadeed បានបង្កើតការណែនាំអន្តរកម្មដ៏អស្ចារ្យមួយ។ សម្រាប់ចន្លោះពណ៌ gamuts និង OKLCH លោក Geoff Graham ផ្ទាល់របស់យើងបានសរសេរអំពីពួកគេ។
ការប្រើប្រាស់ធាតុដដែលៗគឺជាគន្លឹះ។ ផ្ទៃខាងក្រោយត្រូវបានប្រើឡើងវិញនៅពេលដែលអាចធ្វើទៅបាន ដោយមានការពង្រីក និងការត្រួតគ្នាជួយបង្កើតឈុតឆាកថ្មីពីស្នាដៃសិល្បៈដដែល។ វាកើតចេញពីភាពចាំបាច់ ប៉ុន្តែវាក៏បានលើកទឹកចិត្តដល់ការគិតក្នុងន័យនៃស៊េរី ជាជាងឈុតបុគ្គល។ បញ្ហាជាមួយនឹងការធ្វើបច្ចុប្បន្នភាពក្ដារលាយពណ៌ដោយដៃ ចូរយើងត្រង់ទៅការប្រឈមរបស់ខ្ញុំ។ នៅក្នុង Toon Titles ដូចរឿងមួយនេះ — ផ្អែកលើកម្មវិធី Yogi Bear Show ឆ្នាំ 1959 “Lullabye-Bye Bear” — ហើយជាទូទៅការងាររបស់ខ្ញុំ ក្ដារលាយត្រូវបានកំណត់ចំពោះពណ៌មួយចំនួនដែលជ្រើសរើស។
ខ្ញុំបង្កើតស្រមោល និងពណ៌ពីអ្វីដែលខ្ញុំហៅថា "មូលដ្ឋាន" ពណ៌របស់ខ្ញុំ ដើម្បីពង្រីកក្ដារលាយដោយមិនបន្ថែមពណ៌លាំៗបន្ថែមទៀត។
នៅក្នុង Sketch ខ្ញុំធ្វើការនៅក្នុងចន្លោះពណ៌ HSL ដូច្នេះដំណើរការនេះពាក់ព័ន្ធនឹងការបង្កើន ឬបន្ថយតម្លៃពន្លឺនៃពណ៌គ្រឹះរបស់ខ្ញុំ។ និយាយតាមត្រង់ទៅ វាមិនមែនជាកិច្ចការដ៏លំបាកនោះទេ ប៉ុន្តែការជ្រើសរើសពណ៌គ្រឹះផ្សេង ទាមទារការបង្កើតស្រមោល និងពណ៌ថ្មីទាំងស្រុង។ ការធ្វើវាដោយដៃ ម្តងហើយម្តងទៀត ឆាប់ជានឿយហត់។
ខ្ញុំបានលើកឡើងអំពី HSL — H (ពណ៌លាំ) S (តិត្ថិភាព) និង L (ពន្លឺ) — ចន្លោះពណ៌ ប៉ុន្តែនោះគ្រាន់តែជាវិធីមួយក្នុងចំណោមវិធីជាច្រើនដើម្បីពណ៌នាអំពីពណ៌។ RGB — R (ក្រហម), G (បៃតង), B (ខៀវ) — ប្រហែលជាធ្លាប់ស្គាល់បំផុត យ៉ាងហោចណាស់នៅក្នុងទម្រង់ Hex របស់វា។ វាក៏មាន LAB — L (ពន្លឺ), A (បៃតង-ក្រហម), B (ខៀវ-លឿង) — និងថ្មីជាងនេះ ប៉ុន្តែឥឡូវនេះបានគាំទ្រយ៉ាងទូលំទូលាយ LCH — L (ពន្លឺ), C (chroma), H (ពណ៌លាំ) — គំរូនៅក្នុងទម្រង់ OKLCH របស់វា។ ជាមួយនឹង LCH — ជាពិសេស OKLCH នៅក្នុង CSS — ខ្ញុំអាចកែតម្រូវតម្លៃពន្លឺនៃពណ៌គ្រឹះរបស់ខ្ញុំ។
ឬខ្ញុំអាចផ្លាស់ប្តូរ chroma របស់វា។ LCH chroma និង HSL saturation ទាំងពីរពណ៌នាអំពីអាំងតង់ស៊ីតេ ឬភាពសម្បូរបែបនៃពណ៌ ប៉ុន្តែពួកវាធ្វើដូច្នេះតាមវិធីផ្សេងៗគ្នា។ LCH ផ្តល់ឱ្យខ្ញុំនូវជួរកាន់តែទូលំទូលាយ និងការលាយបញ្ចូលគ្នាដែលអាចព្យាករណ៍បានកាន់តែច្រើនរវាងពណ៌។
ខ្ញុំក៏អាចផ្លាស់ប្តូរពណ៌លាំៗ ដើម្បីបង្កើតក្ដារលាយនៃពណ៌ដែលចែករំលែកពន្លឺ និងតម្លៃក្រូម៉ាដូចគ្នា។ នៅក្នុង HSL និង LCH វិសាលគមពណ៌លាំៗចាប់ផ្តើមពីពណ៌ក្រហម ផ្លាស់ទីតាមរយៈពណ៌បៃតង និងពណ៌ខៀវ ហើយត្រឡប់ទៅពណ៌ក្រហមវិញ។
ហេតុអ្វីបានជា OKLCH ផ្លាស់ប្តូររបៀបដែលខ្ញុំគិតអំពីពណ៌ ការគាំទ្រកម្មវិធីរុករកតាមអ៊ីនធឺណិតសម្រាប់ទំហំពណ៌ OKLCH ឥឡូវនេះត្រូវបានរីករាលដាល ទោះបីជាឧបករណ៍រចនា — រួមទាំង Sketch — មិនទាន់បានចាប់។ ជាសំណាងល្អ វាមិនគួរបញ្ឈប់អ្នកពីការប្រើប្រាស់ OKLCH ទេ។ កម្មវិធីរុករកនឹងរីករាយបំប្លែងតម្លៃ Hex, HSL, LAB និង RGB ទៅជា OKLCH សម្រាប់អ្នក។ អ្នកអាចកំណត់លក្ខណសម្បត្តិផ្ទាល់ខ្លួន CSS ជាមួយនឹងពណ៌គ្រឹះក្នុងចន្លោះណាមួយ រួមទាំង Hex៖ /* ពណ៌គ្រឹះ*/ --foundation: #5accd6;
ពណ៌ណាមួយដែលបានមកពីវានឹងត្រូវបានបំប្លែងទៅជា OKLCH ដោយស្វ័យប្រវត្តិ៖ --foundation-light: oklch(ពី var(--foundation) [...]; } --foundation-mid: oklch(ពី var(--foundation) [...]; } --foundation-dark: oklch(ពី var(--foundation) [...]; }
ពណ៌ដែលទាក់ទងជាប្រព័ន្ធរចនា សូមគិតអំពីពណ៌ដែលទាក់ទងនឹងការនិយាយ៖ "យកពណ៌នេះ កែប្រែវា រួចផ្តល់លទ្ធផលឱ្យខ្ញុំ។" មានវិធីពីរយ៉ាងក្នុងការកែតម្រូវពណ៌៖ ការផ្លាស់ប្តូរដាច់ខាត និងការផ្លាស់ប្តូរសមាមាត្រ។ ពួកវាមើលទៅស្រដៀងគ្នានៅក្នុងកូដ ប៉ុន្តែមានឥរិយាបទខុសគ្នាខ្លាំងនៅពេលដែលអ្នកចាប់ផ្តើមប្តូរពណ៌មូលដ្ឋាន។ ការយល់ថាភាពខុសគ្នានោះគឺជាអ្វីដែលអាចប្រែក្លាយការប្រើពណ៌ដែលទាក់ទងទៅជាប្រព័ន្ធ។ /* ពណ៌គ្រឹះ*/ --foundation: #5accd6;
ឧទាហរណ៍ តម្លៃពន្លឺនៃពណ៌គ្រឹះរបស់ខ្ញុំគឺ 0.7837 ខណៈពេលដែលកំណែងងឹតមានតម្លៃ 0.5837។ ដើម្បីគណនាភាពខុសគ្នា ខ្ញុំដកតម្លៃទាបពីតម្លៃខ្ពស់ជាង ហើយអនុវត្តលទ្ធផលដោយប្រើមុខងារ calc()៖ - មូលដ្ឋាន - ងងឹត៖ oklch(ពី var(--foundation) calc(l - 0.20) c h);
ដើម្បីសម្រេចបាននូវពណ៌ស្រាលជាងមុន ខ្ញុំបន្ថែមភាពខុសគ្នាជំនួសវិញ៖ - ពន្លឺមូលដ្ឋាន៖ oklch(ពី var(--foundation) calc(l + 0.10) c h);
ក្រូម៉ាការកែតំរូវតាមដំណើរការដូចគ្នា។ ដើម្បីកាត់បន្ថយអាំងតង់ស៊ីតេនៃពណ៌គ្រឹះរបស់ខ្ញុំពី 0.1035 ទៅ 0.0035 ខ្ញុំដកតម្លៃមួយពីតម្លៃផ្សេងទៀត៖ oklch(ពី var(--foundation) លីត្រ calc (c - 0.10) ម៉ោង);
ដើម្បីបង្កើតពណ៌លាំៗ ខ្ញុំគណនាភាពខុសគ្នារវាងតម្លៃពណ៌លាំៗនៃពណ៌គ្រឹះរបស់ខ្ញុំ (200) និងពណ៌លាំថ្មីរបស់ខ្ញុំ (260)៖ oklch(ពី var(--foundation) លីត្រ c calc (h + 60));
ការគណនាទាំងនោះគឺដាច់ខាត។ នៅពេលខ្ញុំដកចំនួនថេរ ខ្ញុំនិយាយយ៉ាងមានប្រសិទ្ធភាពថា "ដកចំនួននេះជានិច្ច"។ អនុវត្តដូចគ្នានៅពេលបន្ថែមតម្លៃថេរ៖ calc (c - 0.10) calc(c + 0.10)
ខ្ញុំបានរៀនពីដែនកំណត់នៃវិធីសាស្រ្តនេះ តាមរបៀបពិបាក។ នៅពេលដែលខ្ញុំពឹងផ្អែកលើការដកតម្លៃ chroma ថេរ ពណ៌បានធ្លាក់ចុះឆ្ពោះទៅរកពណ៌ប្រផេះភ្លាមៗនៅពេលដែលខ្ញុំបានផ្លាស់ប្តូរគ្រឹះ។ ក្ដារលាយដែលប្រើសម្រាប់ពណ៌មួយបានដាច់ដាច់សម្រាប់ពណ៌ផ្សេង។ គុណមានឥរិយាបទខុសគ្នា។ នៅពេលដែលខ្ញុំគុណក្រូម៉ា ខ្ញុំកំពុងប្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតថា "កាត់បន្ថយភាពតានតឹងនៃពណ៌នេះតាមសមាមាត្រ។" ទំនាក់ទំនងរវាងពណ៌នៅតែនៅដដែល សូម្បីតែពេលដែលគ្រឹះផ្លាស់ប្តូរ៖ calc (c * 0.10)
ផ្លាស់ទីវា ធ្វើមាត្រដ្ឋានវា បង្វិលវា ច្បាប់
ផ្លាស់ទីពន្លឺ (បន្ថែមឬដក), ធ្វើមាត្រដ្ឋានក្រូម៉ា (គុណ), បង្វិលពណ៌លាំៗ (បន្ថែម ឬដកដឺក្រេ)។
ខ្ញុំធ្វើមាត្រដ្ឋានក្រូម៉ា ដោយសារខ្ញុំចង់ឱ្យមានការផ្លាស់ប្ដូរអាំងតង់ស៊ីតេ ដើម្បីរក្សាសមាមាត្រនឹងពណ៌មូលដ្ឋាន។ ទំនាក់ទំនងពណ៌លាំៗគឺបង្វិល ដូច្នេះការគុណពណ៌លាំៗគ្មានន័យទេ។ ពន្លឺគឺជាការយល់ឃើញ និងដាច់ខាត — ការគុណវាជាញឹកញាប់ផ្តល់លទ្ធផលចម្លែក។
ពីពណ៌មួយទៅស្បែកទាំងមូល ពណ៌ដែលទាក់ទងគ្នាអនុញ្ញាតឱ្យខ្ញុំកំណត់ពណ៌គ្រឹះ និងបង្កើតពណ៌ផ្សេងទៀតដែលខ្ញុំត្រូវការ - បំពេញ, ដាច់សរសៃឈាមខួរក្បាល, ជម្រាលជម្រាល, ស្រមោល - ពីវា។ នៅពេលនោះ ពណ៌ឈប់ជាក្ដារលាយ ហើយចាប់ផ្តើមជាប្រព័ន្ធ។ រូបភាព SVG មានទំនោរនឹងប្រើពណ៌ពីរបីដដែលៗ លើការបំពេញ ការគូស និងពណ៌ជម្រាល។ ពណ៌ដែលទាក់ទងអនុញ្ញាតឱ្យអ្នកកំណត់ទំនាក់ទំនងទាំងនោះម្តង ហើយប្រើវាឡើងវិញនៅគ្រប់ទីកន្លែង ដូចជាអ្នកបង្កើតចលនាបានប្រើផ្ទៃខាងក្រោយឡើងវិញដើម្បីបង្កើតឈុតថ្មី។
ផ្លាស់ប្តូរពណ៌គ្រឹះម្តង ហើយរាល់ពណ៌ដែលបានមកពី អាប់ដេតដោយស្វ័យប្រវត្តិ ដោយមិនចាំបាច់គណនាអ្វីទាំងអស់ដោយដៃ។ នៅខាងក្រៅក្រាហ្វិកដែលមានចលនា ខ្ញុំអាចប្រើវិធីសាស្រ្តដូចគ្នានេះដើម្បីកំណត់ពណ៌សម្រាប់ស្ថានភាពនៃធាតុអន្តរកម្មដូចជាប៊ូតុង និងតំណភ្ជាប់។ ពណ៌មូលដ្ឋានដែលខ្ញុំបានប្រើនៅក្នុង "Lullabye-Bye Bear" Toon Title របស់ខ្ញុំគឺជាពណ៌ខៀវដែលមើលទៅខៀវស្រងាត់។ ផ្ទៃខាងក្រោយគឺជាជម្រាលរ៉ាឌីកាល់រវាងគ្រឹះរបស់ខ្ញុំ និងកំណែងងឹត
ដើម្បីបង្កើតកំណែជំនួសដោយអារម្មណ៍ខុសគ្នាទាំងស្រុង ខ្ញុំគ្រាន់តែត្រូវផ្លាស់ប្តូរពណ៌គ្រឹះប៉ុណ្ណោះ៖ --foundation: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(ពី var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
ដើម្បីភ្ជាប់លក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនទាំងនោះទៅនឹងជម្រាល SVG របស់ខ្ញុំដោយមិនចម្លងតម្លៃពណ៌ ខ្ញុំបានជំនួសតម្លៃពណ៌បញ្ឈប់កូដរឹងជាមួយនឹងរចនាប័ទ្មក្នុងជួរ៖
បន្ទាប់មកទៀត ខ្ញុំត្រូវតែធានាថា អត្ថបទ Toon របស់ខ្ញុំតែងតែផ្ទុយស្រឡះជាមួយនឹងពណ៌គ្រឹះណាមួយដែលខ្ញុំជ្រើសរើស។ ការបង្វិលពណ៌លាំៗ 180deg បង្កើតពណ៌បន្ថែមដែលប្រាកដជាលេចចេញមក - ប៉ុន្តែអាចញ័រដោយមិនស្រួល៖ .text-light { បំពេញ៖ oklch(ពី var(--foundation) លីត្រ c calc (h + 180)); }
ការផ្លាស់ប្តូរ 90° បង្កើតពណ៌បន្ទាប់បន្សំដ៏រស់រវើកដោយមិនត្រូវបានបំពេញបន្ថែមទាំងស្រុង៖ .text-light { បំពេញ៖ oklch(ពី var(--foundation) លីត្រ c calc (ម៉ោង - 90)); }
ការកំសាន្តរបស់ខ្ញុំនៃ Quick Draw McGraw's 1959 Toon Title “El Kabong” ប្រើបច្ចេកទេសដូចគ្នា ប៉ុន្តែជាមួយនឹងក្ដារលាយចម្រុះជាង។ ជាឧទាហរណ៍ មានជម្រាលរ៉ាឌីកាល់មួយទៀតរវាងពណ៌គ្រឹះ និងម្លប់ងងឹត។
អគារ និងដើមឈើនៅផ្ទៃខាងក្រោយគឺគ្រាន់តែជាស្រមោលផ្សេងគ្នានៃពណ៌គ្រឹះដូចគ្នា។ សម្រាប់ផ្លូវទាំងនោះ ខ្ញុំត្រូវការពណ៌បំពេញបន្ថែមចំនួនពីរ៖ .bg-ពាក់កណ្តាល { បំពេញ៖ oklch(ពី var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-ងងឹត { បំពេញ៖ oklch(ពី var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
នៅពេលដែលគ្រឹះចាប់ផ្តើមផ្លាស់ទី
រហូតមកដល់ពេលនេះ អ្វីគ្រប់យ៉ាងដែលខ្ញុំបានបង្ហាញគឺឋិតិវន្ត។ សូម្បីតែនៅពេលដែលនរណាម្នាក់ប្រើឧបករណ៍ជ្រើសរើសពណ៌ដើម្បីផ្លាស់ប្តូរពណ៌គ្រឹះក៏ដោយ ការផ្លាស់ប្តូរនោះនឹងកើតឡើងភ្លាមៗ។ ប៉ុន្តែក្រាហ្វិកដែលមានចលនាកម្រនឹងនៅស្ងៀម — តម្រុយគឺស្ថិតនៅក្នុងឈ្មោះ។ ដូច្នេះ ប្រសិនបើពណ៌ជាផ្នែកមួយនៃប្រព័ន្ធ នោះក៏គ្មានហេតុផលដែលវាមិនអាចធ្វើចលនាបានដែរ។
ដើម្បីធ្វើឱ្យពណ៌គ្រឹះមានចលនា ជាដំបូងខ្ញុំត្រូវបំបែកវាជាឆានែល OKLCH របស់វា។- ពន្លឺ ក្រូម៉ា និងពណ៌លាំៗ។ ប៉ុន្តែមានជំហានបន្ថែមដ៏សំខាន់មួយ៖ ខ្ញុំត្រូវចុះឈ្មោះតម្លៃទាំងនោះជាលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនដែលបានវាយបញ្ចូល។ ប៉ុន្តែតើវាមានន័យយ៉ាងណា?
តាមលំនាំដើម កម្មវិធីរុករកតាមអ៊ីនធឺណិតមិនដឹងថាតើតម្លៃទ្រព្យសម្បត្តិផ្ទាល់ខ្លួនរបស់ CSS តំណាងឱ្យពណ៌ ប្រវែង លេខ ឬអ្វីផ្សេងទៀតទាំងស្រុងនោះទេ។ នោះច្រើនតែមានន័យថា ពួកវាមិនអាចត្រូវបានបកស្រាយដោយរលូនក្នុងអំឡុងពេលមានចលនា ហើយលោតពីតម្លៃមួយទៅតម្លៃបន្ទាប់។
ការចុះឈ្មោះទ្រព្យសម្បត្តិផ្ទាល់ខ្លួនប្រាប់កម្មវិធីរុករកអំពីប្រភេទតម្លៃដែលវាតំណាង និងរបៀបដែលវាគួរមានឥរិយាបទតាមពេលវេលា។ ក្នុងករណីនេះ ខ្ញុំចង់ឱ្យកម្មវិធីរុករកតាមអ៊ីនធឺណិតចាត់ទុកឆានែលពណ៌របស់ខ្ញុំជាលេខ ដូច្នេះពួកគេអាចមានចលនាយ៉ាងរលូន។
@property --f-l {
វាក្យសម្ព័ន្ធ៖ "
@property --f-c {
វាក្យសម្ព័ន្ធ៖ "
@property --f-h {
វាក្យសម្ព័ន្ធ៖ "
នៅពេលដែលបានចុះឈ្មោះ លក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនទាំងនេះមានឥរិយាបទដូចជា CSS ដើម។ កម្មវិធីរុករកអាចធ្វើអន្តរកម្មពួកវាពីស៊ុមដោយស៊ុម។ បន្ទាប់មកខ្ញុំបង្កើតពណ៌គ្រឹះឡើងវិញពីឆានែលទាំងនោះ៖ --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
វាធ្វើឱ្យពណ៌គ្រឹះប្រែទៅជាមានចលនា ដូចជាតម្លៃលេខផ្សេងទៀតដែរ។ នេះគឺជាចលនា "ដកដង្ហើម" សាមញ្ញដែលផ្លាស់ប្តូរពន្លឺដោយទន់ភ្លន់តាមពេលវេលា៖ @keyframes ដកដង្ហើម { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { ចលនា: ដកដង្ហើម 10s ងាយស្រួលចូល - ចេញគ្មានកំណត់; }
ដោយសារតែរាល់ពណ៌ផ្សេងទៀតនៅក្នុងការបំពេញ ជម្រាល និងជំងឺដាច់សរសៃឈាមខួរក្បាលគឺមកពី --foundation ពួកវាទាំងអស់មានចលនាជាមួយគ្នា ហើយគ្មានអ្វីត្រូវអាប់ដេតដោយដៃទេ។ ពណ៌មានចលនាតែមួយ បែបផែនជាច្រើន។ នៅពេលចាប់ផ្តើមនៃដំណើរការនេះ ខ្ញុំបានឆ្ងល់ថាតើតម្លៃពណ៌ដែលទាក់ទងគ្នារបស់ CSS អាចផ្តល់លទ្ធភាពកាន់តែច្រើន ខណៈពេលដែលធ្វើឱ្យពួកគេកាន់តែងាយស្រួលក្នុងការអនុវត្ត។ ថ្មីៗនេះ ខ្ញុំបានបន្ថែមផ្ទៃខាងក្រោយអណ្តូងរ៉ែមាសថ្មីទៅកាន់ទំព័រទំនាក់ទំនងនៃគេហទំព័ររបស់ខ្ញុំ ហើយការនិយាយឡើងវិញជាលើកដំបូងរួមមានចង្កៀងប្រេងដែលបញ្ចេញពន្លឺ និងបង្វិល។
ខ្ញុំចង់ស្វែងយល់ពីរបៀបដែលមានចលនាពណ៌ដែលទាក់ទង CSS អាចធ្វើឱ្យផ្ទៃខាងក្នុងអណ្តូងរ៉ែមានភាពប្រាកដនិយមដោយការលាបពណ៌វាដោយពណ៌ពីចង្កៀង។ ខ្ញុំចង់ឲ្យពួកគេប៉ះពាល់ដល់ពិភពលោកជុំវិញពួកគេតាមរបៀបដែលពន្លឺពិតធ្វើ។ ដូច្នេះ ជាជាងធ្វើឱ្យមានចលនាច្រើនពណ៌ ខ្ញុំបានបង្កើតប្រព័ន្ធភ្លើងតូចមួយដែលធ្វើចលនាពណ៌តែមួយប៉ុណ្ណោះ។
កិច្ចការដំបូងរបស់ខ្ញុំគឺត្រូវដាក់ស្រទាប់ត្រួតលើគ្នារវាងផ្ទៃខាងក្រោយ និងចង្កៀងរបស់ខ្ញុំ៖ <ផ្លូវ លេខសម្គាល់ = "ជាន់លើ" បំពេញ = "var(--overlay-tint)" […] style="mix-blend-mode: color" />
ខ្ញុំបានប្រើរបៀបលាយបញ្ចូលគ្នា៖ ពណ៌ព្រោះពណ៌នោះមានពណ៌នៅពីក្រោមខណៈដែលរក្សាពន្លឺនៅពីក្រោម។ ដោយសារខ្ញុំចង់ឱ្យការត្រួតគ្នាមើលឃើញនៅពេលដែលមានចលនាត្រូវបានបើក ខ្ញុំបានធ្វើការជ្រើសរើសចូល .svg-mine #ត្រួតលើគ្នា { បង្ហាញ៖ គ្មាន; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #ត្រួតលើគ្នា { បង្ហាញ៖ ប្លុក; ភាពស្រអាប់: 0.5; } }
ការត្រួតគ្នានៅនឹងកន្លែងប៉ុន្តែមិនទាន់បានភ្ជាប់ទៅនឹងចង្កៀង។ ខ្ញុំត្រូវការប្រភពពន្លឺ។ ចង្កៀងរបស់ខ្ញុំគឺសាមញ្ញ ហើយនីមួយៗមានធាតុរង្វង់ដែលខ្ញុំធ្វើឱ្យព្រិលជាមួយនឹងតម្រងមួយ។ តម្រងបង្កើតព្រិលទន់ខ្លាំងនៅលើរង្វង់ទាំងមូល។
ជំនួសឱ្យការធ្វើឱ្យមានចលនាលើការត្រួតគ្នា និងចង្កៀងដោយឡែកពីគ្នា ខ្ញុំធ្វើចលនាពណ៌ "អណ្តាតភ្លើង" តែមួយ ហើយទាញយកអ្វីៗផ្សេងទៀតពីនោះ។ ដំបូង ខ្ញុំចុះឈ្មោះលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនដែលបានវាយបញ្ចូលចំនួនបីសម្រាប់ឆានែល OKLCH៖
@property --fl-l {
វាក្យសម្ព័ន្ធ៖ "
ខ្ញុំបានធ្វើចលនាឆានែលទាំងនោះ ដោយចេតនារុញស៊ុមមួយចំនួនឆ្ពោះទៅកាន់ពណ៌ទឹកក្រូច ដូច្នេះការភ្លឹបភ្លែតៗអានច្បាស់ដូចភ្លើង៖
@keyframes អណ្តាតភ្លើង { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
បន្ទាប់មកខ្ញុំបានកំណត់ទំហំចលនានោះទៅ SVG ដូច្នេះអថេរដែលបានចែករំលែកមានសម្រាប់ទាំងចង្កៀង និងការលាបលើរបស់ខ្ញុំ៖
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { ចលនា៖ អណ្តាតភ្លើង 3.6s លីនេអ៊ែរគ្មានកំណត់; ឯកោ៖ ឯកោ;
/* បង្កើតពណ៌អណ្តាតភ្លើងពីឆានែលដែលមានចលនា */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* ពណ៌ចង្កៀងចេញពីភ្លើង */ --lamp-core: oklch(ពី var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* លាបពណ៌ចេញមកពីអណ្តាតភ្លើងដូចគ្នា*/ --overlay-tint: oklch(ពី var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
ជាចុងក្រោយ ខ្ញុំបានលាបពណ៌ដែលបានមកពីនោះទៅចង្កៀងដែលមានពន្លឺ ហើយការលាបពណ៌ដែលវាប៉ះពាល់ដល់៖ @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > រង្វង់, .svg-mine[data-animations=on] #mine-lamp-2 > រង្វង់ { បំពេញ៖ var(--lamp-core); }
.svg-mine[data-animations=on] #ត្រួតលើគ្នា { បង្ហាញ៖ ប្លុក; បំពេញ៖ var(--overlay-tint); ភាពស្រអាប់: 0.5; } }
នៅពេលដែលអណ្តាតភ្លើងងាកទៅរកពណ៌ទឹកក្រូច ចង្កៀងឡើងកំដៅ ហើយកន្លែងកើតហេតុក៏ក្តៅជាមួយពួកគេ។ នៅពេលដែលភ្លើងត្រជាក់ អ្វីៗក៏នៅជាមួយគ្នា។ ផ្នែកដ៏ល្អបំផុតគឺថាគ្មានអ្វីត្រូវបានសរសេរដោយដៃទេ។ ប្រសិនបើខ្ញុំផ្លាស់ប្តូរពណ៌គ្រឹះ ឬកែប្រែជួរចលនានៃអណ្តាតភ្លើង ប្រព័ន្ធភ្លើងទាំងមូលនឹងធ្វើបច្ចុប្បន្នភាពក្នុងពេលដំណាលគ្នា។ អ្នកអាចឃើញលទ្ធផលចុងក្រោយនៅលើគេហទំព័ររបស់ខ្ញុំ។ ប្រើឡើងវិញ, គោលបំណង, ពិនិត្យឡើងវិញ គំនូរជីវចល Hanna-Barbera ទាំងនោះត្រូវបានបង្ខំឱ្យរៀបចំធាតុឡើងវិញដោយមិនចាំបាច់ ប៉ុន្តែខ្ញុំប្រើពណ៌ឡើងវិញ ព្រោះវាធ្វើឱ្យការងាររបស់ខ្ញុំកាន់តែស៊ីសង្វាក់គ្នា និងងាយស្រួលក្នុងការថែទាំ។ តម្លៃពណ៌ដែលទាក់ទង CSS អនុញ្ញាតឱ្យខ្ញុំ៖
កំណត់ពណ៌មូលដ្ឋានតែមួយ ពិពណ៌នាអំពីរបៀបដែលពណ៌ផ្សេងទៀតទាក់ទងនឹងវា ប្រើទំនាក់ទំនងទាំងនោះឡើងវិញនៅគ្រប់ទីកន្លែង និង ធ្វើឱ្យប្រព័ន្ធមានចលនាដោយការផ្លាស់ប្តូរតម្លៃមួយ។
ពណ៌ដែលទាក់ទងមិនគ្រាន់តែធ្វើឱ្យការដាក់ពណ៌ងាយស្រួលនោះទេ។ វាលើកទឹកចិត្តដល់វិធីនៃការគិតដែលពណ៌ ដូចជាចលនាគឺដោយចេតនា ហើយកន្លែងដែលការផ្លាស់ប្តូរតម្លៃមួយអាចបំប្លែងទិដ្ឋភាពទាំងមូលដោយមិនចាំបាច់សរសេរឡើងវិញនូវការងារនៅក្រោមវា។
