എല്ലാവർക്കും ഹായ്. ലളിതമായ പാരലാക്സ് ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ചെറിയ സ്ക്രിപ്റ്റിനെക്കുറിച്ച് ഇന്ന് ഞാൻ നിങ്ങളോട് പറയും.

ലേഖനം ചെറുതും എന്നാൽ വിജ്ഞാനപ്രദവുമായിരിക്കും, അതിനാൽ ഏകദേശം 15 മിനിറ്റിനുള്ളിൽ നിങ്ങളുടെ ലാൻഡിംഗ് പേജിലേക്ക് പാരലാക്സ് ചേർക്കാൻ നിങ്ങൾക്ക് കഴിയും. നിങ്ങൾക്ക് ഇത് ചേർക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ രസകരമായ പ്രഭാവംസൈറ്റിലേക്ക്, തുടർന്ന് വായിക്കുക...

സൈറ്റിലെ പാരലാക്സ് ഇഫക്റ്റ് എന്താണ്?

അതെന്താണെന്ന് ആദ്യം പറയാം. അതിനാൽ, വെബ് ഡിസൈനിലെ പാരലാക്സ് ഇഫക്റ്റ് ഒരു സാങ്കേതികതയാണ് പശ്ചാത്തല ചിത്രംഅതിന് മുകളിലുള്ള മൂലകങ്ങളേക്കാൾ പതുക്കെ നീങ്ങുന്നു. കൂടുതൽ അനുഭവപരിചയമുള്ളവർക്ക്, മൗസ് കഴ്‌സറിലേക്ക് പാരലാക്സ് ഇഫക്റ്റ് "ബൈൻഡ്" ചെയ്യില്ലെന്ന് ഞാൻ റിസർവേഷൻ ചെയ്യും. നമുക്ക് ഒരു പാരലാക്സ് പശ്ചാത്തലം സൃഷ്ടിക്കാം. നമുക്ക് തുടങ്ങാം.

ഒരു വെബ്സൈറ്റിൽ എങ്ങനെ ഒരു പാരലാക്സ് ഇഫക്റ്റ് ഉണ്ടാക്കാം

അതിനാൽ, ഒന്നാമതായി, ഞങ്ങൾ jquery ലൈബ്രറി ബന്ധിപ്പിക്കുന്നു. പതിവുപോലെ, ഹെഡ് ടാഗുകൾക്കിടയിൽ:

ഇപ്പോൾ, നിങ്ങൾ ലളിതമായ പാരലാക്സ് സ്‌ക്രോളിംഗ് സ്‌ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്‌ത് കണക്‌റ്റ് ചെയ്യേണ്ടതുണ്ട്. കംപ്രസ് ചെയ്ത പതിപ്പ് ഉടനടി ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു അധിക ക്രമീകരണങ്ങൾസ്ക്രിപ്റ്റിനുള്ളിൽ ഇത് ചെയ്യേണ്ട ആവശ്യമില്ല:

ഇപ്പോൾ, നമ്മുടെ പാരലാക്സ് ഇഫക്റ്റ് പ്രവർത്തിക്കുന്നതിന് html പേജിൽ എന്താണ് എഴുതേണ്ടതെന്ന് നമുക്ക് നോക്കാം.

സ്മാർട്ട് ലാൻഡിംഗ് ലാൻഡിംഗിൻ്റെ സൃഷ്ടിപേജ്

ഡാറ്റ പാരലാക്സ്="സ്ക്രോൾ"

Data-image-src="ചിത്രത്തിലേക്കുള്ള പാത/bg.png"

ഇമേജ് ഇമേജ് ഹെഡറിൽ സ്ഥാപിച്ചിരിക്കുന്നത് img ടാഗ് ഉപയോഗിച്ചല്ല, മറിച്ച് ഞങ്ങൾ പാരലാക്സ് നടപ്പിലാക്കാൻ ആഗ്രഹിക്കുന്ന കണ്ടെയ്‌നറിലെ ഒരു ആട്രിബ്യൂട്ടായി നേരിട്ട് സജ്ജീകരിച്ചിരിക്കുന്നു എന്നത് ശ്രദ്ധിക്കുക.

തത്വത്തിൽ, നമുക്ക് ഇവിടെ അവസാനിപ്പിക്കാം, എന്നാൽ കുറച്ച് വാക്കുകൾ കൂടി:

• പാരലാക്സ് ഇഫക്റ്റ് നടപ്പിലാക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്ന മറ്റ് ഘടകങ്ങളൊന്നും ഡൈവിൽ ഇല്ലെങ്കിൽ, നിങ്ങൾ അതിൻ്റെ ഉയരം സജ്ജീകരിക്കേണ്ടതുണ്ട്, അല്ലാത്തപക്ഷം നിങ്ങൾ ഒന്നും കാണില്ല.
• ഉപയോഗിച്ചില്ലെങ്കിൽ അഡാപ്റ്റീവ് ഡിസൈൻ, നിങ്ങൾക്ക് നാച്ചുറൽ വിഡ്ത്ത്, നാച്ചുറൽഹെയ്റ്റ് ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് html-ൽ നേരിട്ട് ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും സജ്ജമാക്കാൻ കഴിയും.
• ഡാറ്റ-പൊസിഷൻ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ചിത്രങ്ങൾ നീക്കാൻ കഴിയും. ഇത് css-ലെ പശ്ചാത്തല-സ്ഥാനത്തിന് സമാനമാണ്.

മുകളിൽ ലിസ്റ്റ് ചെയ്തിരിക്കുന്ന ഔദ്യോഗിക പ്രോജക്റ്റ് പേജിൽ നിങ്ങൾക്ക് മറ്റ് ഓപ്ഷനുകൾ കണ്ടെത്താം.

ചലനത്തിൽ, പാരലാക്സ് അർത്ഥമാക്കുന്നത്, സ്ഥലത്തുള്ള ഒരു നിരീക്ഷകനുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ചില പശ്ചാത്തലത്തിൽ ഒരു വസ്തുവിൻ്റെ സ്ഥാനത്തുണ്ടാകുന്ന മാറ്റമാണ്. ഈ പദം ഇൻ്റർനെറ്റിൽ ജനപ്രീതി നേടിയിട്ടുണ്ട്. പ്രത്യേകിച്ചും, അതിൻ്റെ രൂപകൽപ്പനയിൽ ചലനാത്മക ഘടകങ്ങളുള്ള ഒരു വെബ്സൈറ്റ് രസകരമായി തോന്നുന്നു. ഇൻ്റർനെറ്റിൽ ഒരു പേജ് രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ഒരു മാർഗമാണ് പാരലാക്സ്, ധാരാളം സന്ദർശകരെ ആകർഷിക്കാൻ വെബ്‌മാസ്റ്റർമാർ ഉപയോഗിക്കുന്നു.

പാരലാക്സ് എങ്ങനെയുള്ളതാണ്?

പാരലാക്സ് സ്ക്രോളിംഗ് ലംബമായും നേർരേഖയിലും ഉപയോഗിക്കാം. ഏറ്റവും നല്ല ഉദാഹരണം Nintendo ആണ്. നമ്മളിൽ പലരും ഗൃഹാതുരത്വത്തോടെ ഓർക്കുന്നു കമ്പ്യൂട്ടർ ഗെയിമുകൾ, സ്ക്രീനിൻ്റെ ഇടതുവശത്ത് നിന്ന് വലത്തോട്ട് പ്രധാന കഥാപാത്രങ്ങളുടെ ചലനം പ്രതിനിധീകരിക്കുന്നു. ലംബമായ നേർരേഖയിലൂടെ താഴേക്ക് നീങ്ങാനും സാധിക്കും. പലപ്പോഴും വെബിൽ ഉപയോഗിക്കുന്നു. ഒരു ലംബ സ്ലൈഡർ സൃഷ്ടിക്കാൻ, നിങ്ങൾക്ക് JavaScript അല്ലെങ്കിൽ CSS 3 ഉപയോഗിക്കാം.

വിവരിച്ചിരിക്കുന്ന ത്രിമാന സ്പേഷ്യൽ ഇഫക്റ്റാണ് ഇവയുടെ സവിശേഷത. ഗെയിം സ്രഷ്‌ടാക്കൾ നിരവധി പശ്ചാത്തല പാളികൾ ഉപയോഗിച്ചു. അവ ഘടനയിൽ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു, ചലനം വ്യത്യസ്ത വേഗതയിൽ സംഭവിക്കുന്നു.

പാരലാക്സ് ഒരു 3D ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നത് മാത്രമാണെന്ന് കരുതരുത്. നിങ്ങൾക്ക് പേജിൽ നിലവിലുള്ള ഐക്കണുകൾ നീക്കാൻ കഴിയും. മാത്രമല്ല, ഇത് തികച്ചും ആകർഷകമായി കാണപ്പെടുന്നു. അവയിൽ ഓരോന്നിനും ഒരു വ്യക്തിഗത പാത ഉപയോഗിക്കുക എന്നതാണ് ഒരു നല്ല ഓപ്ഷൻ. ഈ സാഹചര്യത്തിൽ, വ്യത്യസ്ത ഐക്കണുകൾ ഉപയോഗിക്കുന്നു, വ്യത്യസ്ത പാതകളിലൂടെ നീങ്ങുന്നു. ഈ ഡിസൈൻ ശ്രദ്ധ ആകർഷിക്കുന്നു.

ചിത്രം ജീവൻ പ്രാപിക്കുന്നു

ചിത്രങ്ങളില്ലാത്ത ഒരു സൈറ്റ് കണ്ടെത്തുക പ്രയാസമാണ്. ഉയർന്ന നിലവാരമുള്ളതും പ്രകടനാത്മകവുമായ ഡ്രോയിംഗുകൾ സന്ദർശകരെ ആകർഷിക്കുന്നു. പക്ഷേ ഏറ്റവും വലിയ ശ്രദ്ധവിവിധ തരത്തിലുള്ള ചലനാത്മക ചിത്രങ്ങൾ ഉണ്ടാക്കുന്നു. തീർച്ചയായും, ഒരു സൈറ്റ് സന്ദർശിക്കുമ്പോൾ ചലനമുണ്ടെങ്കിൽ, അത് ശ്രദ്ധ ആകർഷിക്കുന്നു. ഒരു റിസോഴ്സ് സന്ദർശകൻ ഡൈനാമിക് ഇമേജിലേക്ക് മടങ്ങാനുള്ള സാധ്യത ഗണ്യമായി വർദ്ധിക്കുന്നു. ചലിക്കുന്നതോ ഇല്ലയോ എന്ന് തോന്നിയോ? അതിനാൽ, സൈറ്റിലേക്ക് സന്ദർശകരെ ആകർഷിക്കാൻ, പാരലാക്സ് ഇഫക്റ്റ് പോലുള്ള ഒരു ആശയം പഠിക്കുന്നത് മൂല്യവത്താണ്.

ചലിക്കുന്ന ചിത്രങ്ങളുള്ള സൈറ്റുകളുടെ ഉദാഹരണങ്ങൾ:

• hvorostovsky.com;
• www.kagisointeractive.com.

ഉദാഹരണങ്ങളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ഉപ-ഇനങ്ങളിലേക്ക് ഡ്രോപ്പ് ചെയ്യുന്ന ഒരു മെനു വഴി ധാരണ മെച്ചപ്പെടുത്തുന്നു. ഈ ഘടകം സന്ദർശകർക്ക് സമയം ലാഭിക്കുന്നു, അതിനാൽ അവർക്ക് ആകർഷകമാണ്.

jQuery ലൈബ്രറി

jQueryParallax എന്ന പദം അതേ പേരിലുള്ള ലൈബ്രറിയെ നിർവചിക്കുന്നു. ഇതിന് നന്ദി, 3D ഫോർമാറ്റിൽ ചലനത്തിൻ്റെ പ്രഭാവം നേടാൻ എളുപ്പമാണ്. IN jQuery ലൈബ്രറിത്രിമാന ധാരണ സൃഷ്ടിക്കപ്പെടുന്നു പലവിധത്തിൽ. വ്യത്യസ്ത വേഗതയിൽ ഒരേ സമയം പശ്ചാത്തല വസ്തുക്കളെ തിരശ്ചീനമായി നീക്കുക എന്നതാണ് അതിലൊന്ന്. വിവിധ തരത്തിലുള്ള സ്വത്തുക്കളുടെ ഒരു വലിയ സംഖ്യയുടെ സാന്നിധ്യമാണ് ഈ ലൈബ്രറിയുടെ സവിശേഷത. ഇവിടെ വിവരിച്ചിരിക്കുന്ന സ്ഥാനചലനം മാത്രമാണ് ഒരു ചെറിയ ഭാഗംഅതിൻ്റെ കഴിവുകൾ.

സൈറ്റ് വളരെ ആകർഷകമായി കാണപ്പെടുന്നു, അതിൻ്റെ നിർമ്മാണത്തിനായി വിവിധ ആധുനിക ഘടകങ്ങൾ ഉപയോഗിച്ചു. അതിലൊന്നാണ് പാരലാക്സ്. ഉദാഹരണ സൈറ്റുകൾ ഇതുപോലെയായിരിക്കാം:

• www.grabandgo.pt;
• www.fishy.com.br;
• www.noleath.com;
• buysellwebsite.com.

മൗസ് ചലനത്തിനൊപ്പം ചലിക്കുന്ന പാളികളാണ് jParallax പ്രതിനിധീകരിക്കുന്നത്. ഡൈനാമിക് മൂലകങ്ങൾ കേവലം;). അവ ഓരോന്നും സ്വഭാവ സവിശേഷതകളാണ് സ്വന്തം വലിപ്പംവ്യക്തിഗത വേഗതയിൽ ചലനവും. ഇത് വാചകമോ ചിത്രമോ ആകാം (വിഭവ സ്രഷ്ടാക്കളുടെ അഭ്യർത്ഥന പ്രകാരം).

സൈറ്റ് സന്ദർശകരുടെ ധാരണ

ഇതിനുശേഷം, പേജ് കാര്യക്ഷമമായും സൗകര്യപ്രദമായും കാര്യക്ഷമമായും രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു എന്ന വസ്തുത ഒരു വ്യക്തി സാധാരണയായി ശ്രദ്ധിക്കുന്നു. ഈ വസ്തുത സാധാരണയായി ബഹുമാനം കൽപ്പിക്കുന്നു. ചിലപ്പോൾ മറ്റ് ഘടകങ്ങൾ പരീക്ഷിക്കാൻ ജിജ്ഞാസ ഉയർന്നുവരുന്നു. ഇൻ്റർനെറ്റിൽ സമാനമായ നിരവധി സൈറ്റുകൾ ഉണ്ട്. നിങ്ങളുടെ ഉറവിടം എങ്ങനെ പ്രത്യേകമാക്കാം?

നിങ്ങൾക്ക് ഡിസൈൻ ഇഷ്ടമാണെങ്കിൽ, സന്ദർശകൻ കൂടുതൽ കാലം താമസിക്കും. അങ്ങനെ, പോസ്റ്റ് ചെയ്ത വിവരങ്ങളാൽ അവൻ ആകർഷിക്കപ്പെടാനുള്ള സാധ്യത വർദ്ധിക്കുകയും അവൻ താൽപ്പര്യം കാണിക്കുകയും ചെയ്യും. തൽഫലമായി, ഓഫർ ചെയ്യുന്ന സേവനമോ ഉൽപ്പന്നമോ പ്രമോഷണൽ ഓഫറോ വ്യക്തി പ്രയോജനപ്പെടുത്തും.

പ്രിയപ്പെട്ട പഴയ ഗെയിമുകൾ

"പാരലാക്സ്" എന്ന ആശയം 80 കളിലെയും 90 കളിലെയും കൺസോളുകളുടെ എല്ലാ ആരാധകർക്കും പരിചിതമായിരിക്കണം. ഗെയിമുകൾക്ക് ഇത് ബാധകമാണ്:

മരിയോ ബ്രോസ്.

മോർട്ടൽ കോംബാറ്റ്.

രോഷത്തിൻ്റെ തെരുവുകൾ.

മൂൺ പട്രോൾ.

ടൈമിലെ കടലാമകൾ.

അതായത്, പാരലാക്സ് എന്നത് വളരെക്കാലമായി ഉപയോഗിക്കുന്ന ഒരു സാങ്കേതികതയാണ്. ഈ ഗെയിമുകൾ തീർച്ചയായും ചില ഗൃഹാതുരതയോടെ ഓർക്കുന്നു. എല്ലാത്തിനുമുപരി, അവർ ആ കാലഘട്ടത്തിൻ്റെ സ്വഭാവത്തിൽ മുഴുകിയിരിക്കുന്നതായി തോന്നുന്നു.

പാരലാക്സ് സ്ക്രോളിംഗ് എന്ന സാങ്കേതിക വിദ്യ ഉപയോഗിച്ചാണ് സ്ക്രീനിലെ ചിത്രങ്ങൾ സൃഷ്ടിക്കുന്നത്. ഈ സാങ്കേതികത അർഹമായ ജനപ്രീതി നേടിയതിൽ അതിശയിക്കാനില്ല. 80-90 കളിൽ കളിച്ചവരോ സുഹൃത്തുക്കളുടെ ഒഴിവുസമയങ്ങൾ കണ്ടവരോ ഈ ഡിസൈൻ ആശയം വളരെ ഊഷ്മളമായി മനസ്സിലാക്കുന്നു.

പാരലാക്സ് സ്ക്രോളിംഗ്

ലോകത്തിലെ പ്രമുഖ ബ്രാൻഡുകളുടെ വിപണനക്കാർ വളരെക്കാലമായി വിവിധ തരം ഉപയോഗിക്കുന്നു സാങ്കേതിക മുന്നേറ്റങ്ങൾ. അങ്ങനെ, ഒരു കാഷ്വൽ സൈറ്റ് സന്ദർശകനെപ്പോലും താൽപ്പര്യപ്പെടുത്തുന്നത് സാധ്യമാകും.

പാരലാക്സ് സ്ക്രോളിംഗ് നൈക്ക് വിജയകരമായി ഉപയോഗിച്ചു. കമ്പനിയുടെ യഥാർത്ഥ വെബ്സൈറ്റ് വികസിപ്പിച്ചെടുത്തത് ഡിസൈനർമാരായ വെയ്ഡനും കെന്നഡിയുമാണ്. എന്നാൽ ഈ ഡിസൈൻ സംരക്ഷിക്കപ്പെട്ടില്ല. ആധുനിക പ്രവണതകൾക്കനുസൃതമായി റിസോഴ്സ് ക്രമേണ അപ്ഡേറ്റ് ചെയ്തു. Activatedrinks.com ഒരു സൈറ്റിൻ്റെ ഒരു ഉദാഹരണമാണ്, ഈ കാലഘട്ടത്തിൽ നൈക്ക് വിപണനക്കാർ ഉപയോഗിച്ച രൂപകൽപ്പനയെ അനുസ്മരിപ്പിക്കുന്നതാണ്.

വളരെയധികം ചലനാത്മകത ഉണ്ടാകരുത്

സൈറ്റിൻ്റെ രൂപകൽപ്പന പലപ്പോഴും ആണെന്ന് മറക്കരുത് പ്രധാന മാനദണ്ഡം, ഇത് സന്ദർശകനെ നയിക്കുന്നു. മോശമായി നിർവ്വഹിക്കപ്പെട്ട ഒരു ഉറവിടം സാധാരണയായി ഉടമ കമ്പനി ഗൗരവമുള്ളതല്ലെന്ന ധാരണ ഉപയോക്താവിൽ ഉണ്ടാക്കുന്നു. എന്നാൽ വിവിധ തരത്തിലുള്ള ആകർഷകമായ ഡിസൈൻ ഘടകങ്ങളുള്ള ഒരു വെബ്സൈറ്റ്, സന്ദർശകർക്ക് താൽപ്പര്യമുള്ള സ്ഥാപന ഉടമകളുടെ ആഗ്രഹത്തെ സൂചിപ്പിക്കുന്നു.

ഇവിടെ പാരലാക്സിനെക്കുറിച്ച് ഓർമ്മിക്കുന്നത് മൂല്യവത്താണ്. ഇതൊരു അത്ഭുതകരമായ ഉപകരണമാണ്. എന്നാൽ അവ പോലും അമിതമായി കൊണ്ടുപോകാൻ പാടില്ല. കാരണം ഉള്ള പേജ് വലിയ സംഖ്യവിവിധ തരത്തിലുള്ള ചലിക്കുന്ന ഘടകങ്ങൾ, മനസ്സിലാക്കാൻ വളരെ ബുദ്ധിമുട്ടാണ്. ഡിസൈൻ മിതമായ സ്റ്റൈലിഷും മനസ്സിലാക്കാവുന്നതുമാക്കി മാറ്റുന്നതാണ് നല്ലത്.

ചലനാത്മകമായിരിക്കണം വ്യക്തിഗത ഘടകങ്ങൾഅതിന് ഒറ്റപ്പെടൽ ആവശ്യമാണ്. ഒന്നിലേക്ക് ആപേക്ഷികമായി ചലിക്കുന്ന പാളികൾ ഉപയോഗിച്ച് സൃഷ്ടിച്ച ഒരു ഡ്രോയിംഗും ഉണ്ടാകാം. ഒരു ഇഷ്‌ടാനുസൃത വെബ്‌സൈറ്റ് പ്രധാനമായും സന്ദർശകർക്കായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നുവെന്ന കാര്യം മറക്കരുത്. തൻ്റെ അറിവ് മുഴുവൻ നിക്ഷേപിച്ച ഒരു വെബ്മാസ്റ്ററുടെ മാസ്റ്റർപീസ് ആയിരിക്കരുത് അത്. എല്ലാത്തിനുമുപരി, അത്തരമൊരു സമീപനം ധാരണ സങ്കീർണ്ണമാക്കും.

സൈറ്റിൽ ഒരു ചലനം എങ്ങനെ സൃഷ്ടിക്കാം

എങ്ങനെ പാരലാക്സ് ഉണ്ടാക്കാം? ഈ ചോദ്യം പല വെബ്‌സൈറ്റ് സ്രഷ്‌ടാക്കൾക്കും താൽപ്പര്യമുണ്ട്. ടാഗുകൾ എഴുതുന്നതിൻ്റെ സങ്കീർണതകൾ അറിയേണ്ടതില്ല. ഉപയോഗിക്കാൻ വളരെ സൗകര്യപ്രദമാണ് പ്രത്യേക വിഭവങ്ങൾഇന്റർനെറ്റിൽ. നിന്ന് വലിയ സംഖ്യലഭ്യമായ നിർദ്ദേശങ്ങളിൽ ഇനിപ്പറയുന്ന സഹായികൾ ഉൾപ്പെടുന്നു:

ഉപയോഗിക്കാൻ വളരെ എളുപ്പമുള്ള ഒരു പ്രോഗ്രാമാണ് പ്ലാക്സ്. ഇത് മൗസ് ചലിപ്പിച്ചുകൊണ്ട് പേജ് ചലനം നൽകുന്നു.

jQuery പാരലാക്സ് ഇമേജ് സ്ലൈഡർ - jQuery പ്ലഗിൻഇമേജ് സ്ലൈഡറുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്നു.

Jquery Image Parallax - അലങ്കാരത്തിന് അനുയോജ്യമാണ് സുതാര്യമായ ഡ്രോയിംഗുകൾ. അദ്ദേഹത്തിൻ്റെ PNG ഉപയോഗത്തിലൂടെ, ചലനത്തിലൂടെ ജീവസുറ്റതാക്കുമ്പോൾ GIF-കൾ ആഴം നേടുന്നു.

സ്ഥിരമായ പാനലുകളുള്ള ഒരു പേജ് സൃഷ്ടിക്കാൻ Curtain.js ഉപയോഗിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, മൂടുശീലകൾ തുറക്കുന്നതിൻ്റെ ഫലം നിരീക്ഷിക്കപ്പെടുന്നു.

സ്ക്രോളിംഗ് പാരലാക്സ്: ഒരു jQuery പ്ലഗിൻ മൗസ് വീൽ സ്ക്രോൾ ചെയ്യുമ്പോൾ ഒരു പാരലാക്സ് ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നതാണ്.

കൂടുതൽ ഉപയോഗപ്രദമായ പ്ലഗിനുകൾ

നിങ്ങൾക്കറിയാവുന്നതുപോലെ, വിവരങ്ങൾക്ക് ഏറ്റവും വലിയ മൂല്യമുണ്ട്. പിന്നെ എന്ത് കൂടുതൽനിങ്ങൾ ആഗ്രഹിക്കുന്നത് നേടാനുള്ള വഴികൾ അറിയപ്പെടുന്നു, ശരിയായ ഫലം ലഭിക്കാനുള്ള സാധ്യത അടുത്ത്. ഡൈനാമിക്സ് സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന ഉപയോഗപ്രദമായ പ്ലഗിനുകൾ:

jQuery സ്ക്രോൾ പാത്ത് - ഒരു നിർദ്ദിഷ്ട പാതയിൽ വസ്തുക്കൾ സ്ഥാപിക്കാൻ ഉപയോഗിക്കുന്നു.

Scrollorama ഒരു jQuery പ്ലഗിൻ ആണ്. എന്നതിനുള്ള ഉപകരണമായി ഇത് ഉപയോഗിക്കുന്നു ആകർഷകമായ ഡിസൈൻമെറ്റീരിയൽ. സൗകര്യപ്രദമായ സ്ക്രോളിംഗിന് നന്ദി, പേജിലെ വാചകം "പുനരുജ്ജീവിപ്പിക്കാൻ" ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

സ്ക്രോൾഡെക്ക് ഒരു jQuery പ്ലഗിൻ ആണ്. ഒരു പേജായി രൂപകൽപ്പന ചെയ്‌ത വെബ്‌സൈറ്റുകൾക്കുള്ള അവതരണമായി ഉപയോഗിക്കുന്ന മികച്ച പരിഹാരമാണിത്.

jParallax എന്നത് മൗസ് പോയിൻ്ററിൻ്റെ ചലനത്തെ ആശ്രയിച്ച് ലെയറുകളുടെ ചലനത്തെ പ്രതിനിധീകരിക്കുന്നു.

Stellar.js എന്നത് ഒരു പാരലാക്സ് സ്ക്രോളിംഗ് ഇഫക്റ്റ് ചേർത്ത് ഏത് ഘടകവും രൂപകൽപ്പന ചെയ്തിട്ടുള്ള ഒരു പ്ലഗിൻ ആണ്.

കഴ്‌സർ സ്‌നാപ്പിംഗിനൊപ്പം പാരലാക്സ്

ഈ പാരലാക്സ് വളരെ ആകർഷകമായി തോന്നുന്നു. ഒറ്റനോട്ടത്തിൽ ചലനമില്ലെന്ന് തോന്നുന്ന ഒരു സൈറ്റ് പേജിലെ ഒബ്‌ജക്‌റ്റുകൾ അടുത്തുവരുമ്പോൾ അത് ചലിക്കുന്നതായി തോന്നുന്നു, അത് ചലിക്കുന്ന ഘടകത്തെ പിന്തുടരുന്നു.

ആദ്യം നിങ്ങൾ ഡ്രോയിംഗിൽ നിർത്തണം. ആവശ്യമായ ചിത്രം ഒരു ഫ്രെയിമിൽ സ്ഥാപിച്ചിരിക്കുന്നു, അതിൻ്റെ അറ്റങ്ങൾ മറയ്ക്കണം. രീതി വളരെ ലളിതമാണ്, തത്ഫലമായുണ്ടാകുന്ന ഡ്രോയിംഗ് വളരെ ആകർഷകമാണ്.

ഒരു വെബ്സൈറ്റിനുള്ള പാരലാക്സ് ഇഫക്റ്റ് ഒരു അത്ഭുതകരമായ ഡിസൈൻ രീതിയാണ്. അതിൻ്റെ ഉപയോഗം സൂചിപ്പിക്കുന്നത് വിഭവം സൃഷ്ടിക്കുന്നതിന് ആവശ്യമായ ശ്രദ്ധ നൽകിയിരുന്നു എന്നാണ്. അതിനാൽ, ഓഫർ ചെയ്യുന്ന സേവനങ്ങൾ അല്ലെങ്കിൽ വായിക്കാനുള്ള വിവരങ്ങൾ ശ്രദ്ധിക്കുന്നത് മൂല്യവത്താണ്. സമാനമായതും എന്നാൽ ലളിതമായി രൂപകൽപ്പന ചെയ്തതുമായ വിഭവങ്ങളുടെ പശ്ചാത്തലത്തിൽ അത്തരം സൈറ്റുകൾ കൂടുതൽ പ്രയോജനപ്രദമായി കാണപ്പെടുന്നു.

, ടൈമിലെ കടലാമകൾഅല്ലെങ്കിൽ യഥാർത്ഥ ഗെയിം മൂൺ പട്രോൾ. ഈ ഗെയിമുകളിൽ, പാരലാക്സ് ടെക്നിക് നിരവധി സമയത്ത് നിരീക്ഷിക്കപ്പെടുന്നു പശ്ചാത്തല പാളികൾവ്യത്യസ്ത ടെക്സ്ചറുകൾ ഉപയോഗിച്ച് വ്യത്യസ്ത വേഗതയിൽ നീങ്ങുന്നു, ഇത് ത്രിമാന സ്ഥലത്തിൻ്റെ പ്രഭാവം സൃഷ്ടിക്കുന്നു.

വെബ് വികസനത്തെക്കുറിച്ചുള്ള ഒരു ലേഖനത്തിൽ ഞാൻ റെട്രോ ഗെയിമുകളെക്കുറിച്ച് സംസാരിക്കാൻ തുടങ്ങിയത് എന്തുകൊണ്ട്? ഏറ്റവും ലളിതമായ ഉത്തരം "കാരണം അവർ ശാന്തരാണ്" എന്നായിരിക്കാം, പക്ഷേ ഇല്ല. പാരലാക്സ് സ്ക്രോളിംഗ് എന്നത് വെബ് ഡിസൈനിൻ്റെ ലോകത്തേക്ക് കടന്നുവരുന്ന ഒരു രസകരമായ ഡിസൈൻ ആശയമാണ്. ഈ സാങ്കേതികവിദ്യ ആദ്യമായി ഉപയോഗിച്ചവരിൽ ഒരാളാണ് നൈക്ക് വലിയ വിജയം, അവർ തങ്ങളുടെ യഥാർത്ഥ നൈക്ക് ബെറ്റർ വേൾഡ് വെബ്‌സൈറ്റ് വികസിപ്പിക്കുന്നതിന് മാർക്കറ്റിംഗ് ഭീമൻമാരായ വെയ്ഡനെയും കെന്നഡിയെയും നിയമിച്ചപ്പോൾ. നൈക്ക് ബെറ്റർ വേൾഡ് സൈറ്റ് പിന്നീട് അപ്‌ഡേറ്റ് ചെയ്യുകയും പുതിയൊരെണ്ണം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുകയും ചെയ്‌തു, എന്നാൽ നൈക്കിൻ്റെ ആദ്യത്തെ പാരലാക്സ് ഡിസൈൻ എങ്ങനെയുണ്ടെന്ന് സമാനമായ മറ്റൊരു സൈറ്റ് ഉണ്ട് - സ്‌പോർട്‌സ് ഡ്രിങ്ക് സൈറ്റ് ആക്റ്റിവേറ്റ്.

നിങ്ങൾ സൈറ്റിൻ്റെ ഒരു പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, പലതും നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം വിവിധ ഘടകങ്ങൾ, ഈ പേജിൽ സ്ഥിതിചെയ്യുന്നു, വ്യത്യസ്ത വേഗതയിൽ നീങ്ങുക. മുകളിലെ ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന പേജ് ഉദാഹരണമായി എടുക്കാം. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, പശ്ചാത്തലത്തിലുള്ള നീല ഡോട്ടുകൾ (അൽപ്പം മങ്ങിയവ) സ്ക്രോൾബാറിൻ്റെ അതേ വേഗതയിൽ നീങ്ങുന്നത് നിങ്ങൾ കാണും. കൂടാതെ, കൂടുതൽ ഫോക്കസ് ചെയ്തതും മുൻവശത്തുള്ളതുമായ ഒരു കൂട്ടം നീല ഡോട്ടുകൾ ചെറുതായി നീങ്ങുന്നത് നിങ്ങൾ കാണും. ഉയർന്ന വേഗതസ്ക്രോൾബാറിനേക്കാൾ. വാചകം “0 SUGAR | 0 കലോറി | സ്വാഭാവികമായും മധുരമുള്ളത്", പ്രധാന പേജ് തലക്കെട്ട് "ഉൽപ്പന്നങ്ങൾ". അവസാനമായി, ഉൽപ്പന്നത്തിൻ്റെ തന്നെ ചിത്രങ്ങളുണ്ട്, പശ്ചാത്തലത്തിൽ ചെറുതും ഔട്ട് ഓഫ് ഫോക്കസും, വലുതും ഫോക്കസ് ചെയ്തതും മുൻവശത്തും. പശ്ചാത്തല ഉൽപ്പന്ന ചിത്രങ്ങൾ ടെക്‌സ്‌റ്റിൻ്റെ അതേ വേഗതയിൽ നീങ്ങുന്നു, അതേസമയം ഫോർഗ്രൗണ്ട് ഉൽപ്പന്ന ചിത്രങ്ങൾ വാചകത്തേക്കാൾ വേഗത്തിൽ നീങ്ങുന്നു. ഇത് പാരലാക്സ് സ്ക്രോളിംഗിൻ്റെ ഒരു മികച്ച പ്രകടനമാണ്, അവിടെ ചിത്രങ്ങളുടെ വ്യത്യസ്ത പാളികൾ പരസ്പരം പാളികളാക്കി, നിങ്ങൾ പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ എല്ലാം വ്യത്യസ്ത വേഗതയിൽ നീങ്ങുന്നു, ഇത് ഒരു ത്രിമാന പ്രഭാവം സൃഷ്ടിക്കുന്നു.

പാരലാക്സ് സ്ക്രോളിംഗ് ലംബമായ പേജ് സ്ക്രോളിംഗിലോ നേർരേഖ സ്ക്രോളിംഗിലോ പരിമിതപ്പെടുത്തിയിട്ടില്ല. ഈ ക്ലെയിം ബാക്കപ്പ് ചെയ്യുന്നതിനുള്ള മികച്ച ഉദാഹരണം നിങ്ങളെ കാണിക്കാൻ ഞങ്ങൾ അത് നിൻ്റെൻഡോയ്ക്ക് നൽകും. മുകളിലെ ആക്റ്റിവേറ്റ് സൈറ്റിൽ നമ്മൾ കണ്ടതുപോലെ, ഞങ്ങളുടെ ഹീറോകൾ സാധാരണയായി സ്‌ക്രീനിലൂടെ ഇടത്തുനിന്ന് വലത്തോട്ട് തിരശ്ചീനമായി താഴേയ്‌ക്ക് നീങ്ങുന്ന ആദ്യ Nintendo ഗെയിമുകളിലേക്ക് തിരിഞ്ഞുനോക്കൂ. MarkioKart Wii-യിൽ ഒരു സവാരി നടത്തൂ, അവിടെ നമുക്ക് കാണാൻ കഴിയുന്ന ചില രസകരമായ കാര്യങ്ങളെക്കുറിച്ച് സംസാരിക്കാം.

നിങ്ങൾ ആദ്യം ശ്രദ്ധിക്കുന്നത് പേജിൻ്റെ സ്ക്രോളിംഗ് ദിശയാണ് - ഇത് ലംബമല്ല, മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, തുടക്കത്തിൽ തിരശ്ചീനമാണ്. തീർച്ചയായും, ഇത് രസകരമാണ്, പക്ഷേ ഇത് ഒരു പുതിയ ആശയമല്ല. പശ്ചാത്തലത്തിൽ യോഷി ദിനോസറും ഷെല്ലുകളും, മുൻവശത്ത് മരിയോയും ലൂയിഗിയും, നിങ്ങൾ സ്ക്രോൾ ചെയ്യുമ്പോൾ പ്രധാന ഉള്ളടക്കം വ്യത്യസ്ത വേഗതയിൽ നീങ്ങുന്ന ഒരു പാരലാക്സ് ഇഫക്റ്റും നിങ്ങൾ ശ്രദ്ധിക്കും. എന്നാൽ നിങ്ങൾ #ഹൈലൈറ്റുകളിലേക്കും #ആക്രമണ പേജുകളിലേക്കും എത്തിക്കഴിഞ്ഞാൽ, സ്ഥാനചലന പാത ഇനി പൂർണ്ണമായി തിരശ്ചീനമായിരിക്കില്ല. #rediscover, #snes പേജുകൾക്കിടയിലുള്ള പരിവർത്തനത്തിനും ഇത് ബാധകമാണ്. ചിത്രങ്ങൾ നിലനിർത്തുക മാത്രമല്ല വ്യത്യസ്ത വേഗതസ്ഥാനചലനങ്ങൾ, മാത്രമല്ല പൊതു ദിശ തിരശ്ചീനമായി നിന്ന് ലംബമായി മാറ്റുകയും ചെയ്യുന്നു.

നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ പാരലാക്സ് ഇഫക്റ്റ് ഉപയോഗിക്കുന്നത് ഒരു കൃത്രിമ 3D ഇഫക്റ്റ് സൃഷ്‌ടിക്കുന്നതിന് മാത്രമായി പരിമിതപ്പെടുത്തരുത് എന്നതും ശ്രദ്ധിക്കേണ്ടതാണ്. ജർമ്മൻ വെബ് ഡിസൈൻ സ്റ്റുഡിയോയായ Webseitenfactory യുടെ സൈറ്റ് ഒരു സൈറ്റ് പേജിലേക്ക് വിവിധ ഇഫക്റ്റുകൾ ചേർക്കുന്നതിന് പാരലാക്സ് എങ്ങനെ ഉപയോഗിക്കാം എന്നതിൻ്റെ ഒരു ഉദാഹരണമാണ്, ഉദാഹരണത്തിന്, ഐക്കണുകൾ വ്യത്യസ്ത പാതകളിലൂടെ നീങ്ങുന്നു, സൈറ്റ് സ്ക്രോൾ ചെയ്യുമ്പോൾ വർദ്ധിക്കുകയും കുറയുകയും ചെയ്യുന്നു.

അധികം ഉള്ളടക്കമില്ലാത്ത ഒരു സൈറ്റിനെ സജീവമാക്കാനും പാരലാക്സ് സ്ക്രോളിംഗ് സഹായിക്കും. നിങ്ങളുടെ മുഴുവൻ സൈറ്റും ഒരു മിഷൻ സ്റ്റേറ്റ്‌മെൻ്റോ അല്ലെങ്കിൽ ഞങ്ങളെക്കുറിച്ചുള്ള ഒരു വിഭാഗമോ ഉൾക്കൊള്ളുന്നുവെങ്കിൽ എന്തുചെയ്യും ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ? മിക്കവാറും, നിങ്ങൾക്കത് ഒരു പേജ് ആക്കാം, ചില വ്യവസ്ഥകൾക്കനുസരിച്ച് നിങ്ങൾക്ക് ഒരു നല്ല ഒരു പേജ് സൈറ്റ് ഉണ്ടായിരിക്കും, എന്നാൽ ഇത് സന്ദർശകർ ഓർമ്മിക്കുമോ? മിക്കവാറും അല്ല. പക്ഷേ, വസന്തകാലത്ത്/വേനൽക്കാലത്ത് ആളുകൾ ചെയ്‌തതുപോലെ നിങ്ങൾ ഇതിലേക്ക് ഒരു ചെറിയ പാരലാക്സ് ചേർത്താലോ?

എൻ്റെ ആദ്യ മതിപ്പ് "ഓ, ഈ സൈറ്റ് മനോഹരമായി കാണപ്പെടുന്നു" എന്നതായിരുന്നു. എന്നാൽ ഞാൻ സ്ക്രോൾ ചെയ്യാൻ തുടങ്ങിയപ്പോൾ, "കൊള്ളാം, ഈ സൈറ്റ് രസകരമാണ്!" എന്ന ധാരണ ഉടനടിയായി. കൂട്ടിച്ചേർക്കൽ ലളിതമായ പാരലാക്സ് പ്രഭാവംഇത് നല്ലതും അവിസ്മരണീയവും തമ്മിലുള്ള വ്യത്യാസം ഉണ്ടാക്കുന്നു.

പാരലാക്സ് സ്ക്രോളിംഗ് നിങ്ങളുടെ സ്ലീവ് നിലനിർത്താനുള്ള നല്ലൊരു ട്രിക്കാണ്. നിങ്ങൾ ഒരു സങ്കീർണ്ണമായ മൾട്ടി-പേജ് വെബ്‌സൈറ്റ് നിർമ്മിക്കുകയാണോ അതോ ലളിതമായ ഒരു പേജ് ബിസിനസ് കാർഡ് വെബ്‌സൈറ്റ് നിർമ്മിക്കുകയാണോ എന്നത് പരിഗണിക്കാതെ തന്നെ ഇത് എല്ലായ്പ്പോഴും പ്രയോഗിക്കാവുന്നതാണ്.

പാരലാക്സ് ഉള്ള സൈറ്റുകളുടെ ഉദാഹരണങ്ങൾ അവയിൽ ചിലത് വളരെ രസകരമാണ്, അവ പരിശോധിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു:

നിങ്ങൾക്കറിയാവുന്നതുപോലെ, പാരലാക്സ് ആണ് വിഷ്വൽ ഇഫക്റ്റ്, വസ്തുക്കളെ വ്യത്യസ്ത സ്ഥാനങ്ങളിൽ നിന്ന് കാണുമ്പോൾ അവയുടെ സ്ഥാനങ്ങൾ വ്യത്യസ്തമായി കാണപ്പെടുന്നു. പാരലാക്സ് സ്ക്രോളിംഗ് കാഴ്ചയുടെ രേഖയിലുള്ളതും എന്നാൽ പരസ്പരം അകലെയുള്ളതുമായ രണ്ട് വസ്തുക്കൾ വ്യത്യസ്ത വേഗതയിൽ നീങ്ങുന്നു എന്ന മിഥ്യാധാരണ സൃഷ്ടിക്കുന്നു. നമ്മൾ ചലനത്തിലായിരിക്കുമ്പോൾ എല്ലായിടത്തും ഈ പ്രഭാവം കാണുന്നു: ഞങ്ങൾ തെരുവിലൂടെ നടക്കുമ്പോൾ, ഞങ്ങൾ വാഹനമോടിക്കുമ്പോൾ, സമീപത്തുള്ള എല്ലാ കാര്യങ്ങളും വളരെ വേഗത്തിൽ നീങ്ങുന്നത് കാണാം, റോഡിന് സമീപമുള്ള മരങ്ങളും കുറ്റിക്കാടുകളും വളരെ വേഗത്തിൽ കടന്നുപോകുന്നു . വേഗത്തിൽ, എന്നാൽ പർവതങ്ങൾ പോലെയുള്ള പശ്ചാത്തലത്തിലുള്ള പ്രകൃതിദൃശ്യങ്ങൾ വളരെ സാവധാനത്തിൽ നീങ്ങുന്നു. ഈ ഫലത്തെ മോഷൻ പാരലാക്സ് എന്ന് വിളിക്കുന്നു.

ഈ ഇഫക്റ്റ് വെബ് പേജുകളിൽ പ്രയോഗിക്കാൻ കഴിയും: പശ്ചാത്തല ചിത്രങ്ങളും ചില ആന്തരിക ഉള്ളടക്കങ്ങളും അടങ്ങിയിരിക്കുന്ന ബ്ലോക്കുകളിൽ നമുക്ക് പാരലാക്സ് ഇഫക്റ്റ് ഉപയോഗിക്കാം. ഞങ്ങൾ പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യുന്നു, പക്ഷേ പശ്ചാത്തലം അതേപടി നിലനിൽക്കണം. ഈ പ്രഭാവം സൃഷ്ടിക്കാൻ CSS ഞങ്ങളെ സഹായിക്കും.

ഘട്ടം 1 - HTML വിഭാഗം 1 ലളിതമായ തലക്കെട്ട് 1

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റേറ്റർ അഡിപിസ്സിംഗ് എലിറ്റ്. Etiam tempus id nunc ut gravida. വെസ്റ്റിബുലം എസി...

വിഭാഗം 2 ലളിതമായ തലക്കെട്ട് 2

നാം ഇംപെര്ദിഎത് പൊസുഎരെ ബിബെന്ദം. അലിക്വം നെക് കൺസെക്റ്റേറ്റർ മെറ്റസ്. അലിക്വാം എഗെസ്റ്റാസ് എലിറ്റ്, മലെസുദ...

വിഭാഗം 3 ലളിതമായ തലക്കെട്ട് 3

Proin tempor urna Vitae tortor porttitor, ac malesuada elit lacinia. നുള്ള എസി ടെല്ലസ് നുള്ള. മറക്കരുത്...

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, HTML മാർക്ക്അപ്പ് സങ്കീർണ്ണമല്ല, അതിൽ 6 ഇതര വിഭാഗങ്ങൾ ഉൾപ്പെടുന്നു: അവയിൽ മൂന്നെണ്ണം പശ്ചാത്തല ചിത്രങ്ങൾ ഉൾക്കൊള്ളുന്നു (പാരലാക്സ് ക്ലാസുള്ള വിഭാഗങ്ങൾ), മൂന്നെണ്ണം വാചകം (ഉള്ളടക്ക ക്ലാസുള്ള വിഭാഗങ്ങൾ) ഉൾക്കൊള്ളുന്നു.

ഘട്ടം 2 - ചിത്രങ്ങൾ

എല്ലാ പശ്ചാത്തല ചിത്രങ്ങളും ഉണ്ട് നിശ്ചിത വലിപ്പം 1600 × 600 പിക്സലുകൾ. ഒട്ടുമിക്ക സ്‌ക്രീൻ റെസല്യൂഷനുകളിലും (റെസ്‌പോൺസീവ് ലേഔട്ട്) ചിത്രങ്ങൾ ഉപയോഗിക്കാൻ ഇത് ഞങ്ങളെ അനുവദിക്കും. ഞങ്ങളുടെ എല്ലാ പാരലാക്സ് ബ്ലോക്കുകൾക്കും ഒരേ നിശ്ചിത ഉയരമുണ്ട് (600px).

ഘട്ടം 3 - CSS

ഇപ്പോൾ നമുക്ക് ലഭ്യമായ എല്ലാ ഇടവും പൂരിപ്പിക്കുന്നതിന് ഇമേജുകൾ വികസിപ്പിക്കേണ്ടതുണ്ട്, ഇതിനായി ഞങ്ങൾ പശ്ചാത്തല-വലുപ്പം: കവർ എന്ന മൂല്യം സജ്ജമാക്കുകയും തുടർന്ന് ഞങ്ങൾ പശ്ചാത്തല-അറ്റാച്ച്മെൻ്റ് സജ്ജമാക്കുകയും ചെയ്യുന്നു: പശ്ചാത്തലം ശരിയാക്കാൻ നിശ്ചയിച്ചിരിക്കുന്നു.

കണ്ടെയ്നർ (പരമാവധി വീതി: 960px; മാർജിൻ: 0 ഓട്ടോ; ) വിഭാഗം.വിഭാഗം:അവസാന-കുട്ടി (മാർജിൻ-ബോട്ടം: 0; ) വിഭാഗം.വിഭാഗം h2 (മാർജിൻ-ബോട്ടം: 40px; ഫോണ്ട്-ഫാമിലി: "റോബോട്ടോ സ്ലാബ്", സെരിഫ് ; font-size: 30px; ) വിഭാഗം p (മാർജിൻ-താഴെ: 40px; font-size: 16px; font-weight: 300; ) section.section p:last-child (മാർജിൻ-താഴെ: 0; ) വിഭാഗം. section.content (padding: 40px 0; ) section.section.parallax (ഉയരം: 600px; പശ്ചാത്തല-സ്ഥാനം: 50% 50%; പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കരുത്; പശ്ചാത്തലം-അറ്റാച്ച്‌മെൻ്റ്: സ്ഥിരം; പശ്ചാത്തല വലുപ്പം: കവർ; ) section.section.parallax h1 (നിറം: rgba(255, 255, 255, 0.8); ഫോണ്ട്-വലിപ്പം: 48px; ലൈൻ-ഉയരം: 600px; ഫോണ്ട്-ഭാരം: 700; ടെക്സ്റ്റ്-അലൈൻ: സെൻ്റർ; ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: വലിയക്ഷരം; ടെക്സ്റ്റ് ഷാഡോ: 0 0 10px rgba(0, 0, 0, 0.2); section.section.parallax-1 (background-image: url("../imgages/1.jpg"); ) section.section. parallax-2 (പശ്ചാത്തലം-ചിത്രം: url("../imgages/2.jpg"); ) section.section.parallax-3 (പശ്ചാത്തലം-ചിത്രം: url("../imgages/3.jpg"); ) @media all ഒപ്പം (മിനി-വീതി: 600px) ( section.section h2 ( font-size: 42px;

) section.section p ( font-size: 20px; ) section.section.parallax h1 ( font-size: 96px; ) ) @ media all and (min-width: 960px) ( section.section.parallax h1 ( font-size : 160px;) പാരലാക്സ് (ഗ്രീക്ക്)മാറ്റം, മാറിമാറി

) നിരീക്ഷകൻ്റെ സ്ഥാനത്തെ ആശ്രയിച്ച് വിദൂര പശ്ചാത്തലവുമായി ബന്ധപ്പെട്ട് ഒരു വസ്തുവിൻ്റെ പ്രത്യക്ഷ സ്ഥാനത്ത് വരുന്ന മാറ്റമാണ്. ജ്യോതിശാസ്ത്രത്തിലും ജിയോഡെസിയിലും പ്രകൃതി പ്രതിഭാസങ്ങൾക്കാണ് ഈ പദം പ്രാഥമികമായി ഉപയോഗിച്ചത്. ഉദാഹരണത്തിന്, വെള്ളത്തിൽ പ്രതിഫലിക്കുമ്പോൾ സ്തംഭവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ സൂര്യൻ്റെ ഈ സ്ഥാനചലനം പ്രകൃതിയിൽ പാരലാക്സ് ആണ്.

ത്രിമാന സ്ഥലത്തിൻ്റെ ഈ പ്രഭാവം നിരവധി പാളികൾ ഉപയോഗിച്ചാണ് കൈവരിക്കുന്നത്, അവ പരസ്പരം സൂപ്പർഇമ്പോസ് ചെയ്യുകയും സ്ക്രോൾ ചെയ്യുമ്പോൾ വ്യത്യസ്ത വേഗതയിൽ നീങ്ങുകയും ചെയ്യുന്നു. ഈ സാങ്കേതികവിദ്യയുടെ സഹായത്തോടെ കൃത്രിമമായി മാത്രമല്ല സൃഷ്ടിക്കാൻ കഴിയും ത്രിമാന പ്രഭാവം, നിങ്ങൾക്ക് ഇത് ഐക്കണുകൾ, ഇമേജുകൾ, മറ്റ് പേജ് ഘടകങ്ങൾ എന്നിവയിൽ പ്രയോഗിക്കാൻ കഴിയും.

പാരലാക്സ് ഇഫക്റ്റിൻ്റെ പോരായ്മകൾ

പാരലാക്‌സിൻ്റെ പ്രധാന പോരായ്മ സൈറ്റ് പ്രകടനത്തിലെ പ്രശ്‌നങ്ങളാണ്. എല്ലാം മനോഹരവും സ്റ്റൈലിഷും ആയി കാണപ്പെടുന്നു, പക്ഷേ ജാവാസ്ക്രിപ്റ്റ് / jQuery യുടെ ഉപയോഗം, അതിൻ്റെ സഹായത്തോടെ പാരലാക്സ് ഇഫക്റ്റ് സൃഷ്ടിക്കപ്പെടുന്നു, പേജിനെ വളരെയധികം ഭാരപ്പെടുത്തുകയും അതിൻ്റെ ലോഡിംഗ് വേഗത ഗണ്യമായി കുറയ്ക്കുകയും ചെയ്യുന്നു. കാരണം ഇത് സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്: സ്‌ക്രീനിലെ ഓരോ പിക്സലിൻ്റെയും സ്ഥാനം javascript നിയന്ത്രിക്കേണ്ടതുണ്ട്. ചില സന്ദർഭങ്ങളിൽ, ക്രോസ്-ബ്രൗസറും ക്രോസ്-പ്ലാറ്റ്ഫോം കോംപാറ്റിബിലിറ്റിയും ഉള്ള പ്രശ്നങ്ങളാൽ സ്ഥിതി കൂടുതൽ സങ്കീർണമാകുന്നു. പരമാവധി രണ്ട് പേജ് ഘടകങ്ങളിൽ പാരലാക്സ് ഇഫക്റ്റ് ഉപയോഗിക്കാൻ പല ഡവലപ്പർമാരും ശുപാർശ ചെയ്യുന്നു.

ഇതര പരിഹാരം

CSS 3 യുടെ വരവോടെ, ചുമതല അൽപ്പം എളുപ്പമായി. അതിൻ്റെ സഹായത്തോടെ, നിങ്ങൾക്ക് സമാനമായ ഒരു പ്രഭാവം സൃഷ്ടിക്കാൻ കഴിയും, അത് വിഭവ ഉപഭോഗത്തിൻ്റെ കാര്യത്തിൽ കൂടുതൽ ലാഭകരമായിരിക്കും. സൈറ്റിൻ്റെ ഉള്ളടക്കം ഒരു പേജിൽ സ്ഥാപിച്ചിരിക്കുന്നു എന്നതാണ് പ്രധാന കാര്യം, കൂടാതെ ഉപപേജുകളിലൂടെയുള്ള ചലനം CSS 3-ട്രാൻസിഷൻ രീതി ഉപയോഗിച്ചാണ് സംഭവിക്കുന്നത്. ഇത് ഒരേ പാരലാക്സ് ആണ്, പക്ഷേ ചില വ്യത്യാസങ്ങളോടെ: CSS 3 മാത്രം ഉപയോഗിച്ച് വ്യത്യസ്ത വേഗതയിൽ ചലനം കൈവരിക്കുന്നത് അസാധ്യമാണ് എന്നതാണ് വസ്തുത. കൂടാതെ, ഈ നിലവാരംഎല്ലാവരുടെയും പിന്തുണയില്ല ആധുനിക ബ്രൗസറുകൾ. അതുകൊണ്ട് തന്നെ ഇവിടെയും ബുദ്ധിമുട്ടുകൾ ഉണ്ട്.

ഉപസംഹാരം

പാരലാക്സ് ഇഫക്റ്റ് ജനപ്രിയമാണെങ്കിലും, മുകളിൽ സൂചിപ്പിച്ച പ്രശ്നങ്ങൾ കാരണം ഒരു വെബ്സൈറ്റ് സൃഷ്ടിക്കുമ്പോൾ എല്ലാവരും അത് ഉപയോഗിക്കാൻ തിടുക്കം കാണിക്കുന്നില്ല. പ്രത്യക്ഷത്തിൽ, ഉയർന്നുവന്ന ബുദ്ധിമുട്ടുകൾ മറികടക്കാൻ സാങ്കേതികവിദ്യയ്ക്ക് സമയമെടുക്കും. ഇതിനിടയിൽ, ഒരു പേജ് സൈറ്റുകളിൽ ഈ ഓപ്ഷൻ ഉപയോഗിക്കാം: ഈ രീതിയിൽ ഇത് തീർച്ചയായും ഓർമ്മിക്കപ്പെടുകയും ഉപയോക്താവിനെ നിലനിർത്തുകയും ചെയ്യും.

ജാവാസ്ക്രിപ്റ്റിൽ പാരലാക്സ്

• jQuery പാരലാക്സ് സ്ക്രോളിംഗ് ഇഫക്റ്റ് - മൗസ് വീലിൻ്റെ ചലനവുമായി പാരലാക്സ് ഇഫക്ടിനെ ബന്ധിപ്പിക്കുന്ന ഒരു പ്ലഗിൻ
• സ്ക്രോൾഡെക്ക് - ഒരു പാരലാക്സ് ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു പ്ലഗിൻ
• jParallax - പേജ് ഘടകങ്ങളെ മൗസിന് അനുസൃതമായി ചലിപ്പിക്കുന്ന തികച്ചും സ്ഥാനമുള്ള പാളികളാക്കി മാറ്റുന്നു