ഇന്ന് വെബിലെ ഏറ്റവും ചൂടേറിയ സാങ്കേതികതകളിലൊന്നാണ് പാരലക്സ് സ്ക്രോളിംഗ്. സ്ക്രോൾ വീൽ നിങ്ങളുടെ മൗസിൽ കറക്കുന്ന ആ സൈറ്റുകളിലേക്ക് ഞങ്ങൾ എത്തിയിരിക്കുന്നു, നിങ്ങൾ മൗസ് വീൽ തിരിക്കുന്നതിനനുസരിച്ച് പേജിലെ ഉള്ളടക്കം മുകളിലേക്കോ താഴേക്കോ നീങ്ങുന്നു.
വെബ് രൂപകൽപ്പനയ്ക്കും ഗ്രാഫിക് രൂപകൽപ്പനയ്ക്കും പുതിയവയ്ക്ക് വേണ്ടി, ഈ സാങ്കേതികവിദ്യ CSS- ന്റെ ആവശ്യകത കാരണം നേടാൻ വളരെ ബുദ്ധിമുട്ടാണ്.
നിങ്ങൾ അത് വിശദീകരിച്ചാൽ, ഗ്രാഫിക് ആർട്ടിസ്റ്റുകൾക്ക് അപ്പീപ്പിക്കുന്ന നിരവധി അപ്ലിക്കേഷനുകൾ ഉണ്ട്. അവ അടിസ്ഥാനപരമായി വെബ്പേജുകളിലേക്ക് പരിചിതമായ ഒരു പേജ് വിതരണ സമീപനം ഉപയോഗിക്കുന്നു, അതിനർത്ഥം ഒരു കുറവുമില്ല, ഏതെങ്കിലും ഉണ്ടെങ്കിൽ, കോഡിംഗ് ഉൾപ്പെട്ടിരിക്കുന്നു. ശരിക്കും പ്രാധാന്യം കൽപിച്ചിരിക്കുന്ന ഒരു ആപ്ലിക്കേഷൻ അഡോബ് മ്യൂസിക് ആണ്.
മ്യൂസിക് ഉപയോഗിച്ച് ഗ്രാഫിക്സ് പ്രയോജനം ചെയ്ത പ്രവൃത്തി വളരെ ആശ്ചര്യകരമാണ്. മ്യൂസിക് സൈറ്റിന്റെ ദിനം സന്ദർശിക്കുന്നതിലൂടെ നിങ്ങൾക്ക് എന്ത് ചെയ്യാനാകും എന്നതിന്റെ ഒരു സാമ്പിൾ നിങ്ങൾക്ക് കാണാൻ കഴിയും. "കൌതുകമുള്ള കളിപ്പാട്ടം" എന്ന നിലയിൽ, മ്യൂസിക്, വെബ്, പ്രോത്സാഹനങ്ങളാണെങ്കിലും, മൊബൈൽ, വെബ് പ്രോട്ടോടൈറ്റുകൾ സൃഷ്ടിക്കാൻ ഡിസൈനർമാർ അത് ഉപയോഗിക്കുന്നുണ്ട്, അത് അവസാനം അവരുടെ ഡവലപ്പർമാർക്ക് ഡവലപ്പർമാരെ കൈമാറും.
മ്യൂസുകളുമായി സാങ്കൽപ്പിക്കുവാൻ അവിശ്വസനീയമായ ഒരു സാങ്കേതികത പാരലക്സ് സ്ക്രോളിംഗാണ്, വ്യായാമത്തിന്റെ പൂർത്തിയായ പതിപ്പ് നിങ്ങൾ കാണാൻ ആഗ്രഹിക്കുന്നെങ്കിൽ ഞങ്ങൾ നിങ്ങളുടെ ബ്രൌസർ ഈ പേജിലേക്ക് പോയിക്കഴിഞ്ഞു. നിങ്ങളുടെ മൌസ് സ്ക്രോൾ ചക്രം റോൾ ചെയ്യുമ്പോൾ, പാഠം മുകളിലേക്കും താഴേക്കും നീങ്ങുന്നു, ചിത്രങ്ങളും മാറുന്നു.
നമുക്ക് തുടങ്ങാം.
07 ൽ 01
ഒരു വെബ് പേജ് സൃഷ്ടിക്കുക
നിങ്ങൾ മ്യൂസിക് സമാരംഭിക്കുമ്പോൾ പുതിയ സൈറ്റ് ലിങ്ക് ക്ലിക്കുചെയ്യുക. ഇത് പുതിയ സൈറ്റ് പ്രോപ്പർട്ടികൾ തുറക്കും. ഈ പ്രോജക്റ്റ് ഒരു ഡെസ്ക്ടോപ്പ് ആപ്ലിക്കേഷനു വേണ്ടി രൂപകൽപ്പന ചെയ്യപ്പെടുകയും അതിനെ ഇനീഷ്യൽ ലേഔട്ട് പോപ്പ്-ഡൗൺ മെനുവിൽ നിന്നും തെരഞ്ഞെടുക്കുകയും ചെയ്യും. നിങ്ങൾക്ക് നിരകളുടെ എണ്ണം, ഗട്ടർ വിഡ്ത്ത്, മാർജിനുകൾ, പാഡിംഗ് എന്നിവയുടെ മൂല്യങ്ങൾ സജ്ജമാക്കാൻ കഴിയും. ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ ഇത് വളരെ മോശമായിരുന്നില്ല, ശരി ക്ലിക്കുചെയ്യുക.
07/07
പേജ് ഫോർമാറ്റ് ചെയ്യുക
നിങ്ങൾ സൈറ്റ് പ്രോപ്പർട്ടികൾ സജ്ജമാക്കുകയും ശരി ക്ലിക്കുചെയ്യുകയും ചെയ്യുമ്പോൾ നിങ്ങൾ പ്ലാൻ കാഴ്ച എന്ന് വിളിക്കപ്പെടുന്നു. മുകളിലുള്ള ഒരു ഹോം പേജും വിൻഡോയുടെ താഴെയുള്ള മാസ്റ്റർ പേജും ഉണ്ട്. ഞങ്ങൾക്ക് ഒരു പേജ് മാത്രമേ ആവശ്യമുള്ളൂ. ഡിസൈൻ കാഴ്ചയിലേക്ക് പോകാൻ, ഞങ്ങൾ ഇന്റർഫേസ് തുറന്ന ഹോം പേജിൽ ഡബിൾ ക്ലിക്ക് ചെയ്തു.
ഇടത് വശത്ത് കുറച്ച് അടിസ്ഥാന ഉപകരണങ്ങളും വലതുഭാഗത്ത് പേജിലെ ഉള്ളടക്കത്തെ കൈകാര്യം ചെയ്യുന്നതിന് ഉപയോഗിക്കുന്ന നിരവധി പാനലുകൾ ഉണ്ട്. മുകളിലുള്ള ഭാഗങ്ങൾ പേജിൽ പ്രയോഗിക്കാവുന്നതോ അല്ലെങ്കിൽ പേജിൽ തിരഞ്ഞെടുത്തതോ ആകാം. ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ ഒരു കറുത്ത പശ്ചാത്തലം ആഗ്രഹിച്ചു. ഇത് സാധ്യമാക്കുന്നതിന്, ബ്രൌസർ ഫിൽ വർണ്ണ ചിപ്പ്യിൽ ക്ലിക്കുചെയ്ത് കളർ പിക്കറിൽ നിന്ന് കറുപ്പ് തിരഞ്ഞെടുത്തു.
07 ൽ 03
പേജിലേക്ക് ടെക്സ്റ്റ് ചേർക്കുക
അടുത്ത ഘട്ടത്തിൽ പേജിൽ കുറച്ച് പാഠം ചേർക്കുക എന്നതാണ്. ഞങ്ങൾ ടെക്സ്റ്റ് ടൂൾ തിരഞ്ഞെടുത്ത് ഒരു ടെക്സ്റ്റ് ബോക്സ് ആകർഷിച്ചു. നമ്മൾ "സ്വാഗതം" എന്ന വാക്കും നൽകി, Properties ൽ ടെക്സ്റ്റ് Arial, 120 പിക്സൽ വൈറ്റ് ആയി സെറ്റ് ചെയ്തു . സെന്റർ വിന്യസിച്ചു.
തുടർന്ന് നമ്മൾ തെരഞ്ഞെടുക്കൽ ടൂളിലേക്ക് മാറി, ടെക്സ്റ്റ്ബോക്സിൽ ക്ലിക്കുചെയ്ത്, മുകളിൽ നിന്ന് 168 പിക്സലുകളിലേക്ക് Y സ്ഥാനം സജ്ജമാക്കുക. ടെക്സ്റ്റ് ബോക്സ് ഇപ്പോഴും തിരഞ്ഞെടുത്തിട്ട്, നമ്മൾ അലൈൻ പാനൽ തുറക്കുകയും ടെക്സ്റ്റ് ബോക്സിൽ മധ്യഭാഗത്തേക്ക് വിന്യസിക്കുകയും ചെയ്തു .
ഒടുവിൽ, തിരഞ്ഞെടുത്തിട്ടുള്ള ടെക്സ്റ്റ് ബോക്സിൽ ഞങ്ങൾ ഓപ്ഷൻ / Alt , Shift കീകൾ അമർത്തി , ടെക്സ്റ്റ് ബോക്സിൻറെ നാലു പകർപ്പുകൾ ഉണ്ടാക്കി. ടെക്സ്റ്റും ഓരോ പകർപ്പിന്റെയും Y സ്ഥാനവും ഞങ്ങൾ മാറ്റി.
- ലേക്ക്, 871
- ഗ്രാഫിക്സ്, 1621
- സോഫ്റ്റ്വെയർ, 2371
- @ About @ 3181
ഓരോ ടെക്സ്റ്റ് പെട്ടിന്റെയും സ്ഥാനം സജ്ജമാക്കിയ പോലെ, ടെക്സ്റ്റ് സ്ഥാനം മാറ്റുന്നതിന് പേജ് വലുപ്പം മാറ്റും.
04 ൽ 07
ഇമേജ് പ്ലെയ്സ്ഹോൾഡറുകൾ ചേർക്കുക
അടുത്ത ഘട്ടം വാചക ബ്ലോക്കുകളിൽ ഇമേജുകൾ ഇടുക എന്നതാണ്.
ചുവടെയുള്ള ഒരു ടൂൾ സെലക്ട് ചെയ്ത് പേജിന്റെ ഒരു വശത്തു നിന്നും മറ്റൊന്നിലേക്ക് നീളുന്ന ഒരു ബോക്സ് വരയ്ക്കുക എന്നതാണ് ആദ്യപടി. തിരഞ്ഞെടുത്ത ദീർഘചതുരം ഉപയോഗിച്ച്, അതിന്റെ ഉയരം 250 പിക്സലുകളിലേക്കും അതിന്റെ Y സ്ഥാനത്തു് 425 പിക്സലുകളിലേക്കും സജ്ജീകരിച്ചിരിക്കുന്നു . ഒരു ഉപയോക്താവിൻറെ ബ്രൗസർ വ്യൂപോർട്ട് ഉൾക്കൊള്ളുന്നതിന് പേജ് വീതിയിലേക്ക് എപ്പോഴും നീട്ടി അല്ലെങ്കിൽ കരാർ ഉണ്ടാക്കുമെന്നതാണ് പദ്ധതി. ഇത് നിർവഹിക്കാൻ, ഞങ്ങൾ Properties ൽ 100% വീതി ബട്ടൺ ക്ലിക്ക് ചെയ്തു. ഇതെന്താണ് ചെയ്യുന്നത് എക്സ് മൂല്യം പുറത്തു വയ്ക്കുകയും ചിത്രം എല്ലായ്പ്പോഴും ഒരു ബ്രൌസറിലെ വ്യൂപോർട്ട് വീതിയുടെ 100% ആണെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.
07/05
ഇമേജ് പ്ലെയ്സ്ഹോൾഡറിലേക്ക് ഇമേജുകൾ ചേർക്കുക
ദീർഘചതുരം തിരഞ്ഞെടുത്ത് നമ്മൾ ഫിൽ ലിങ്ക് ക്ലിക്കുചെയ്തു - നിറം ചിപ്പ് അല്ല - കൂടാതെ ചതുരത്തിൽ ഒരു ഇമേജ് ചേർക്കുന്നതിന് ഞാൻ മെയ്ക്ക് മൈക്ക് ചെയ്തു . ഉചിതമായ സ്ഥലത്ത്, ചിത്രത്തിന്റെ മധ്യഭാഗത്ത് നിന്നും ഇമേജ് സ്കെയിൽ ചെയ്തതായി ഉറപ്പാക്കാൻ ഞങ്ങൾ സ്ഥല വലിപ്പത്തിൽ മധ്യഭാഗത്തെ ഹാൻഡിൽ ക്ലിക്കുചെയ്ത് സ്കെയിൽ തിരഞ്ഞെടുക്കുകയായിരുന്നു.
അടുത്തതായി, ഓപ്ഷൻ / അൽ-ഷിഫ്റ്റ്-ഡ്രഗ് ടെക്നിക് ഉപയോഗിച്ചാണ് ഞങ്ങൾ ആദ്യ രണ്ട് ടെക്സ്റ്റ് ബ്ളോക്കുകൾക്കിടയിൽ ചിത്രത്തിന്റെ ഒരു പകർപ്പ് സൃഷ്ടിച്ചത്, ഫിൽ പാനൽ തുറന്ന് മറ്റൊരു ചിത്രത്തിനായി ചലിപ്പിച്ചു. ബാക്കിയുള്ള രണ്ട് ചിത്രങ്ങൾക്കുമാണ് ഞങ്ങൾ ഇതു ചെയ്തത്.
ചിത്രങ്ങളുമായി, ചലനത്തെ ചേർക്കാൻ സമയമായി.
07 ൽ 06
പാരലക്സ് സ്ക്രോളിംഗ് ചേർക്കുക
അഡോബ് മ്യൂസിസിൽ പാരലക്സ് സ്ക്രോളിംഗ് ചേർക്കുന്നതിനുള്ള നിരവധി വഴികളുണ്ട്. ഞങ്ങൾ ഇത് ചെയ്യുന്നതിനുള്ള ഒരു ലളിതമായ മാർഗ്ഗം നിങ്ങൾക്ക് കാണിക്കാൻ പോകുകയാണ്.
ഫിൽ പാനൽ തുറക്കുകയാണെങ്കിൽ, സ്ക്രോൾ ടാബിൽ ക്ലിക്കുചെയ്യുക, അത് തുറക്കുമ്പോൾ, മോഷൻ ചെക്ക്ബോക്സിൽ ക്ലിക്കുചെയ്യുക.
നിങ്ങൾ പ്രാഥമിക , അന്തിമ ചലനത്തിനായി മൂല്യങ്ങൾ കാണും. സ്ക്രോൾ വീലുമായി ബന്ധപ്പെട്ട് ചിത്രം എത്രത്തോളം അതിവേഗം ചലിക്കുന്നുവെന്നത് ഇവ നിർണ്ണയിക്കുന്നു. ഉദാഹരണത്തിന്, 1.5 ന്റെ മൂല്യം ചക്രത്തെക്കാൾ 1.5 മടങ്ങ് വേഗത്തിൽ ചിത്രം നീങ്ങും. സ്ഥലത്ത് ചിത്രങ്ങൾ ലോക്കുചെയ്യാൻ ഞങ്ങൾ 0 ൻറെ ഒരു മൂല്യം ഉപയോഗിച്ചു.
തിരശ്ചീന, ലംബ അമ്പടയാളങ്ങൾ ചലനത്തിന്റെ ദിശ നിർണ്ണയിക്കുന്നു. മൂല്യങ്ങൾ 0 ആണെങ്കിൽ നിങ്ങൾ ഏതു അമ്പടയാളത്തിലാണ് ക്ലിക്കുചെയ്തത് എന്നതിനെ അടിസ്ഥാനമാക്കിയുള്ള ചിത്രങ്ങൾ ബഡ്ജറ്റ് ചെയ്യില്ല.
നടുവിലെ മൂല്യം- കീ പൊസിഷൻ - ചിത്രങ്ങൾ നീക്കാൻ ആരംഭിക്കുന്ന പോയിന്റ് കാണിക്കുന്നു. ചിത്രത്തിനു മുകളിലുള്ള വരി, ഈ ഇമേജിനായി, പേജിന്റെ മുകൾഭാഗത്തുള്ള 325 പിക്സലുകൾ ആരംഭിക്കുന്നു. സ്ക്രോൾ ആ മൂല്യത്തിലേക്ക് എത്തുമ്പോൾ ചിത്രം നീക്കം ചെയ്യാൻ തുടങ്ങുന്നു. ഒന്നുകിൽ ഡയലോഗ് ബോക്സിൽ മാറ്റം വരുത്താനോ വരിയുടെ മുകളിലുള്ള മുകളിലേക്കോ താഴേയ്ക്കോ ഞെക്കുകയോ ചെയ്തുകൊണ്ടോ നിങ്ങൾക്ക് ഈ മൂല്യം മാറ്റാം.
പേജിലെ മറ്റ് ചിത്രങ്ങൾക്ക് ഇത് ആവർത്തിക്കുക.
07 ൽ 07
ബ്രൌസർ ടെസ്റ്റ്
ഈ അവസരത്തിൽ ഞങ്ങൾ തീർന്നു. ഞങ്ങൾ ആദ്യം ചെയ്തത്, വ്യക്തമായ കാരണങ്ങളാൽ, ഫയൽ> സൈറ്റ് സംരക്ഷിക്കുക എന്നതാണ് . ബ്രൗസർ ടെസ്റ്റിന് ഞങ്ങൾ ഫയൽ> പ്രിവ്യൂ പേജ് ബ്രൌസറിൽ മാത്രം തിരഞ്ഞെടുത്തു. ഇത് ഞങ്ങളുടെ കംപ്യൂട്ടറിന്റെ സ്ഥിരസ്ഥിതി ബ്രൌസർ തുറന്നു, പേജ് തുറന്നപ്പോൾ ഞങ്ങൾ സ്ക്രോളിംഗ് ആരംഭിച്ചു.