મેં તાજેતરમાં મારી વેબસાઇટ પર નવી થીમ અને અગ્રણી પાત્રોના જૂથ સાથે એનિમેટેડ ગ્રાફિક્સને તાજું કર્યું છે, આ શ્રેણીમાં મેં શેર કરેલી ઘણી બધી તકનીકોને અમલમાં મૂકી છે. જ્યારે કોઈ વ્યક્તિ તેમની સાથે અથવા દિવસના જુદા જુદા સમયે ક્રિયાપ્રતિક્રિયા કરે છે ત્યારે મારા કેટલાક એનિમેશનનો દેખાવ બદલાય છે.
મારા બ્લોગના પૃષ્ઠોની ઉપરના ગ્રાફિકના રંગો દરરોજ સવારથી રાત સુધી બદલાતા રહે છે. પછી, સ્નો મોડ છે, જે ઠંડા રંગો અને શિયાળાની થીમ ઉમેરે છે, ઓવરલે લેયર અને બ્લેન્ડિંગ મોડના સૌજન્યથી.
આ પર કામ કરતી વખતે, મેં વિચારવાનું શરૂ કર્યું કે શું CSS સંબંધિત રંગ મૂલ્યો પ્રક્રિયાને સરળ બનાવતી વખતે મને વધુ નિયંત્રણ આપી શકે છે. નોંધ: આ ટ્યુટોરીયલમાં, હું થીમિંગ ગ્રાફિક્સ અને એનિમેશન માટે સંબંધિત રંગ મૂલ્યો અને OKLCH રંગ જગ્યા પર ધ્યાન કેન્દ્રિત કરીશ. જો તમે સંબંધિત રંગમાં ઊંડા ઉતરવા માંગતા હો, તો અહમદ શાદીદે એક શાનદાર ઇન્ટરેક્ટિવ માર્ગદર્શિકા બનાવી છે. કલર સ્પેસ, ગમટ્સ અને OKLCH માટે, અમારા પોતાના જ્યોફ ગ્રેહામે તેમના વિશે લખ્યું છે.
તત્વોનો પુનરાવર્તિત ઉપયોગ મુખ્ય હતો. જ્યારે પણ શક્ય હોય ત્યારે પૃષ્ઠભૂમિનો પુનઃઉપયોગ કરવામાં આવ્યો હતો, ઝૂમ અને ઓવરલે સમાન આર્ટવર્કમાંથી નવા દ્રશ્યો બનાવવામાં મદદ કરે છે. તે આવશ્યકતામાંથી જન્મ્યો હતો, પરંતુ તેણે વ્યક્તિગત દ્રશ્યોને બદલે શ્રેણીના સંદર્ભમાં વિચારવાનું પ્રોત્સાહન આપ્યું હતું. કલર પેલેટ્સને મેન્યુઅલી અપડેટ કરવામાં સમસ્યા ચાલો સીધા મારા પડકાર પર પહોંચીએ. આના જેવા ટૂન શીર્ષકોમાં — 1959ના યોગી રીંછ શોના એપિસોડ “લુલેબાય-બાય રીંછ” પર આધારિત — અને મારું કામ સામાન્ય રીતે, પેલેટ્સ અમુક પસંદગીના રંગો સુધી મર્યાદિત હોય છે.
વધુ રંગછટા ઉમેર્યા વિના પેલેટને વિસ્તૃત કરવા માટે હું જેને મારા "ફાઉન્ડેશન" રંગ કહું છું તેમાંથી હું શેડ્સ અને ટીન્ટ્સ બનાવું છું.
સ્કેચમાં, હું એચએસએલ કલર સ્પેસમાં કામ કરું છું, તેથી આ પ્રક્રિયામાં મારા ફાઉન્ડેશન કલરનું હળવાપણું મૂલ્ય વધારવું કે ઘટાડવું સામેલ છે. પ્રામાણિકપણે, તે મુશ્કેલ કાર્ય નથી — પરંતુ અલગ પાયાનો રંગ પસંદ કરવા માટે શેડ્સ અને ટિન્ટ્સનો સંપૂર્ણ નવો સેટ બનાવવાની જરૂર છે. તે જાતે કરવું, ફરીથી અને ફરીથી, ઝડપથી કપરું બની જાય છે.
મેં એચએસએલ — એચ (હ્યુ), એસ (સંતૃપ્તિ), અને એલ (હળવા) — રંગ જગ્યાનો ઉલ્લેખ કર્યો છે, પરંતુ તે રંગનું વર્ણન કરવાની ઘણી રીતોમાંથી એક છે. RGB — R (લાલ), G (લીલો), B (વાદળી) — કદાચ સૌથી વધુ પરિચિત છે, ઓછામાં ઓછું તેના હેક્સ સ્વરૂપમાં. LAB પણ છે — L (હળવા), A (લીલો-લાલ), B (વાદળી-પીળો) — અને નવા, પરંતુ હવે વ્યાપકપણે સમર્થિત LCH — L (હળકાશ), C (ક્રોમા), H (હ્યુ) — મોડેલ તેના OKLCH સ્વરૂપમાં છે. LCH સાથે — ખાસ કરીને CSS માં OKLCH — હું મારા ફાઉન્ડેશન કલરની હળવાશ મૂલ્યને સમાયોજિત કરી શકું છું.
અથવા હું તેનો ક્રોમા બદલી શકું છું. એલસીએચ ક્રોમા અને એચએસએલ સંતૃપ્તિ બંને રંગની તીવ્રતા અથવા સમૃદ્ધિનું વર્ણન કરે છે, પરંતુ તેઓ આમ અલગ અલગ રીતે કરે છે. LCH મને વિશાળ શ્રેણી અને રંગો વચ્ચે વધુ અનુમાનિત મિશ્રણ આપે છે.
સમાન હળવાશ અને ક્રોમા મૂલ્યોને શેર કરતા રંગોની પેલેટ બનાવવા માટે હું રંગછટા પણ બદલી શકું છું. એચએસએલ અને એલસીએચ બંનેમાં, હ્યુ સ્પેક્ટ્રમ લાલ રંગથી શરૂ થાય છે, લીલા અને વાદળીમાંથી પસાર થાય છે અને લાલ રંગમાં પરત આવે છે.
શા માટે OKLCH બદલાયું હું રંગ વિશે કેવી રીતે વિચારું છું OKLCH કલર સ્પેસ માટે બ્રાઉઝર સપોર્ટ હવે વ્યાપક છે, ભલે ડિઝાઇન ટૂલ્સ — સ્કેચ સહિત — પકડાયા ન હોય. સદનસીબે, તે તમને OKLCH નો ઉપયોગ કરવાથી રોકશે નહીં. બ્રાઉઝર્સ ખુશીથી હેક્સ, એચએસએલ, એલએબી અને આરજીબી મૂલ્યોને તમારા માટે OKLCH માં રૂપાંતરિત કરશે. તમે હેક્સ સહિત કોઈપણ જગ્યામાં ફાઉન્ડેશન કલર સાથે CSS કસ્ટમ પ્રોપર્ટી વ્યાખ્યાયિત કરી શકો છો: /* પાયાનો રંગ */ --ફાઉન્ડેશન: #5accd6;
તેમાંથી મેળવેલા કોઈપણ રંગો આપમેળે OKLCH માં રૂપાંતરિત થશે: --ફાઉન્ડેશન-લાઇટ: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation) માંથી [...]; } --ફાઉન્ડેશન-ડાર્ક: oklch(var(--foundation) [...]; }
ડિઝાઇન સિસ્ટમ તરીકે સંબંધિત રંગ સાપેક્ષ રંગ વિશે એમ કહીને વિચારો: "આ રંગ લો, તેને ટ્વિક કરો, પછી મને પરિણામ આપો." રંગને સમાયોજિત કરવાની બે રીત છે: સંપૂર્ણ ફેરફારો અને પ્રમાણસર ફેરફારો. તેઓ કોડમાં સમાન દેખાય છે, પરંતુ એકવાર તમે ફાઉન્ડેશનના રંગોની અદલાબદલી કરવાનું શરૂ કરો ત્યારે તે ખૂબ જ અલગ રીતે વર્તે છે. તે તફાવતને સમજવું એ સિસ્ટમમાં સંબંધિત રંગનો ઉપયોગ કરીને ફેરવી શકે છે. /* પાયાનો રંગ */ --ફાઉન્ડેશન: #5accd6;
ઉદાહરણ તરીકે, મારા ફાઉન્ડેશન કલરનું લાઇટનેસ વેલ્યુ 0.7837 છે, જ્યારે ડાર્ક વર્ઝનનું વેલ્યુ 0.5837 છે. તફાવતની ગણતરી કરવા માટે, હું ઉચ્ચમાંથી નીચલા મૂલ્યને બાદ કરું છું અને calc() ફંક્શનનો ઉપયોગ કરીને પરિણામ લાગુ કરું છું: --ફાઉન્ડેશન-ડાર્ક: oklch(var(--ફાઉન્ડેશન) તરફથી calc(l - 0.20) c h);
હળવા રંગ મેળવવા માટે, હું તેના બદલે તફાવત ઉમેરું છું: --ફાઉન્ડેશન-લાઇટ: oklch(var(--ફાઉન્ડેશન) તરફથી calc(l + 0.10) c h);
ક્રોમાગોઠવણો એ જ પ્રક્રિયાને અનુસરે છે. મારા ફાઉન્ડેશનના રંગની તીવ્રતાને 0.1035 થી 0.0035 સુધી ઘટાડવા માટે, હું એક મૂલ્યને બીજામાંથી બાદ કરું છું: oklch(var(--ફાઉન્ડેશન) તરફથી l કેલ્ક(c - 0.10) h);
રંગછટાની પેલેટ બનાવવા માટે, હું મારા ફાઉન્ડેશન કલર (200) અને મારા નવા રંગ (260) ની હ્યુ વેલ્યુ વચ્ચેના તફાવતની ગણતરી કરું છું: oklch(var(--ફાઉન્ડેશન) તરફથી l c calc(h + 60));
તે ગણતરીઓ સંપૂર્ણ છે. જ્યારે હું નિશ્ચિત રકમ બાદબાકી કરું છું, ત્યારે હું અસરકારક રીતે કહું છું, "હંમેશા આટલી જ બાદબાકી કરો." નિશ્ચિત મૂલ્યો ઉમેરતી વખતે તે જ લાગુ પડે છે: કેલ્ક(c - 0.10) કેલ્ક(c + 0.10)
મેં આ અભિગમની મર્યાદાઓ સખત રીતે શીખી. જ્યારે હું નિશ્ચિત ક્રોમા મૂલ્યોને બાદબાકી કરવા પર આધાર રાખતો હતો, ત્યારે મેં ફાઉન્ડેશન બદલતાની સાથે જ રંગો ગ્રે તરફ તૂટી ગયા હતા. એક રંગ માટે કામ કરતી પેલેટ બીજા માટે અલગ પડી ગઈ. ગુણાકાર અલગ રીતે વર્તે છે. જ્યારે હું ક્રોમાનો ગુણાકાર કરું છું, ત્યારે હું બ્રાઉઝરને કહું છું: "આ રંગની તીવ્રતાને પ્રમાણથી ઘટાડો." જ્યારે પાયો બદલાય ત્યારે પણ રંગો વચ્ચેનો સંબંધ અકબંધ રહે છે: કેલ્ક(c * 0.10)
માય મૂવ ઇટ, સ્કેલ ઇટ, રોટેટ ઇટ રૂલ્સ
હળવાશને ખસેડો (ઉમેરો અથવા બાદબાકી), સ્કેલ ક્રોમા (ગુણાકાર), રંગ ફેરવો (ડિગ્રી ઉમેરો અથવા બાદબાકી કરો).
હું ક્રોમાને સ્કેલ કરું છું કારણ કે હું તીવ્રતામાં ફેરફાર કરવા ઈચ્છું છું જેથી તે મૂળ રંગના પ્રમાણસર રહે. હ્યુ સંબંધો રોટેશનલ છે, તેથી રંગને ગુણાકાર કરવાનો કોઈ અર્થ નથી. હળવાશ ગ્રહણશીલ અને નિરપેક્ષ છે — તેને ગુણાકાર કરવાથી ઘણી વાર વિચિત્ર પરિણામો આવે છે.
એક રંગથી સમગ્ર થીમ સુધી સાપેક્ષ રંગ મને ફાઉન્ડેશન રંગને વ્યાખ્યાયિત કરવાની અને તેમાંથી મને જોઈતો દરેક અન્ય રંગ — ફિલ્સ, સ્ટ્રોક, ગ્રેડિયન્ટ સ્ટોપ્સ, શેડોઝ — જનરેટ કરવાની મંજૂરી આપે છે. તે સમયે, રંગ પેલેટ બનવાનું બંધ કરે છે અને સિસ્ટમ બનવાનું શરૂ કરે છે. SVG ચિત્રો ફિલ્સ, સ્ટ્રોક અને ગ્રેડિએન્ટ્સમાં સમાન થોડા રંગોનો ફરીથી ઉપયોગ કરે છે. સાપેક્ષ રંગ તમને તે સંબંધોને એકવાર વ્યાખ્યાયિત કરવા અને દરેક જગ્યાએ તેનો ફરીથી ઉપયોગ કરવા દે છે — જેમ કે એનિમેટર્સ નવા દ્રશ્યો બનાવવા માટે બેકગ્રાઉન્ડનો ફરીથી ઉપયોગ કરે છે.
એકવાર ફાઉન્ડેશનનો રંગ બદલો, અને દરેક મેળવેલ રંગ આપમેળે અપડેટ થાય છે, હાથથી કંઈપણ પુનઃગણતરી કર્યા વિના. એનિમેટેડ ગ્રાફિક્સની બહાર, હું બટનો અને લિંક્સ જેવા ઇન્ટરેક્ટિવ તત્વોની સ્થિતિ માટે રંગોને વ્યાખ્યાયિત કરવા માટે આ જ અભિગમનો ઉપયોગ કરી શકું છું. મારા “લુલાબી-બાય રીંછ” ટૂન શીર્ષકમાં મેં જે ફાઉન્ડેશન કલરનો ઉપયોગ કર્યો છે તે વાદળી દેખાતો વાદળી છે. પૃષ્ઠભૂમિ મારા ફાઉન્ડેશન અને ઘાટા સંસ્કરણ વચ્ચેનો રેડિયલ ઢાળ છે.
સંપૂર્ણપણે અલગ મૂડ સાથે વૈકલ્પિક સંસ્કરણો બનાવવા માટે, મારે ફક્ત પાયાનો રંગ બદલવાની જરૂર છે: --ફાઉન્ડેશન: #5accd6; --ગ્રેડ-એન્ડ: var(--ફાઉન્ડેશન); --ગ્રેડ-સ્ટાર્ટ: oklch(var(--ફાઉન્ડેશન) થી calc(l - 0.2357) calc(c * 0.833) h);
રંગ મૂલ્યોની નકલ કર્યા વિના તે કસ્ટમ ગુણધર્મોને મારા SVG ગ્રેડિયન્ટ સાથે જોડવા માટે, મેં હાર્ડ-કોડેડ સ્ટોપ-કલર મૂલ્યોને ઇનલાઇન શૈલીઓ સાથે બદલ્યાં છે:
આગળ, મારે એ સુનિશ્ચિત કરવાની જરૂર છે કે મારું ટૂન ટેક્સ્ટ હું જે પણ ફાઉન્ડેશન રંગ પસંદ કરું તેની સાથે હંમેશા વિરોધાભાસી છે. 180deg રંગનું પરિભ્રમણ એક પૂરક રંગ ઉત્પન્ન કરે છે જે ચોક્કસપણે પૉપ થાય છે — પરંતુ અસ્વસ્થતાથી વાઇબ્રેટ થઈ શકે છે: ટેક્સ્ટ-લાઇટ { ભરો: oklch(var(--ફાઉન્ડેશન)માંથી l c calc(h + 180)); }
90° શિફ્ટ સંપૂર્ણપણે પૂરક થયા વિના આબેહૂબ ગૌણ રંગ ઉત્પન્ન કરે છે: ટેક્સ્ટ-લાઇટ { ભરો: oklch(var(--ફાઉન્ડેશન)માંથી l c calc(h - 90)); }
ક્વિક ડ્રો મેકગ્રાના 1959 ટૂન શીર્ષક “એલ કાબોંગ”નું મારું મનોરંજન સમાન તકનીકોનો ઉપયોગ કરે છે પરંતુ વધુ વૈવિધ્યસભર પેલેટ સાથે. ઉદાહરણ તરીકે, ફાઉન્ડેશનના રંગ અને ઘાટા શેડ વચ્ચે અન્ય રેડિયલ ઢાળ છે.
બેકગ્રાઉન્ડમાં બિલ્ડીંગ અને વૃક્ષ એક જ ફાઉન્ડેશન કલરના અલગ-અલગ શેડ્સ છે. તે પાથ માટે, મને બે વધારાના ભરણ રંગોની જરૂર છે: .bg-મધ્ય { ભરો: oklch(var(--ફાઉન્ડેશન)માંથી calc(l - 0.04) calc(c * 0.91) h); }
.bg-શ્યામ { ભરો: oklch(var(--ફાઉન્ડેશન)માંથી calc(l - 0.12) calc(c * 0.64) h); }
જ્યારે ફાઉન્ડેશનો ખસેડવાનું શરૂ કરે છે અત્યાર સુધી, મેં જે બતાવ્યું છે તે બધું સ્થિર છે. જ્યારે કોઈ વ્યક્તિ ફાઉન્ડેશનનો રંગ બદલવા માટે કલર પીકરનો ઉપયોગ કરે છે, ત્યારે પણ તે ફેરફાર તરત જ થાય છે. પરંતુ એનિમેટેડ ગ્રાફિક્સ ભાગ્યે જ સ્થિર રહે છે — ચાવી નામમાં છે. તેથી, જો રંગ સિસ્ટમનો ભાગ છે, તો કોઈ કારણ નથી કે તે એનિમેટ ન કરી શકે. ફાઉન્ડેશન કલરને એનિમેટ કરવા માટે, મારે પહેલા તેને તેની OKLCH ચેનલોમાં વિભાજિત કરવાની જરૂર છે- હળવાશ, ક્રોમા અને રંગછટા. પરંતુ એક મહત્વપૂર્ણ વધારાનું પગલું છે: મારે તે મૂલ્યોને ટાઇપ કરેલ કસ્ટમ પ્રોપર્ટીઝ તરીકે રજીસ્ટર કરવાની જરૂર છે. પરંતુ તેનો અર્થ શું છે? ડિફૉલ્ટ રૂપે, બ્રાઉઝર એ જાણતું નથી કે CSS કસ્ટમ પ્રોપર્ટી વેલ્યુ રંગ, લંબાઈ, સંખ્યા અથવા બીજું કંઈક સંપૂર્ણપણે રજૂ કરે છે. તેનો વારંવાર અર્થ થાય છે કે તેઓ એનિમેશન દરમિયાન સરળતાથી પ્રક્ષેપિત થઈ શકતા નથી અને એક મૂલ્યથી બીજા મૂલ્ય પર જાઓ. કસ્ટમ પ્રોપર્ટીની નોંધણી બ્રાઉઝરને જણાવે છે કે તે કયા પ્રકારનું મૂલ્ય રજૂ કરે છે અને તે સમય સાથે કેવી રીતે વર્તવું જોઈએ. આ કિસ્સામાં, હું ઇચ્છું છું કે બ્રાઉઝર મારી રંગ ચેનલોને નંબરો તરીકે ગણે જેથી કરીને તેઓ સરળતાથી એનિમેટ થઈ શકે. @property --f-l { વાક્યરચના: "<નંબર>"; વારસાગત: સાચું; પ્રારંભિક-મૂલ્ય: 0.40; }
@property --f-c { વાક્યરચના: "<નંબર>"; વારસાગત: સાચું; પ્રારંભિક-મૂલ્ય: 0.11; }
@property --f-h { વાક્યરચના: "<નંબર>"; વારસાગત: સાચું; પ્રારંભિક-મૂલ્ય: 305; }
એકવાર રજીસ્ટર થઈ ગયા પછી, આ કસ્ટમ પ્રોપર્ટીઝ મૂળ CSS જેવું વર્તે છે. બ્રાઉઝર તેમને ફ્રેમ-બાય-ફ્રેમ ઇન્ટરપોલેટ કરી શકે છે. પછી હું તે ચેનલોમાંથી પાયાનો રંગ ફરીથી બનાવું છું: --ફાઉન્ડેશન: oklch(var(--f-l) var(--f-c) var(--f-h));
આનાથી ફાઉન્ડેશનનો રંગ એનિમેટેબલ બની જાય છે, જેમ કે અન્ય આંકડાકીય મૂલ્યો. અહીં એક સરળ "શ્વાસ" એનિમેશન છે જે સમય જતાં હળવાશને હળવાશથી બદલી નાખે છે: @keyframes શ્વાસ લે છે { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.ટૂન-શીર્ષક { એનિમેશન: શ્વાસ 10s સરળ-ઇન-આઉટ અનંત; }
કારણ કે ફિલ્સ, ગ્રેડિયન્ટ્સ અને સ્ટ્રોકમાં દરેક અન્ય રંગ --ફાઉન્ડેશન પરથી લેવામાં આવ્યો છે, તે બધા એકસાથે એનિમેટ થાય છે, અને કંઈપણ જાતે અપડેટ કરવાની જરૂર નથી. એક એનિમેટેડ રંગ, ઘણી અસરો આ પ્રક્રિયાની શરૂઆતમાં, મેં વિચાર્યું કે શું CSS સંબંધિત રંગ મૂલ્યો વધુ શક્યતાઓ પ્રદાન કરી શકે છે જ્યારે તેમને અમલમાં મૂકવા માટે સરળ બનાવે છે. મેં તાજેતરમાં મારી વેબસાઇટના સંપર્ક પૃષ્ઠ પર એક નવી સોનાની ખાણ પૃષ્ઠભૂમિ ઉમેરી છે, અને પ્રથમ પુનરાવર્તનમાં તેલના દીવા શામેલ છે જે ઝળકે છે અને સ્વિંગ કરે છે.
હું અન્વેષણ કરવા માંગતો હતો કે કેવી રીતે CSS સંબંધિત રંગો એનિમેટ કરીને ખાણના આંતરિક ભાગને લેમ્પના રંગોથી ટિન્ટ કરીને વધુ વાસ્તવિક બનાવી શકે છે. હું ઇચ્છું છું કે તેઓ તેમની આસપાસની દુનિયાને અસર કરે, જે રીતે વાસ્તવિક પ્રકાશ કરે છે. તેથી, બહુવિધ રંગોને એનિમેટ કરવાને બદલે, મેં એક નાનકડી લાઇટિંગ સિસ્ટમ બનાવી છે જે ફક્ત એક રંગને એનિમેટ કરે છે.
મારું પ્રથમ કાર્ય પૃષ્ઠભૂમિ અને મારા લેમ્પ્સ વચ્ચે ઓવરલે લેયરને સ્લોટ કરવાનું હતું: <પાથ id="ઓવરલે" fill="var(--ઓવરલે-ટિન્ટ)" [...] style="mix-blend-mode: color" />
મેં mix-blend-mode: color નો ઉપયોગ કર્યો છે કારણ કે તે અંતર્ગત લ્યુમિનેન્સને સાચવતી વખતે તેની નીચે શું છે તે ટિન્ટ કરે છે. જ્યારે એનિમેશન ચાલુ હોય ત્યારે જ ઓવરલે દેખાય તેવું હું ઈચ્છું છું, મેં ઓવરલે ઑપ્ટ-ઇન કર્યું છે: .svg-mine #overlay { પ્રદર્શન: કોઈ નહીં; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { પ્રદર્શન: બ્લોક; અસ્પષ્ટ: 0.5; } }
ઓવરલે સ્થાને હતું, પરંતુ હજુ સુધી લેમ્પ્સ સાથે જોડાયેલ નથી. મને પ્રકાશ સ્ત્રોતની જરૂર હતી. મારા લેમ્પ સરળ છે, અને દરેકમાં એક વર્તુળ તત્વ છે જેને મેં ફિલ્ટર વડે ઝાંખું કર્યું છે. ફિલ્ટર સમગ્ર વર્તુળ પર ખૂબ જ નરમ અસ્પષ્ટતા પેદા કરે છે.
ઓવરલે અને લેમ્પ્સને અલગથી એનિમેટ કરવાને બદલે, હું એક "જ્યોત" રંગનું ટોકન એનિમેટ કરું છું અને તેમાંથી બીજું બધું મેળવું છું. પ્રથમ, હું OKLCH ચેનલો માટે ત્રણ ટાઇપ કરેલ કસ્ટમ પ્રોપર્ટીઝ રજીસ્ટર કરું છું: @property --fl-l { વાક્યરચના: "<નંબર>"; વારસાગત: સાચું; પ્રારંભિક-મૂલ્ય: 0.86; } @property --fl-c { વાક્યરચના: "<નંબર>"; વારસાગત: સાચું; પ્રારંભિક-મૂલ્ય: 0.12; } @property --fl-h { વાક્યરચના: "<નંબર>"; વારસાગત: સાચું; પ્રારંભિક-મૂલ્ય: 95; }
મેં તે ચેનલોને એનિમેટેડ કરી, ઇરાદાપૂર્વક થોડી ફ્રેમને નારંગી તરફ ધકેલી દીધી જેથી ફ્લિકર ફાયરલાઇટ તરીકે સ્પષ્ટ રીતે વાંચે:
@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[ડેટા-એનિમેશન=ઓન] { એનિમેશન: ફ્લેમ 3.6s અનંત રેખીય; isolation: isolate;
/* એનિમેટેડ ચેનલોમાંથી ફ્લેમ કલર બનાવો */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* દીવાનો રંગ જ્યોતમાંથી મેળવેલો */ --લેમ્પ-કોર: oklch(var(--flame) calc(l + 0.05) calc(c * 0.70) h થી);
/* સમાન જ્યોતમાંથી મેળવેલ ઓવરલે ટિન્ટ */ --ઓવરલે-ટિન્ટ: oklch(var(--જ્વાળા) થી 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(-લેમ્પ-કોર); }
.svg-mine[data-animations=on] #overlay { પ્રદર્શન: બ્લોક; ભરો: var(--ઓવરલે-ટિન્ટ); અસ્પષ્ટ: 0.5; } }
જ્યારે જ્યોત નારંગી તરફ જાય છે, ત્યારે દીવા ગરમ થાય છે, અને દ્રશ્ય તેમની સાથે ગરમ થાય છે. જ્યારે જ્યોત ઠંડી થાય છે, ત્યારે બધું એકસાથે સ્થાયી થાય છે. શ્રેષ્ઠ ભાગ એ છે કે કંઈપણ જાતે લખવામાં આવતું નથી. જો હું ફાઉન્ડેશનનો રંગ બદલું અથવા ફ્લેમ એનિમેશન રેન્જમાં ફેરફાર કરું, તો સમગ્ર લાઇટિંગ સિસ્ટમ એકસાથે અપડેટ થાય છે. તમે મારી વેબસાઇટ પર અંતિમ પરિણામ જોઈ શકો છો. પુનઃઉપયોગ, પુનઃઉપયોગ, પુનઃવિઝિટ તે હેન્ના-બાર્બેરા એનિમેટર્સને આવશ્યકતાના આધારે તત્વોને ફરીથી બનાવવાની ફરજ પાડવામાં આવી હતી, પરંતુ હું રંગોનો ફરીથી ઉપયોગ કરું છું કારણ કે તે મારા કાર્યને વધુ સુસંગત અને જાળવવામાં સરળ બનાવે છે. CSS સંબંધિત રંગ મૂલ્યો મને આની મંજૂરી આપે છે:
એક ફાઉન્ડેશન કલર વ્યાખ્યાયિત કરો, અન્ય રંગો તેની સાથે કેવી રીતે સંબંધિત છે તેનું વર્ણન કરો, દરેક જગ્યાએ તે સંબંધોનો ફરીથી ઉપયોગ કરો, અને એક મૂલ્ય બદલીને સિસ્ટમને એનિમેટ કરો.
સંબંધિત રંગ ફક્ત થીમિંગને સરળ બનાવતું નથી. તે વિચારની એક રીતને પ્રોત્સાહિત કરે છે જ્યાં રંગ, જેમ કે ગતિ, ઇરાદાપૂર્વકનો હોય છે — અને જ્યાં એક મૂલ્ય બદલવાથી તેની નીચે કામને ફરીથી લખ્યા વિના સમગ્ર દ્રશ્યને બદલી શકાય છે.
