വെബിൽ ഉപയോഗിക്കുന്നതിന് SVG തയ്യാറാക്കുന്നത് വളരെ ലളിതമായ ഒരു പ്രക്രിയയാണ്, JPEG അല്ലെങ്കിൽ PNG കയറ്റുമതി ചെയ്യുന്നതിനേക്കാൾ സങ്കീർണ്ണമല്ല. നിങ്ങൾക്ക് പരിചിതമായ ഏത് ഗ്രാഫിക്സ് എഡിറ്ററും (ഇല്ലസ്ട്രേറ്റർ, സ്കെച്ച്, ഇങ്ക്‌സ്‌കേപ്പ് [സൗജന്യ] മുതലായവ. [അല്ലെങ്കിൽ നിങ്ങൾ ഷേപ്പ് ലെയറുകൾ ഉപയോഗിക്കുകയാണെങ്കിൽ ഫോട്ടോഷോപ്പ് പോലും]) നിങ്ങൾ ഉപയോഗിക്കാൻ ഉദ്ദേശിക്കുന്ന ഇമേജ് വലുപ്പത്തിൽ ഉപയോഗിക്കുക. ഞാൻ സാധാരണയായി ഇല്ലസ്ട്രേറ്ററിലാണ് ജോലി ചെയ്യുന്നത്, അതിനാൽ ആ പ്രോഗ്രാമിൽ ഫയലുകൾ തയ്യാറാക്കുന്നതിനുള്ള ചില വഴികൾ ഞാൻ വിശദീകരിക്കും, എന്നാൽ അവ സാധാരണയായി ഏത് പ്രോഗ്രാമിനും ബാധകമാണ്. പേജിൽ ഉപയോഗിക്കുന്ന വെബ് ഫോണ്ട് ഉപയോഗിച്ച് അവയെ സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങൾ പദ്ധതിയിട്ടില്ലെങ്കിൽ, ഫോണ്ട് മിക്കവാറും തെറ്റായി റെൻഡർ ചെയ്യുന്നതിനാൽ, നിങ്ങളുടെ ടെക്സ്റ്റ് കർവുകളിലേക്ക് പരിവർത്തനം ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം (അത് സാധ്യമാണ്!). എല്ലാ ഒബ്‌ജക്റ്റുകളും ഒറ്റ ആകൃതികളാക്കി മാറ്റുന്നതും നല്ലതല്ല, പ്രത്യേകിച്ചും നിങ്ങൾക്ക് പേജിൽ കൃത്രിമം കാണിക്കേണ്ട സ്‌ട്രോക്കുകൾ ഉണ്ടെങ്കിൽ, പ്രത്യേകിച്ചും ഒബ്ജക്റ്റുകൾ പരിവർത്തനം ചെയ്യുന്നത് ഫയലിന്റെ വലുപ്പം കുറയ്ക്കില്ല എന്നതിനാൽ. ഗ്രൂപ്പുകളിലേക്കോ ലെയറുകളിലേക്കോ അസൈൻ ചെയ്‌തിരിക്കുന്ന പേരുകൾ എസ്‌വിജിയിലേക്ക് ഒരു എലമെന്റ് ഐഡിയായി ചേർക്കും. ഇത് സ്റ്റൈലിംഗിന് വളരെ സൗകര്യപ്രദമാണ്, പക്ഷേ ഇത് വർദ്ധിപ്പിക്കും മൊത്തത്തിലുള്ള വലിപ്പംഫയൽ.
നിങ്ങൾ എക്‌സ്‌പോർട്ട് ചെയ്യുന്നതിനുമുമ്പ്, എല്ലാ ചിത്രങ്ങളും ഒരു പൂർണ്ണസംഖ്യ പിക്സൽ ഗ്രിഡിലാണോ എന്ന് നിങ്ങൾ പരിശോധിക്കേണ്ടതുണ്ട് (അതായത്, ഉദാഹരണത്തിന് 23.3px × 86.8px അല്ല). അല്ലെങ്കിൽ, മിക്കവാറും ചിത്രത്തിന് വേണ്ടത്ര വ്യക്തത ഉണ്ടാകില്ല, കൂടാതെ ചിത്രത്തിന്റെ ഒരു ഭാഗം മുറിക്കപ്പെടും. ഇല്ലസ്ട്രേറ്ററിൽ ഇത് ഇനിപ്പറയുന്ന രീതിയിൽ ചെയ്യാം: ഒബ്ജക്റ്റ് > ആർട്ട്ബോർഡുകൾ > ആർട്ട് വർക്ക് ബൗണ്ടുകൾക്ക് അനുയോജ്യം. തുടർന്ന് സേവ് ആയി ക്ലിക്ക് ചെയ്ത് SVG തിരഞ്ഞെടുത്ത് സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ വിടുക. ഞങ്ങൾക്ക് ഇവിടെ ഒരു ചെറിയ ഒപ്റ്റിമൈസേഷൻ ചെയ്യാനാവും, എന്നാൽ ഇത് ശരിക്കും വിലമതിക്കുന്നില്ല, കാരണം ഞങ്ങൾ പിന്നീട് വിവിധ മെച്ചപ്പെടുത്തൽ ടെക്നിക്കുകൾ ഉപയോഗിക്കും, അതിനാൽ ആ ട്വീക്കുകളിൽ ഞങ്ങൾ സമയം പാഴാക്കില്ല.
ഫയൽ വലുപ്പം കുറയ്ക്കുന്നതിനുള്ള തന്ത്രങ്ങൾ.
(ഒപ്റ്റിമൈസേഷൻ കാണുക)
ഏറ്റവും ചെറിയ SVG വലുപ്പം നേടുന്നതിന്, അതിൽ നിന്ന് അനാവശ്യമായ എല്ലാം നീക്കം ചെയ്യുന്നത് യുക്തിസഹമായിരിക്കും. ഏറ്റവും പ്രശസ്തമായതും ഉപയോഗപ്രദമായ പ്രോഗ്രാം(കാരണം ഇത്രയെങ്കിലുംഞാൻ അങ്ങനെ കരുതുന്നു) SVG പ്രോസസ്സ് ചെയ്യുന്നതിന് ഇത് SVGO ആണ്. അവൾ എല്ലാം നീക്കം ചെയ്യുന്നു ആവശ്യമായ കോഡ്. പക്ഷേ! CSS/JS ഉപയോഗിച്ച് SVG കൈകാര്യം ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഈ പ്രോഗ്രാം ഉപയോഗിക്കുമ്പോൾ ശ്രദ്ധിക്കുക, കാരണം ഇത് കോഡ് വളരെയധികം വൃത്തിയാക്കിയേക്കാം, ഇത് ഭാവിയിലെ മാറ്റങ്ങൾ ബുദ്ധിമുട്ടാക്കും. എസ്‌വി‌ജി‌ഒയുടെ മറ്റൊരു സൗകര്യം, ഒരു പ്രോജക്റ്റ് സ്വപ്രേരിതമായി നിർമ്മിക്കുന്ന പ്രക്രിയയിൽ ഇത് ഉൾപ്പെടുത്താം, എന്നാൽ നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കാനും കഴിയും GUIനിങ്ങൾക്ക് വേണമെങ്കിൽ.
ഉപയോഗിച്ച് കൂടുതൽ വിശദമായി മനസ്സിലാക്കുന്നു ശരിയായ നീക്കംഎല്ലാം അനാവശ്യമാണ്, നമുക്ക് മറ്റെന്തെങ്കിലും ചെയ്യാം ഗ്രാഫിക് എഡിറ്റർ. ആദ്യം നിങ്ങൾ കഴിയുന്നത്ര കുറച്ച് പാതകൾ/ആകൃതികൾ ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കേണ്ടതുണ്ട്, അതുപോലെ തന്നെ ആ പാതകളിലെ പോയിന്റുകളും. നിങ്ങൾക്ക് ലളിതമാക്കാൻ കഴിയുന്ന എല്ലാം സംയോജിപ്പിക്കാനും ലളിതമാക്കാനും എല്ലാം ഇല്ലാതാക്കാനും കഴിയും അനാവശ്യ പോയിന്റുകൾ. ഇല്ലസ്ട്രേറ്ററിന് ഒരു സ്മാർട്ട് റിമൂവ് ബ്രഷ് ടൂൾ ഉള്ള ഒരു വെക്റ്റർസ്‌ക്രൈബ് പ്ലഗിൻ ഉണ്ട്, അത് പോയിന്റുകൾ നീക്കം ചെയ്യാനും തുടർന്നും പോകാനും നിങ്ങളെ സഹായിക്കും പൊതുവായ രൂപംഅതേ.
പ്രാഥമിക ഒപ്റ്റിമൈസേഷൻ
സ്മാർട്ട് നീക്കം ബ്രഷ് ടൂൾ പോയിന്റുകൾ നീക്കം ചെയ്തു
അടുത്തതായി നമ്മൾ ചിത്രം വലുതാക്കും. ഇല്ലസ്ട്രേറ്ററിൽ, ഒരു പിക്സൽ ഗ്രിഡ് ഉപയോഗിച്ച് വ്യൂ > പിക്സൽ പ്രിവ്യൂ ഓണാക്കി ഔട്ട്‌ലൈനുകൾ എങ്ങനെ പൊസിഷൻ ചെയ്‌തിരിക്കുന്നുവെന്ന് പരിശോധിക്കുന്നത് സൗകര്യപ്രദമാണ്. ഗ്രിഡിൽ ഔട്ട്‌ലൈനുകൾ സ്ഥാപിക്കാൻ കുറച്ച് സമയമെടുക്കും, പക്ഷേ പ്രയത്നം ഫലം കാണുകയും ക്ലീനർ റെൻഡറിംഗിൽ കലാശിക്കുകയും ചെയ്യും (ഇത് മുൻകൂട്ടി ശ്രദ്ധിക്കുന്നതാണ് നല്ലത്).
പോയിന്റ് ഓഫ് ഗ്രിഡ്
ഗ്രിഡിലേക്ക് വിന്യസിക്കുക
വിന്യസിക്കാൻ രണ്ടോ അതിലധികമോ ഒബ്ജക്റ്റുകൾ ഉണ്ടെങ്കിൽ, അനാവശ്യമായ എല്ലാ ഓവർലാപ്പുകളും നീക്കംചെയ്യുന്നത് മൂല്യവത്താണ്. ചിലപ്പോൾ, രൂപരേഖകൾ ശ്രദ്ധാപൂർവ്വം വിന്യസിച്ചാലും, നേർത്ത വെളുത്ത വര ദൃശ്യമാകും. ഇത് തടയുന്നതിന്, അവ ഓവർലാപ്പ് ചെയ്യുന്ന വസ്തുക്കളെ ചെറുതായി ഓവർലാപ്പ് ചെയ്യാം. പ്രധാനം: SVG-യിൽ, z-ഇൻഡക്‌സിന് ഒരു നിശ്ചിത ക്രമമുണ്ട്, അത് ചുവടെയുള്ള ഒബ്‌ജക്റ്റിനെ ആശ്രയിച്ചിരിക്കുന്നു, അതിനാൽ കോഡിലെ ഫയലിന്റെ ചുവടെ മുകളിലെ ഒബ്ജക്റ്റ് സ്ഥാപിക്കുന്നത് മൂല്യവത്താണ്.
അവസാനമായി, അവസാനമായി, എന്നാൽ ഏറ്റവും കുറഞ്ഞത്, സാധാരണയായി മറന്നുപോകുന്ന ഒരു കാര്യം .htaccess ഫയലിൽ നിങ്ങളുടെ സൈറ്റിൽ SVG-യുടെ gzip കംപ്രഷൻ പ്രവർത്തനക്ഷമമാക്കുക എന്നതാണ്.
AddType image/svg+xml svg svgz
ഈ സാങ്കേതികത എത്രത്തോളം ഫലപ്രദമാണ് എന്നതിന്റെ ഒരു ഉദാഹരണമായി, ഞാൻ യഥാർത്ഥ ബ്രേക്കിംഗ് ബോർഡർ ലോഗോ എടുത്ത് ഈ രീതിയിൽ ഒപ്റ്റിമൈസ് ചെയ്യും: വലുപ്പം എന്തായിരിക്കണമെന്ന് വർദ്ധിപ്പിക്കുക; ഞാൻ രൂപരേഖകൾ ക്രമീകരിക്കും; ഞാൻ കഴിയുന്നത്ര പോയിന്റുകൾ ഇല്ലാതാക്കും; പൂർണ്ണസംഖ്യ പിക്സലുകൾ ഉപയോഗിച്ച് പോയിന്റുകൾ നീക്കുക; ഞാൻ എല്ലാ ഓവർലാപ്പ് ഏരിയകളും നീക്കി അതെല്ലാം SVGO-യിലേക്ക് അയയ്ക്കും.
യഥാർത്ഥം: 1.413b
ഒപ്റ്റിമൈസേഷന് ശേഷം: 409b
തൽഫലമായി, ഫയൽ വലുപ്പം ~71% ചെറുതായി (കംപ്രസ്സുചെയ്യുമ്പോൾ ~83% ചെറുതായി)
ഇന്ന്, SVG ആനിമേഷൻ സൃഷ്ടിക്കാൻ ഒന്നിലധികം മാർഗങ്ങളുണ്ട്. SVG കോഡിലേക്ക് നേരിട്ട് ചേർത്ത ഒരു ടാഗ് ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ കഴിയും. Snap.svg അല്ലെങ്കിൽ SVG.js പോലുള്ള പ്രത്യേക ലൈബ്രറികളുണ്ട്.
ഞങ്ങൾ അൽപ്പം വ്യത്യസ്തമായ ഒരു സമീപനം നോക്കാം: ഇൻലൈൻ എസ്‌വി‌ജി (എസ്‌വി‌ജി കോഡ് നേരിട്ട് HTML-ൽ) ആനിമേഷനും ഉപയോഗിക്കുന്നു വ്യക്തിഗത ഭാഗങ്ങൾനേരെ CSS വഴി.
ഞങ്ങൾ ഇവിടെ കവർ ചെയ്യുന്ന വിഷയത്തെക്കുറിച്ചുള്ള ഒരു ഉന്മേഷദായകമെന്ന നിലയിൽ, എന്റെ അൽമ മെറ്ററായ വുഫൂവിനുള്ള ഒരു പ്രോജക്റ്റിൽ ഈ രീതി ഞാൻ അടുത്തിടെ പരീക്ഷിച്ചു.
എന്റെ സമീപകാല പ്രോജക്ടുകളിൽ ഞാൻ SVG അധികം ഉപയോഗിച്ചിട്ടില്ല, അതിനാൽ ഈ ലേഖനം കൂടുതൽ ശ്രദ്ധ നൽകാനുള്ള മികച്ച അവസരമാണെന്ന് ഞാൻ കരുതുന്നു.
അവസാന ആനിമേഷൻ ലുക്ക് വളരെ ലളിതമാണ്. ഇത് എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഇതാ:
CodePen-ൽ കാണുക
ഇത് എങ്ങനെ ചെയ്യുന്നുവെന്ന് നോക്കാം.
1. ഞങ്ങൾ ഉപയോഗിക്കുന്ന ഘടകങ്ങളുടെ ഒരു ലിസ്റ്റ് ഉണ്ടാക്കുക
ഒരു മൂങ്ങയെ എങ്ങനെ വരയ്ക്കാം എന്ന രീതിയിൽ ഇവിടെ ധാരാളം ജോലികൾ ഉണ്ടെന്ന് തോന്നിയേക്കാം, എന്നാൽ ഈ ലേഖനം ആനിമേഷനെക്കുറിച്ചാണ്, അതിനാൽ നമുക്ക് കഴിയുന്നത്ര വേഗത്തിൽ ഗ്രാഫിക്സ് കൈകാര്യം ചെയ്യാം.
അവരുടെ ക്ലാസിക് ലോഗോ, നിറങ്ങൾ എന്നിവ ഉപയോഗിച്ച് ഒരു സൂപ്പർ സിമ്പിൾ വുഫൂ പരസ്യം ഉണ്ടാക്കാനായിരുന്നു എന്റെ പ്ലാൻ കോർപ്പറേറ്റ് ശൈലി. തുടർന്ന് കുറച്ച് സർഗ്ഗാത്മകത ചേർക്കുക:
- പേജിൽ നിന്ന് അക്ഷരങ്ങൾ ഓടുന്ന ഇഫക്റ്റ് സൃഷ്ടിക്കുക. വുഫൂ ഒരു രസകരമായ വാക്കാണ്, അക്ഷരങ്ങളും രസകരമായിരിക്കട്ടെ;
- തലേദിവസം, മുൻവശത്ത് ഒരു ദിനോസറും പിന്നിൽ വാക്കുകളും ഉള്ള ഒരു ടി-ഷർട്ട് ഞങ്ങൾ ഡിസൈൻ ചെയ്തു: " വേഗം. സ്മാർട്ട്. ഗ്രോസ്നി" ദിനോസറുകളും വുഫൂവും പങ്കിടുന്ന സ്വഭാവസവിശേഷതകളാണിത്. "FORMidble" (ഭീകരം) എന്ന വാക്കിൽ ഞങ്ങൾ കളിച്ചുവെന്ന വസ്തുത പരാമർശിക്കേണ്ടതില്ല. അതുകൊണ്ട് ആനിമേഷൻ ബ്ലോക്കിൽ ഈ വാക്കുകൾ പ്രത്യക്ഷപ്പെടുകയും അപ്രത്യക്ഷമാകുകയും ചെയ്യണമെന്ന് ഞാൻ ആഗ്രഹിച്ചു;
- ഈ വാക്കുകളെ ഒരു ദിനോസറുമായി ബന്ധിപ്പിക്കുന്നതിന്, നമുക്ക് ടി-റെക്‌സിന്റെ തല പ്രത്യക്ഷപ്പെടുകയും പെട്ടെന്ന് അപ്രത്യക്ഷമാവുകയും ചെയ്യും. ഇത് "ഫാസ്റ്റ്" എന്ന വാക്ക് പ്രദർശിപ്പിക്കും, അത് ഘടകങ്ങൾക്കുള്ള മറ്റൊരു രസകരമായ ലിങ്കായിരിക്കും.
- ഞാൻ ഈ ഘടകങ്ങളെല്ലാം ഇല്ലസ്ട്രേറ്ററിലേക്ക് ലോഡ് ചെയ്തു:
ലോഗോയും മുദ്രാവാക്യവും എങ്ങനെയാണ് രൂപപ്പെടുത്തിയിരിക്കുന്നതെന്ന് ശ്രദ്ധിക്കുക. ഇതിനർത്ഥം അവ വെക്റ്റർ രൂപങ്ങൾ മാത്രമാണെന്നും എസ്വിജിയിലും ഇൻവെർട്ടിലും അവയ്ക്ക് ഇഫക്റ്റുകൾ എളുപ്പത്തിൽ പ്രയോഗിക്കാമെന്നുമാണ്.
നിങ്ങൾ കാണുന്ന വാചകം “വേഗത. ” ടെക്സ്റ്റ് ഫോർമാറ്റിൽ ഇല്ലസ്ട്രേറ്ററിൽ തുടരുന്നു.
ഞാൻ ഫയൽ ഇല്ലസ്ട്രേറ്ററിൽ സേവ് ചെയ്യുമ്പോൾ, അക്ഷരങ്ങൾ ഒരു ഘടകമായി നിലനിൽക്കും.
2. SVG ഫോർമാറ്റിൽ സംരക്ഷിക്കുക
SVG ആയി സംരക്ഷിക്കുന്നത് ഇല്ലസ്ട്രേറ്റർ പിന്തുണയ്ക്കുന്നു:
നിങ്ങൾക്ക് ഈ SVG ഫയൽ ഒരു കോഡ് എഡിറ്ററിൽ തുറന്ന് അതിൽ SVG കോഡ് കാണാം:
3. SVG വൃത്തിയാക്കി രൂപങ്ങൾക്കായി ക്ലാസുകൾ സജ്ജമാക്കുക
നിങ്ങൾക്ക് കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യാനും വൃത്തിയാക്കാനും SVGO വഴി പ്രവർത്തിപ്പിക്കാം അനാവശ്യ ഘടകങ്ങൾ DOCTYPE എന്ന് ടൈപ്പ് ചെയ്യുക.
എന്നാൽ ഇപ്പോൾ ഞങ്ങൾക്ക് കൂടുതൽ പ്രധാനം ആകാരങ്ങൾക്ക് വ്യത്യസ്ത ക്ലാസ് പേരുകൾ നൽകുക എന്നതാണ്, അതിനാൽ നമുക്ക് അവ CSS-ൽ തിരഞ്ഞെടുത്ത് വ്യത്യസ്ത കാര്യങ്ങൾ ചെയ്യാൻ കഴിയും!
4. SVG തിരുകുക
നിങ്ങൾക്ക് ഈ SVG കോഡ് പകർത്തി ബ്ലോക്ക് ദൃശ്യമാകാൻ ആഗ്രഹിക്കുന്ന HTML-ലേക്ക് നേരിട്ട് ഒട്ടിക്കാം. എന്നാൽ ഇതൊരു പ്രാകൃത ഫലകം മാത്രമാണ്.
നിങ്ങൾക്ക് ഇതുപോലൊന്ന് ചെയ്യാൻ കഴിയും:
5. ആനിമേഷൻ!
ഇപ്പോൾ ഈ ആകാരങ്ങളെല്ലാം DOM-ലേക്ക് നയിക്കപ്പെടുന്നു, നമുക്ക് അവയെ സ്ഥാപിക്കാനും മറ്റേതൊരു ശൈലിയും പോലെ ക്രമീകരിക്കാനും കഴിയും HTML ഘടകം. അത് ചെയ്യാം.
10 സെക്കൻഡ് ടൈംലൈൻ ഉപയോഗിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് പറയാം:
ആദ്യത്തെ വാക്കുകൾ വീഴുകയും അപ്രത്യക്ഷമാവുകയും ചെയ്യുന്നു
നമ്മൾ ആദ്യം ചെയ്യേണ്ടത് "" എന്ന വാക്കുകൾ അച്ചടിക്കുക എന്നതാണ്. വേഗം. സ്മാർട്ട്. ഗ്രോസ്നി.» ഓരോ വാക്കും ഒരു സെക്കൻഡ് പ്രദർശിപ്പിക്കും.
ഓരോ വാക്കും 10% സമയമെടുക്കുന്ന ഒരു ആനിമേഷൻ ഞങ്ങൾ സൃഷ്ടിക്കുന്നത് ഇങ്ങനെയാണ്:
@കീഫ്രെയിംസ് ഹൈഡ്‌ഷോ (0% (ഒപാസിറ്റി: 1;) 10% ( അതാര്യത: 1; ) 15% ( അതാര്യത: 0; ) 100% ( അതാര്യത: 0; ) )
തുടർന്ന് ഞങ്ങൾ ആദ്യ വാക്കും മുഴുവൻ ആനിമേഷന്റെ ദൈർഘ്യവും 10 സെക്കൻഡിൽ വ്യക്തമാക്കുന്നു (അതിൽ 10% 1 സെക്കൻഡ്):
ടെക്സ്റ്റ്-1 (ആനിമേഷൻ: ഹൈഡ്‌ഷോ 10s അനന്തമായത് എളുപ്പമാക്കുന്നു; )
അടുത്ത രണ്ട് വാക്കുകൾ ആദ്യം മറയ്‌ക്കും (ഒപാസിറ്റി: 0; ), തുടർന്ന് ഞങ്ങൾ അതേ ആനിമേഷൻ ഉപയോഗിക്കും, സമയ കാലതാമസത്തോടെ മാത്രം, അടുത്ത വാക്കുകൾ കുറച്ച് കഴിഞ്ഞ് ദൃശ്യമാകും:
ടെക്സ്റ്റ്-2 (ഒപാസിറ്റി: 0; ആനിമേഷൻ: ഹൈഡ്‌ഷോ 10സെ 1.5സെ ഈസ് അനന്തമാണ്; ) .ടെക്സ്റ്റ്-3 (ഒപാസിറ്റി: 0; ആനിമേഷൻ: ഹൈഡ്‌ഷോ 10സെ 3സെ ഈസ് അനന്തമാണ്; )
ഓരോ അടുത്ത വാക്കിന്റെയും ഔട്ട്പുട്ടിനുമിടയിലുള്ള ഇടവേള സജ്ജീകരിക്കാൻ 0.5 സെക്കൻഡ് കൂടി ആവശ്യമാണ്.
കുതിക്കുന്ന അക്ഷരങ്ങൾ
ഈ ഘടകത്തിനായുള്ള ആനിമേഷൻ സജ്ജീകരിച്ചുകഴിഞ്ഞാൽ, വുഫൂ എന്ന വാക്കിലെ അക്ഷരങ്ങൾക്കുള്ള ഇഫക്റ്റുകളിലേക്ക് ഞങ്ങൾ പോകുന്നു, അത് ഇതുപോലെ വശത്തേക്ക് ചാടണം:
ഇവിടെയുള്ള തന്ത്രം നമ്മൾ സൃഷ്ടിക്കുന്നു എന്നതാണ് ആനിമേഷൻ പ്രഭാവം, ഇത് 5 സെക്കൻഡ് മാത്രമേ നീണ്ടുനിൽക്കൂ, പക്ഷേ ഞങ്ങൾ അത് ഒരു പ്രാവശ്യം മുന്നോട്ട് ഓടിക്കുന്നു, തുടർന്ന് വിപരീത ദിശയിലേക്ക്.
അതിനാൽ ഇത് ഞങ്ങളുടെ 10 സെക്കൻഡ് ചാർട്ടുമായി പൊരുത്തപ്പെടുകയും ടൈംലൈനിന്റെ മധ്യത്തിൽ സ്ഥിതിചെയ്യുകയും ചെയ്യും. നമ്മൾ ചെയ്യേണ്ടത് ആനിമേഷൻ ഇഫക്റ്റ് ഒരു ദിശയിൽ സ്ക്രോൾ ചെയ്യുന്നതിനുള്ള പാരാമീറ്ററുകൾ സജ്ജമാക്കുക എന്നതാണ്, കാരണം എപ്പോൾ റിവേഴ്സ് സ്ക്രോൾഅത് അതിന്റെ യഥാർത്ഥ സ്ഥാനത്തേക്ക് മടങ്ങും.
ഓരോ അക്ഷരത്തിനുമുള്ള ഇഫക്റ്റുകൾക്ക് നേരിയ കാലതാമസമുണ്ട്, അതിനാൽ അവയെല്ലാം ഒരേ സമയം നീങ്ങുന്നില്ല, എന്നാൽ ഒന്നിനുപുറകെ ഒന്നായി:
വുഫൂ-ലെറ്റർ (ആനിമേഷൻ: കബൂം 5 എസ് ഈസ് ഇതര അനന്തമായ; കുട്ടി(4) (ആനിമേഷൻ-ഡിലേ: 0.3സെ; ) &: nth-child(5) (ആനിമേഷൻ-ഡിലേ: 0.4സെ; ) ) @keyframes kaboom (90% (രൂപമാറ്റം: സ്കെയിൽ(1.0); ) 100% (രൂപമാറ്റം : സ്കെയിൽ(1.1); )
മുകളിലുള്ള SCSS കോഡ് ഒരു ചെറിയ പതിപ്പ് മാത്രമാണ്, അതിൽ പ്രിഫിക്സുകൾ ഉൾപ്പെടുന്നില്ല (നിങ്ങൾക്ക് പ്രായോഗികമായി ഇത് ആവശ്യമാണ്).
യഥാർത്ഥ CSS-ൽ നിന്ന് എടുക്കാൻ ഉപയോഗപ്രദമായ ഒരു പ്രോപ്പർട്ടി ആനിമേഷൻ-ഡിലേ ആണെന്ന് ഞാൻ കരുതുന്നു. അക്ഷരങ്ങൾ അൽപ്പം കാലതാമസത്തോടെ നീങ്ങുമ്പോൾ അത് വൃത്തിയായി കാണപ്പെടും.
ഒടുവിൽ, ദിനോസർ
ഈ ലിഖിതങ്ങൾ ബ്ലോക്കിലുടനീളം മിന്നിമറയുമ്പോൾ, ഒരു ദിനോസറിന്റെ തല താഴെ നിന്ന് ഉയർന്നുവരുന്നു. ദിനോസർ രൂപം ഉൾക്കൊള്ളുന്നു എന്ന വസ്തുത ഉണ്ടായിരുന്നിട്ടും വലിയ അളവ്ഘടകങ്ങൾ, ഈ ഘടകങ്ങളെല്ലാം ഉൾക്കൊള്ളുന്ന ഒരു പൊസിഷനിംഗ് ടാഗ് (ഗ്രൂപ്പ്) ഉപയോഗിച്ച് നമുക്ക് അവയെല്ലാം ഒരുമിച്ച് സ്ഥാപിക്കാൻ കഴിയും.
ആനിമേഷൻ സ്ഥാപിക്കാൻ ട്രാൻസ്ഫോർമുകൾ ഉപയോഗിക്കുന്നത് കൂടുതൽ കാര്യക്ഷമമായതിനാൽ, കീഫ്രെയിമുകൾ ഉപയോഗിച്ച് ഞങ്ങൾ ഇത് ചെയ്യും:
@keyframes പോപ്പ്അപ്പ് (0% (രൂപമാറ്റം: translateY(150px); ) 34% (പരിവർത്തനം: translateY(20px); ) 37% (പരിവർത്തനം: translateY(150px); 100% (പരിവർത്തനം: translateY(150px); ) )
ഈ ആനിമേഷൻ "അവസാന" ഏകദേശം 3 സെക്കൻഡിൽ പ്രദർശിപ്പിക്കണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ഈ ചക്രം യഥാർത്ഥത്തിൽ മുഴുവൻ 10 സെക്കൻഡിലും പ്രവർത്തിക്കുന്നു, എന്നാൽ അവസാന 3 സെക്കൻഡിനുള്ളിൽ യഥാർത്ഥ ദൃശ്യമായ ഇഫക്റ്റുകൾ നിങ്ങൾ കാണും.
ഇഫക്‌റ്റിൽ TranslateY(150px) പ്രയോഗിക്കുമ്പോൾ, ദിനോസർ ബോക്‌സിന് പുറത്ത് വളരെ താഴേക്ക് നീങ്ങുന്നു, അത് നിങ്ങൾക്ക് കാണാൻ കഴിയില്ല.
എന്നാൽ ഈ ആനിമേഷന്റെ 37% സമയവും (ഏകദേശം 3 സെക്കൻഡ്) അവൻ സാവധാനം മുകളിലേക്ക് നീങ്ങുന്നതും പിന്നീട് വേഗത്തിൽ താഴേക്ക് നീങ്ങുന്നതും നിങ്ങൾ കാണുന്നു.
ഈ ആനിമേഷൻ പ്രയോഗിക്കുമ്പോൾ ഞങ്ങൾ ഇത് ഉറപ്പാക്കും:
- ദിനോസർ ആദ്യം മറഞ്ഞിരിക്കുന്നു;
- ഈ ആനിമേഷൻ ശകലത്തിന്റെ ഔട്ട്‌പുട്ട് കൃത്യസമയത്ത് വൈകുന്നു, അതിനാൽ ലോഗോ പദത്തിലെ അക്ഷരങ്ങൾ നൃത്തം പൂർത്തിയാക്കിയ ഉടൻ തന്നെ ഇത് ആരംഭിക്കുന്നു (അവ വശത്തേക്ക് മാറി അവരുടെ സ്ഥലത്തേക്ക് മടങ്ങി).
ട്രെക്സ് (രൂപമാറ്റം: translateY(150px); ആനിമേഷൻ: പോപ്പ്അപ്പ് 10s 6.5s അനന്തമായത്; )
അവസാന നിമിഷത്തിൽ ദിനോസർ താഴേക്ക് വീഴുന്നതിനാൽ ഉടൻ തന്നെ ബ്ലോക്കിൽ "ഫാസ്റ്റ്" എന്ന വാക്ക് വീണ്ടും പ്രത്യക്ഷപ്പെടും (ആനിമേഷൻ പ്ലേബാക്ക് ഇടവേള അനന്തമായി സജ്ജീകരിച്ചിരിക്കുന്നു, അങ്ങനെ അത് ഒരു സർക്കിളിൽ വീണ്ടും വീണ്ടും പ്രവർത്തിക്കുന്നു). ഇത് കുറച്ച് രസകരമായ സമന്വയം ചേർക്കുന്നു.
6. ബ്ലോക്ക് ക്ലിക്ക് ചെയ്യാവുന്ന/ഇന്ററാക്ടീവ് പരസ്യമാക്കി മാറ്റുന്നു
അതിലൊന്ന് ഉപയോഗപ്രദമായ സവിശേഷതകൾഗുണനിലവാരം നഷ്‌ടപ്പെടാതെ ഏത് വലുപ്പത്തിലും ഒബ്ജക്റ്റുകൾ സ്കെയിൽ ചെയ്യാനുള്ള കഴിവാണ് SVG.
ചിത്രങ്ങളുടെ യഥാർത്ഥ നിലവാരം നിലനിർത്തിക്കൊണ്ട് ഒരു ഇൻലൈൻ SVG ബോക്സ് സൃഷ്ടിക്കുന്നതിന്, നമുക്ക് ഓൾ പാഡഡ് ബോക്സ് ടെക്നിക് ഉപയോഗിക്കാം.
.wufoo-ad-wrap (ഉയരം: 0; പാഡിംഗ് ടോപ്പ്: 100%; സ്ഥാനം: ബന്ധു; ) .wufoo-ad (സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; വീതി: 100%; ഉയരം: 100%; )"റാപ്പർ" അതിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി എല്ലായ്പ്പോഴും ഒരു ചതുരത്തിന്റെ ആകൃതി എടുക്കും എന്നതാണ് ആശയം. അപ്പോൾ ഞങ്ങൾ ചോദിക്കുന്നു കേവല മൂല്യങ്ങൾഈ പെർഫെക്റ്റ് സ്ക്വയറിനുള്ളിലെ SVG സ്ഥാനങ്ങൾ, വീതിയെ അടിസ്ഥാനമാക്കി അവയുടെ അളവുകൾ ക്രമീകരിക്കപ്പെടുന്നു.
ഇതൊരു പരസ്യമായതിനാൽ (തീർച്ചയായും ക്ലിക്കുചെയ്യേണ്ടതുണ്ട്), തുടർന്ന് അടങ്ങുന്ന കണ്ടെയ്‌നറായി, പകരം