ജാവാസ്ക്രിപ്റ്റ് ഫേഡിംഗ് - നിറങ്ങളുടെ സുഗമമായ മാറ്റം. ആങ്കർ ലിങ്കിലേക്കുള്ള സുഗമമായ മാറ്റം

Document.querySelector("nav").addEventListener("ക്ലിക്ക്", ഫംഗ്‌ഷൻ (ഇ) (var dest = e.target.href എങ്കിൽ (!dest || !(dest = dest.split("#"))) റിട്ടേൺ ഇ .preventDefault() var p = document.querySelector("main") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().top - p.getBoundingClientRect().top - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(function f(t) ( console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) എങ്കിൽ (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) )) ); * (ബോക്‌സ് വലുപ്പം: ബോർഡർ-ബോക്‌സ്; ) nav (സ്ഥാനം: സ്റ്റിക്കി; വീതി: 1.25em; ഫ്ലോട്ട്: ഇടത്; മാർജിൻ: 8px; ) a (ഡിസ്‌പ്ലേ: ബ്ലോക്ക്; ലൈൻ-ഉയരം: 1.25em; ടെക്‌സ്‌റ്റ്-അലൈൻ: മധ്യഭാഗം; ) a:hover (പശ്ചാത്തലം: വെള്ളി; ) html, ബോഡി, മെയിൻ (ഉയരം: 100%; മാർജിൻ: 0; ) പ്രധാന (ഓവർഫ്ലോ: ഓട്ടോ; ) h1 (മാർജിൻ: 16px 0; പശ്ചാത്തലം: ആന്റിക്യൂവൈറ്റ്; ) 1 2 3 4 5 6 7 8 9 10 1 2

ഒരു ഉണ്ടോ എന്ന് സുഗമമായ സ്ക്രോളിംഗ്ശുദ്ധമായ JS-ലെ ആങ്കർമാർക്കിടയിൽ? ശുദ്ധമായ JS-ൽ സുഗമമായ സ്‌ക്രോളിംഗിനായി സ്‌ക്രിപ്റ്റ് ഉണ്ടോ എന്ന് ഞാൻ ആശ്ചര്യപ്പെടുന്നു, ഞാൻ ഇതില്ലാതെ ഒരു വെബ്‌സൈറ്റ് നിർമ്മിക്കുകയാണ് jQuery ഉപയോഗിക്കുന്നു

ശുദ്ധമായ JS-ൽ ആങ്കറുകൾക്കിടയിൽ സുഗമമായ സ്ക്രോളിംഗ് ഉണ്ടോ? ശുദ്ധമായ JS-ൽ സുഗമമായ സ്‌ക്രോളിംഗിനായി സ്‌ക്രിപ്റ്റ് ഉണ്ടോ എന്ന് ഞാൻ ആശ്ചര്യപ്പെടുന്നു, ഞാൻ jQuery ഉപയോഗിക്കാതെ ഒരു വെബ്‌സൈറ്റ് നിർമ്മിക്കുകയാണ്

IN ഈയിടെയായിനിങ്ങൾ പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ പ്ലേ ചെയ്യുന്ന ആനിമേഷനുകൾ കൂടുതൽ ജനപ്രിയമായിക്കൊണ്ടിരിക്കുകയാണ്. എന്നിരുന്നാലും, ഭൂരിഭാഗം ബ്രൗസറുകളും അത്തരം ആനിമേഷനുകൾക്കായി രൂപകൽപ്പന ചെയ്തിട്ടില്ലെന്ന് ഞാൻ ശ്രദ്ധിച്ചു. മൗസ് ഉപയോഗിച്ച് പേജുകൾ സ്ക്രോൾ ചെയ്യുന്നത് സുഗമമായി സംഭവിക്കുന്നില്ല (ഫയർഫോക്സിലെ പോലെ), പക്ഷേ ഘട്ടങ്ങളിലാണ്. തൽഫലമായി, പേജുകളിലെ സ്ക്രോളിംഗ് ആനിമേഷനുകളും ഞെട്ടലോടെ പ്ലേ ചെയ്യുന്നു. എന്റെ അഭിപ്രായത്തിൽ, ഇവിടെ പ്രശ്നം ബ്രൗസറുകളുടേതല്ല, മറിച്ച് ഈ ആനിമേഷനുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന പ്ലഗിനുകളുടേതാണ്. കാരണം പെട്ടെന്നുള്ള ചാട്ടങ്ങൾ അനുവദിക്കുന്നത് അവരാണ്. ഏതൊരു ആനിമേഷനും പരമാവധി പ്ലേബാക്ക് വേഗത ഉണ്ടായിരിക്കണമെന്ന് ഞാൻ വിശ്വസിക്കുന്നു, ആനിമേഷൻ സുഗമവും ഉപയോക്താവിന് പേജിൽ എന്താണ് സംഭവിച്ചതെന്ന് മനസ്സിലാക്കാനും കഴിയും. നിങ്ങൾ എന്നോട് യോജിക്കുന്നുവെങ്കിൽ, പൂച്ചയ്ക്ക് കീഴിൽ കുതിക്കാതെ സുഗമമായി നീങ്ങുക.

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

സമാനതകൾക്ക് പുറമേ, ഈ പ്ലഗിനുകൾക്ക് വ്യത്യാസങ്ങളും ഉണ്ട്. എന്നാൽ പ്രധാന കാര്യം ഹൈലൈറ്റ് ചെയ്യാൻ ഞാൻ ആഗ്രഹിക്കുന്നു - സുഗമമായ ആനിമേഷൻ. ഇത് അടിസ്ഥാനരഹിതമാണെന്ന് തോന്നാതിരിക്കാൻ, ഇതാ നിങ്ങൾക്കായി തെളിവ്. ഹോം പേജ്സ്ക്രോൾമാജിക്കും എന്റെ വാക്കുകൾ സ്ഥിരീകരിക്കുന്നു.

ഇത് എങ്ങനെ ഉപയോഗിക്കാം?കണക്ട് ചെയ്യുക Scrollissimo ഉപയോഗിച്ച് തുടങ്ങുന്നതിന് നിങ്ങൾ രണ്ട് കാര്യങ്ങൾ ചെയ്യേണ്ടതുണ്ട്. ആദ്യം, ഗ്രീൻസോക്ക് ബന്ധിപ്പിക്കുക. ചുരുങ്ങിയത് മാത്രമേ ബന്ധിപ്പിക്കാൻ കഴിയൂ ആവശ്യമായ ലൈബ്രറികൾ(TweenLite, TimelineLite, CSS):

അല്ലെങ്കിൽ, മുകളിൽ പറഞ്ഞവയെല്ലാം ഉൾക്കൊള്ളുന്ന ഒരു ലൈബ്രറി ബന്ധിപ്പിക്കുക:

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

ബോവർ സ്ക്രോളിസിമോ ഇൻസ്റ്റാൾ ചെയ്യുക
ഡൗൺലോഡ് ചെയ്തു, ഇപ്പോൾ ബന്ധിപ്പിക്കുക:

നിങ്ങളുടെ സൗകര്യത്തിനായി നിങ്ങൾക്ക് ഓപ്ഷണലായി (പക്ഷേ ആവശ്യമില്ല) jQuery ഉൾപ്പെടുത്താം. പിന്നീട് ലേഖനത്തിൽ കൂടുതൽ വായനാക്ഷമതയ്ക്കായി ഞാൻ കോഡ് എഴുതും.

മുഴുവൻ പേജും സ്ക്രോൾ ചെയ്യുന്നതിൽ മാത്രമല്ല, മറ്റേതെങ്കിലും ഇവന്റുകളിലും Scrollissimo പ്രവർത്തനക്ഷമമാക്കാനുള്ള സാധ്യത ഞാൻ നൽകിയിട്ടുണ്ട്, എന്നാൽ ബഹുഭൂരിപക്ഷം സാഹചര്യങ്ങളിലും നിങ്ങൾ പേജ് സ്ക്രോൾ ഇവന്റിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യേണ്ടതുണ്ട്:

$(വിൻഡോ).സ്ക്രോൾ(ഫംഗ്ഷൻ())( Scrollissimo.knock(); ));
ഇപ്പോൾ, ഒരു സ്ക്രോൾ ഇവന്റ് സംഭവിക്കുമ്പോഴെല്ലാം, സ്ക്രോളിസിമോ ആനിമേഷന്റെ നിലവിലെ പുരോഗതി കണക്കാക്കുകയും അത് പ്ലേ ചെയ്യുകയും ചെയ്യും.

ശ്രദ്ധിക്കുക: പേജ് സ്ക്രോൾ തന്നെ എണ്ണാൻ നിങ്ങൾക്ക് പ്ലഗിൻ ആവശ്യമില്ലെങ്കിൽ, നിങ്ങളുടെ സ്ക്രോൾടോപ്പ് പ്രോപ്പർട്ടി മൂല്യം knock() രീതിയിലേക്ക് കൈമാറാം. അതിനാൽ, ഉദാഹരണത്തിന്, Scrollissimo.knock(1000) നിങ്ങൾ സ്ക്രോൾ ചെയ്ത പ്ലഗിനിനോട് പറയും. പേജ് 1000 പിക്സലുകൾ.

ശ്രദ്ധിക്കുക: ടച്ച് ഉപകരണങ്ങളെ പിന്തുണയ്ക്കാൻ, സ്ക്രോൾ ചെയ്യുമ്പോൾ പേജ് ഫ്രീസുചെയ്യുന്നതിനെ ചെറുക്കുന്ന ഒരു ടച്ച് അഡാപ്റ്റർ scrollissimo.touch.js ഉണ്ട്.

അത്രയേയുള്ളൂ, ഇപ്പോൾ നിങ്ങൾക്ക് നേരിട്ട് ആനിമേറ്റ് ചെയ്യാം! സ്ക്രോളിസിമോയ്ക്ക് ഇരട്ടകളെയും (ഒറ്റ ആനിമേഷനുകൾ) ടൈംലൈനുകളും (ഒറ്റ ആനിമേഷനുകളുടെ ക്യൂ) ആനിമേറ്റ് ചെയ്യാൻ കഴിയും. നമുക്ക് ഇരട്ടകളിൽ നിന്ന് ആരംഭിക്കാം.

ഏറ്റവും ലളിതമായ ആനിമേഷൻ നമുക്ക് ദിവ്യ എന്ന മനോഹരമായ ഒരു ചുവന്ന ഡിവി ഉണ്ടെന്ന് പറയാം. അവൻ ശരിക്കും വളരാൻ ആഗ്രഹിക്കുന്നു, പക്ഷേ ഇതുവരെ 50 പിക്സൽ വീതിയും ഉയരവും മാത്രമേയുള്ളൂ.

#Divy(സ്ഥാനം: സ്ഥിരം; മുകളിൽ: 0; ഇടത്: 0; ഉയരം: 50px; വീതി: 50px; പശ്ചാത്തലം: ചുവപ്പ്; )
പേജിന്റെ ആരംഭം മുതൽ ഇതിനകം 1000 പിക്സലുകൾക്ക് ശേഷം അത് 300 പിക്സൽ വീതിയുള്ളതാക്കി മാറ്റാം. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ ആദ്യം ഗ്രീൻസോക്ക് ഉപയോഗിച്ച് ഒരു സാധാരണ ആനിമേഷൻ ചെയ്യുന്നതുപോലെ, അനുബന്ധ ട്വീൻ സൃഷ്ടിക്കും:

Var divyTween = പുതിയ TweenLite($("#Divy"), 1000, (വീതി: 300 ));
ശ്രദ്ധിക്കുക: നിങ്ങൾ ശ്രദ്ധിച്ചതുപോലെ, സ്റ്റാൻഡേർഡ് ഗ്രീൻസോക്ക് ആനിമേഷനിൽ നിന്നുള്ള ഒരേയൊരു വ്യത്യാസം ഞങ്ങൾ ആനിമേഷന്റെ ദൈർഘ്യം സെക്കന്റുകളിലല്ല, പിക്സലുകളിൽ (ഞങ്ങളുടെ കാര്യത്തിൽ, 1000) വ്യക്തമാക്കുന്നു എന്നതാണ്.

കൊള്ളാം! ഈ ഇരട്ടക്കുട്ടിയെ സ്ക്രോളിസിമോ വിഴുങ്ങാൻ കൊടുക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്:

Scrollissimo.add(divyTween, 0, 6);
ഇനി നമുക്ക് വേഗത കുറച്ച് ഈ വരി നോക്കാം. ആദ്യത്തെ വാദം ഞങ്ങൾ സൃഷ്ടിച്ച അതേ ഇടയിലാണ്. ആനിമേഷൻ ആരംഭിക്കുന്നത് ഏത് സ്ഥാനത്ത് നിന്നാണ് എന്നതാണ് രണ്ടാമത്തെ വാദം. ഞങ്ങളുടെ കാര്യത്തിൽ, ഇത് പേജിന്റെ തുടക്കമാണ് (0 പിക്സലുകൾ). മൂന്നാമത്തെ വാദം അവശേഷിക്കുന്നു. ഇവിടെയാണ് നമ്മൾ എത്തിച്ചേരുന്നത് പ്രധാന ഗുണം, ഇത് സ്ക്രോളിസിമോയെ സാധാരണ പ്ലഗിന്നുകളിൽ നിന്ന് വേർതിരിക്കുന്നു. മൂന്നാമത്തെ വാദം പരമാവധി ആനിമേഷൻ പ്ലേബാക്ക് വേഗതയാണ്. ഈ വേഗത അളക്കുന്നത് അമൂർത്തത്തിലാണ് അളവില്ലാത്ത യൂണിറ്റുകൾകൂടാതെ "കണ്ണുകൊണ്ട്" തിരഞ്ഞെടുക്കപ്പെടുന്നു. "നിങ്ങൾ മൂന്നാമത്തെ പാരാമീറ്റർ വ്യക്തമാക്കിയില്ലെങ്കിൽ എന്ത് സംഭവിക്കും?" എന്ന ചോദ്യത്തിന് ഞാൻ ഉടൻ ഉത്തരം നൽകും. നിങ്ങൾ വ്യക്തമാക്കിയില്ലെങ്കിൽ പരമാവധി വേഗത, അപ്പോൾ അത് നിലനിൽക്കില്ല. സാധാരണ പ്ലഗിനുകൾ പ്ലേ ചെയ്യുന്ന അതേ രീതിയിൽ ഈ ആനിമേഷൻ പ്ലേ ചെയ്യും.

ടൈംലൈനുകൾ അതിനാൽ, ദിവ്യ വീതിയിൽ വളർന്നു. ഉയരത്തിൽ വളരാൻ നമുക്ക് അവനെ എങ്ങനെ സഹായിക്കാനാകും? ആനിമേഷനുകളുടെ ശൃംഖലകൾ അല്ലെങ്കിൽ ഗ്രീൻസോക്ക് പദങ്ങളിൽ ടൈംലൈനുകൾ ഇവിടെ ഞങ്ങളെ സഹായിക്കും. ആനിമേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങൾ മുമ്പ് അവ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് പുതിയതായി ഒന്നുമില്ല. മുകളിലുള്ള ഇരട്ടകളോട് ചെയ്തതുപോലെ, ടൈംലൈൻ ഉപയോഗിച്ച് ഞങ്ങൾ ഇത് ചെയ്യുന്നു. js ഫിഡിൽ

Var divyTimeline = പുതിയ TimelineLite(); divyTimeline.to($("#Divy"),1000 (വീതി: 300 )); divyTimeline.to($("#Divy"), 1000, (ഉയരം: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

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

ലേഔട്ട്, ആനിമേറ്റ് ചെയ്യുക!

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

മറ്റ് ലാൻഡിംഗ് പേജുകളിലും സമാനമായ പ്രഭാവം നിങ്ങൾ കണ്ടിരിക്കാം. ഇത് എങ്ങനെ നടപ്പിലാക്കണമെന്ന് ഇന്ന് നിങ്ങൾ പഠിക്കും.

ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ആങ്കർ ചെയ്യാൻ സുഗമമായ സ്ക്രോളിംഗ്

പ്രോജക്റ്റുകളിലൊന്നിൽ, മെനു ഇനങ്ങളിലൊന്നിൽ ക്ലിക്കുചെയ്യുമ്പോൾ ഒരു നിശ്ചിത ഘടകത്തിലേക്ക് സുഗമമായ സ്ക്രോളിംഗ് ഉപയോഗിച്ച് സമാനമായ പ്രഭാവം നടപ്പിലാക്കുക എന്നതായിരുന്നു ചുമതല.

കണക്റ്റുചെയ്യുന്നതിലൂടെ നമുക്ക് ആരംഭിക്കാം jquery ലൈബ്രറിഞങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് സ്‌ക്രിപ്റ്റിലേക്കുള്ള പാത എഴുതുക, അത് സുഗമമായ സ്‌ക്രോളിംഗിന് ഉത്തരവാദിയാണ്:

ഞങ്ങൾ ഇത് കൈകാര്യം ചെയ്തു. ഇപ്പോൾ നിങ്ങൾ സ്ക്രോളിംഗ് സംഭവിക്കുന്ന ലേബലുകളും ആങ്കറുകളും ഇടേണ്ടതുണ്ട്.

നിർമ്മാണത്തിനും ക്ലീനിംഗ് ജോലികൾക്കുമായി പ്രൊഫഷണൽ ഉപകരണങ്ങൾ വാടകയ്‌ക്കെടുക്കുന്നതിനുള്ള പ്രോജക്റ്റിലുണ്ടായിരുന്ന മെനുവിന്റെ ഉദാഹരണം ഞാൻ നിങ്ങളോട് പറയും. ഇവിടെ ഇതാ ഉറവിടം:

വൃത്തിയാക്കൽ ഉപകരണങ്ങൾ
നിർമ്മാണ ഉപകരണങ്ങൾ
സംഭരിക്കുക

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

സൈറ്റിൽ ആവശ്യമുള്ള സ്ഥലത്തേക്ക് നാവിഗേറ്റ് ചെയ്യുന്നതിന്, ഐഡന്റിഫയറിലേക്ക് ഒരു ലിങ്ക് ചേർക്കുക ആവശ്യമുള്ള ബ്ലോക്ക്. അത് ചെയ്യാം.

വൃത്തിയാക്കൽ ഉപകരണങ്ങൾ
നിർമ്മാണ ഉപകരണങ്ങൾ
സംഭരിക്കുക

ഇപ്പോൾ നിങ്ങൾ "ക്ലീനിംഗ്", "ബിൽഡിംഗ്", "ആക്ഷൻസ്" എന്നീ ഐഡന്റിഫയറുകൾ അനുബന്ധ ബ്ലോക്കുകളിലേക്ക് സജ്ജമാക്കേണ്ടതുണ്ട്. എന്നെ സംബന്ധിച്ചിടത്തോളം ഇത് ഇതുപോലെ കാണപ്പെട്ടു:

പേര് = "ക്ലീനിംഗ്" ആട്രിബ്യൂട്ട് ശ്രദ്ധിക്കുക. ഇത് ഐഡിയുമായി പൊരുത്തപ്പെടണം. സ്ക്രിപ്റ്റ് തന്നെ ഇതാ:

$(function () ( $("a.scrollto").click(function () ( elementClick ചെയ്യട്ടെ = $(this).attr("href") destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: destination ), 1100); തെറ്റ് മടങ്ങുക; )); ));

നിങ്ങൾക്കും എന്നെപ്പോലെ, നിരവധി ഘടകങ്ങളിലേക്ക് സ്ക്രോളിംഗ് നടപ്പിലാക്കണമെങ്കിൽ, ഐഡന്റിഫയറുകൾ ഇടുക, സമാനമായ രീതിയിൽഅത്രമാത്രം! വളരെ സൗകര്യപ്രദമായ വഴിഇത് നടപ്പിലാക്കാൻ എളുപ്പവുമാണ്, ഇത് മികച്ചതാണെന്ന് ഞാൻ പറയുന്നില്ല, പക്ഷേ ഇത് പ്രവർത്തിക്കുന്നു. ആർക്കെങ്കിലും ഇത് ലളിതമാക്കാനോ ചുരുക്കാനോ എങ്ങനെയെങ്കിലും മെച്ചപ്പെടുത്താനോ കഴിയുമെങ്കിൽ, ഞാൻ നിങ്ങളോട് വളരെ നന്ദിയുള്ളവനായിരിക്കും. എന്നെ സംബന്ധിച്ചിടത്തോളം, ഈ പ്രഭാവം പലർക്കും ഉപയോഗപ്രദമാകും.

ലേഖനത്തിന്റെ തുടക്കത്തിൽ ഞങ്ങൾ സ്ക്രിപ്റ്റിന്റെ പേരും പാതയും ഇനിപ്പറയുന്ന രീതിയിൽ സൂചിപ്പിച്ചുവെന്നത് ശ്രദ്ധിക്കുക:

അതായത്, നിങ്ങളുടെ സൈറ്റിന്റെ റൂട്ടിൽ js എന്ന പേരിൽ ഒരു ഫോൾഡർ ഉണ്ടാക്കുകയും അതിൽ perehod.js എന്ന ഫയൽ സ്ഥാപിക്കുകയും വേണം. എന്നിട്ട് സ്ക്രിപ്റ്റ് കോഡ് തന്നെ അതിൽ ചേർക്കുക. ഇത് ഞാനാണ്, അങ്ങനെയെങ്കിൽ. ആരെങ്കിലും മനസ്സിലാക്കിയില്ലെങ്കിൽ എന്തുചെയ്യും?

ഇന്നത്തേക്ക് അത്രമാത്രം. ആങ്കറിലേക്ക് മിനുസമാർന്ന പേജ് സ്ക്രോളിംഗ് പോലെ അത്തരമൊരു രസകരമായ പ്രഭാവം എങ്ങനെ നടപ്പിലാക്കാമെന്ന് ഇപ്പോൾ നിങ്ങൾക്കറിയാം. എല്ലാവർക്കും വിട!

P.s.: കോളിനോട് പ്രതികരിച്ചവർക്ക് നന്ദി സോഷ്യൽ നെറ്റ്‌വർക്കുകളിൽപുതിയ ലേഖനങ്ങൾക്കുള്ള ആശയങ്ങളുമായി സഹായിക്കുക. എന്തുകൊണ്ടാണ് നിങ്ങൾ എഴുതാൻ തീരുമാനിച്ചതെന്ന് എനിക്കറിയില്ല സ്വകാര്യ സന്ദേശങ്ങൾ, ഇത് അഭിപ്രായങ്ങളിൽ ഇടുന്നതാണ് നല്ലത്, അതിനാൽ കൂടുതൽ ധൈര്യമുള്ള ആരെങ്കിലും ഇതിനകം അത് ചെയ്തതായി കണ്ടാൽ മറ്റുള്ളവർക്ക് ഒരു അവലോകനം എഴുതുന്നത് എളുപ്പമായിരിക്കും.

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

സൈറ്റുകളിലൊന്നിൽ, പേജ് മുകളിലേക്ക് സ്ക്രോളിംഗ് (സ്ക്രോളിംഗ്) നടപ്പിലാക്കേണ്ടത് ആവശ്യമാണ് സുഗമമായ ആനിമേഷൻ. jquery-ൽ ഇത് ഒരു കമാൻഡ് ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്:

$("html,body").ആനിമേറ്റ്((സ്ക്രോൾടോപ്പ്:0),500);

എന്നാൽ ശുദ്ധമായ ജാവാസ്ക്രിപ്റ്റിൽ ഇത് കുറച്ചുകൂടി സങ്കീർണ്ണമാണ്:

var ടി;
ഫംഗ്ഷൻ സ്ക്രോൾടോപ്പ്() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) (
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout ("സ്ക്രോൾടോപ്പ്()",30);
) വേറെ (
clearTimeout(t);
}
തെറ്റായി മടങ്ങുക;
}

വേരിയബിൾ മുകളിൽപിക്സലുകളിൽ നിലവിലെ പേജ് സ്ക്രോൾ ദൂരത്തിന് തുല്യമാണ്. ഓരോ 30 എംഎസിലും ഈ മൂല്യം 1.5 മടങ്ങ് കുറയുന്നു, ഒടുവിൽ സുഗമമായി പൂജ്യത്തിലെത്തും. ഇത് CSS ആനിമേഷനുകളിലെ ഈസ് ഔട്ട് പ്രോപ്പർട്ടിയുടെ അനുകരണമാണ്.

നിങ്ങൾക്ക് ആക്സിലറേഷൻ ഇല്ലാതെ, രേഖീയമായി പേജ് മുകളിലേക്ക് സ്ക്രോൾ ചെയ്യണമെങ്കിൽ, ഇതുപോലെ എന്തെങ്കിലും എഴുതുക:

window.scrollTo(0,-20);

അപ്പോൾ പേജ് 30 എംഎസിൽ 20 പിക്സൽ വേഗതയിൽ മുകളിലേക്ക് സ്ക്രോൾ ചെയ്യും.

30 ms കാലയളവിന് കാരണമാകുന്നത് എന്താണ്? സുഖപ്രദമായ സ്‌ക്രീൻ പുതുക്കൽ നിരക്ക് സെക്കൻഡിൽ ഏകദേശം 30 ഫ്രെയിമുകളാണ്, അതായത് ഓരോ ഫ്രെയിമിന്റെയും ദൈർഘ്യം 30 എംഎസ് ആണ്. അനുയോജ്യമായ സുഗമതയ്ക്കായി, നിങ്ങൾക്ക് സെക്കൻഡിൽ 60 ഫ്രെയിമുകൾ നിർമ്മിക്കാം, തുടർന്ന് സമയപരിധി ഏകദേശം 15 എംഎസ് ആയിരിക്കണം. എന്നാൽ ഇത് ദുർബലമായ ഉപകരണങ്ങളിൽ വൈകിയേക്കാം.

സൈറ്റിന്റെ രചയിതാവിന് നന്ദി

നിങ്ങൾക്ക് പ്രോജക്റ്റിനെ പിന്തുണയ്‌ക്കണമെങ്കിൽ, Yandex.Money പ്ലാറ്റ്‌ഫോം ഉപയോഗിക്കുക - ഇത് രഹസ്യവും സുരക്ഷിതവുമാണ്.

നിങ്ങൾ ഇതിനകം ഊഹിച്ചതുപോലെ, ലേഖനം തുലിപ്സ്, റോസാപ്പൂവ് എന്നിവയെക്കുറിച്ചോ ചമോമൈലിൽ നിന്ന് ഒരു ആപ്പിൾ മരം എങ്ങനെ വളർത്താം എന്നതിനെക്കുറിച്ചോ സംസാരിക്കില്ല (അതിനാൽ ഇത് യുവ മിച്ചൂറിനിയക്കാർക്കുള്ള സ്ഥലമല്ല :-), പക്ഷേ മൂലകങ്ങളുടെ നിറം മാറ്റുന്നതിനെക്കുറിച്ച് ഞങ്ങൾ സംസാരിക്കും. ഒരു വെബ് പേജിന്റെ, ഒരു നിറം മറ്റൊന്നിലേക്ക് സുഗമമായ ഒഴുക്കിനെക്കുറിച്ച്, അതായത്. ഫേഡ് ഇഫക്റ്റുകളെ കുറിച്ച് സംസാരിക്കാം.

ഉദാഹരണം

നമുക്ക് ഒരു ഉദാഹരണത്തിൽ നിന്ന് ആരംഭിക്കാം: ഒരു ചിത്രത്തിന് മുകളിൽ ഹോവർ ചെയ്യുക, തുടർന്ന് കഴ്സർ നീക്കുക.

നിങ്ങൾക്ക് സൈദ്ധാന്തിക വിശദാംശങ്ങളിൽ താൽപ്പര്യമില്ലെങ്കിൽ, പക്ഷേ ആവശ്യമാണ് റെഡിമെയ്ഡ് പരിഹാരംപിന്നെ നിങ്ങൾക്ക്.

പ്രശ്നത്തിന്റെ രൂപീകരണം

രണ്ട് നിറങ്ങൾ നൽകിയിരിക്കുന്നു: ആരംഭ നിറവും അവസാന നിറവും.

ഇന്റർമീഡിയറ്റ് നിറങ്ങൾ കണ്ടെത്തേണ്ടത് ആവശ്യമാണ്, പേജിലെ ഒരു ഘടകത്തിലേക്ക് ഓരോന്നായി പ്രയോഗിച്ചാൽ, പ്രാരംഭ നിറത്തിൽ നിന്ന് അവസാനത്തേക്കുള്ള സുഗമമായ മാറ്റം നമുക്ക് ലഭിക്കും. ഈ ഇന്റർമീഡിയറ്റ് നിറങ്ങളിൽ എത്രയെണ്ണം ഉണ്ടായിരിക്കണമെന്നും ഏത് സമയത്തിന് ശേഷം ഒരു ഇന്റർമീഡിയറ്റ് നിറം മറ്റൊന്നിലേക്ക് മാറണമെന്നും നിങ്ങൾ കണ്ടെത്തണം.

പ്രശ്നത്തിലേക്ക് കൂടുതൽ ആഴത്തിൽ നോക്കുന്നു

ഉദാഹരണത്തിന്, പ്രാരംഭ നിറമായി വെള്ളയും അവസാന നിറമായി ഓറഞ്ച്-ചുവപ്പും എടുക്കാം.

#FFFFFF

...n...

#FF4500

ഇപ്പോൾ നമ്മൾ ഇന്റർമീഡിയറ്റ് നിറങ്ങൾ കണ്ടെത്തേണ്ടതുണ്ട്. നന്നായി. പക്ഷെ എങ്ങനെ?! ഈ പ്രശ്നത്തെ നമ്മൾ എങ്ങനെ സമീപിക്കണം? ഇത് ചെയ്യുന്നതിന്, മോണിറ്റർ സ്ക്രീനിൽ നിറം എങ്ങനെ രൂപപ്പെടുമെന്ന് നമുക്ക് ഓർക്കാം (അല്ലെങ്കിൽ കണ്ടുപിടിക്കുക :-). മോണിറ്റർ സ്ക്രീനിലെ ഏത് നിറവും മൂന്ന് പ്രാഥമിക നിറങ്ങളിൽ നിന്നാണ് രൂപം കൊള്ളുന്നത്: ചുവപ്പ് (ചുവപ്പ്), പച്ച (പച്ച), നീല (നീല) എന്നിവ കലർത്തി (അതായത്. വർണ്ണ മാതൃക RGB). നിറങ്ങൾ ഒരു വെബ് പേജിലോ സംഖ്യാ മൂല്യങ്ങൾ ഉപയോഗിച്ചോ സൂചിപ്പിച്ചിരിക്കുന്നു RGB സിസ്റ്റം, അല്ലെങ്കിൽ പേരിട്ടിരിക്കുന്ന നിറങ്ങളുടെ അക്ഷരങ്ങൾ (ഉദാഹരണത്തിന്, വെള്ളയ്ക്ക് വെള്ള, ചുവപ്പിന് ചുവപ്പ് മുതലായവ, എന്നാൽ എല്ലാ നിറങ്ങൾക്കും പേരുകൾ ഇല്ല), അത് ഇപ്പോഴും സംഖ്യാ മൂല്യങ്ങളിലേക്ക് വിരൽ ചൂണ്ടുന്നു. എന്നാൽ പേര് ഉപയോഗിച്ച് ഒരു നിറം വ്യക്തമാക്കുന്നത് ഞങ്ങൾ പരിഗണിക്കില്ല, കാരണം പേരുകൾ മനുഷ്യ മനഃപാഠത്തിന്റെ സൗകര്യാർത്ഥം കണ്ടുപിടിച്ചതാണ്, എന്നാൽ ഞങ്ങളുടെ കാര്യത്തിൽ അവർ കണക്കുകൂട്ടൽ സമയത്ത് അസൌകര്യം സൃഷ്ടിക്കും, കാരണം സംഖ്യാ രൂപത്തിലേക്ക് വിവർത്തനം ചെയ്യേണ്ടതുണ്ട്. നിങ്ങൾക്ക് ഒരു നിറത്തിന്റെ സംഖ്യാ മൂല്യം രണ്ട് തരത്തിൽ സജ്ജമാക്കാൻ കഴിയും: ഹെക്സാഡെസിമൽ, ഫങ്ഷണൽ.

ഹെക്സാഡെസിമൽ നൊട്ടേഷനിൽ, RGB മൂല്യം അടുത്ത ഫോർമാറ്റ്: ഒരു "#" പ്രതീകം ഉടനടി മൂന്നോ ആറോ ഹെക്സാഡെസിമൽ പ്രതീകങ്ങൾ. മൂന്നക്ക RGB മൂല്യം (#rgb) പൂജ്യങ്ങൾ ചേർക്കുന്നതിനുപകരം അക്കങ്ങൾ തനിപ്പകർപ്പാക്കി ആറക്ക ശ്രേണിയിലേക്ക് (#rrggbb) പരിവർത്തനം ചെയ്യുന്നു. ഉദാഹരണത്തിന്, #fb0 #ffbb00 ആയി വികസിക്കുന്നു. അതിനാൽ, വെള്ള നിറം (#ffffff) ഒരു ചെറിയ രൂപത്തിൽ (#fff) വ്യക്തമാക്കാം.
പ്രവർത്തനപരമായ പ്രാതിനിധ്യത്തിൽ, RGB മൂല്യം റെക്കോർഡിംഗ് ഫോർമാറ്റ് ആണ് അടുത്ത കാഴ്ച: "rgb(" എന്ന സ്ട്രിംഗ്, ഉടൻ തന്നെ മൂന്ന് കോമയാൽ വേർതിരിച്ച യഥാർത്ഥ (അല്ലെങ്കിൽ പൂർണ്ണസംഖ്യ, അല്ലെങ്കിൽ ശതമാനം) മൂല്യങ്ങളുടെ ഒരു ലിസ്റ്റ്, ഉടൻ തന്നെ ")" എന്ന പരാന്തീസിസ്. പൂർണ്ണസംഖ്യ മൂല്യം 255 ശതമാന മൂല്യം 100% ന് തുല്യമാണ് ഹെക്സാഡെസിമൽ മൂല്യങ്ങൾ F അല്ലെങ്കിൽ FF, അതിനാൽ rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.

അങ്ങനെ, സംഖ്യാ രൂപത്തിൽ നൽകിയിരിക്കുന്ന ഒരു നിറം അതിന്റെ ഘടക വർണ്ണങ്ങളുടെ മൂല്യങ്ങൾ നൽകുന്നു, ഇത് ആത്യന്തികമായി പ്രാരംഭ നിറത്തിന്റെ ഓരോ പ്രാഥമിക നിറങ്ങളും മാറ്റിക്കൊണ്ട്, രണ്ടാമത്തെ, അവസാന നിറത്തിൽ എത്തിച്ചേരാനുള്ള അവസരം നൽകുന്നു. ഞങ്ങൾ പരിഗണിക്കുകയാണെങ്കിൽ നമ്മുടെ നിർദ്ദിഷ്ട ഉദാഹരണം, അപ്പോൾ നമുക്ക് ഇനിപ്പറയുന്നവയുണ്ട് (ദശാംശ വ്യവസ്ഥയിലെ മൂല്യങ്ങൾ പരാൻതീസിസിൽ സൂചിപ്പിച്ചിരിക്കുന്നു):

#FFFFFF	=	FF (255)	FF (255)	FF (255)
		0	– സിഇ (206)	– FF (255)
#FF4500	=	FF (255)	45 (49)	0

ആ. നിന്ന് വേണ്ടി വെള്ളഓറഞ്ച്-ചുവപ്പ് ലഭിക്കാൻ, നിങ്ങൾ വെള്ള നിറത്തിന്റെ ചുവപ്പ് ഘടകം മാറ്റാതെ വിടണം (മൂല്യം പൂജ്യത്തിലേക്ക് മാറ്റുക), പച്ചയിൽ നിന്ന് 206 കുറയ്ക്കുക, നീലയിൽ നിന്ന് 255 കുറയ്ക്കുക. നമുക്ക് ഈ നമ്പറുകളെ വിളിക്കാം (ΔR = 0, ΔG = -206, ΔB = -255) വർദ്ധനവ്.

ഇപ്പോൾ, ഉദാഹരണത്തിന്, രണ്ട് ഇന്റർമീഡിയറ്റ് നിറങ്ങൾ + അന്തിമ നിറം (ആകെ 3), നിങ്ങൾ RGB ട്രിപ്പിൾ (#FFFFFF) ന്റെ പ്രാരംഭ മൂല്യങ്ങൾ മാറ്റേണ്ടതുണ്ട്, ΔR, ΔG, ഇൻക്രിമെന്റുകളുടെ പൂർണ്ണ മൂല്യത്തിലല്ല. ΔB, എന്നാൽ ആദ്യം 1/3, പിന്നെ 2/3, ഒടുവിൽ 3/3 (3/3 = 1, ഇത് പൂർണ്ണ അർത്ഥംഅന്തിമ നിറം ലഭിക്കുന്നതിനുള്ള ഇൻക്രിമെന്റുകൾ, നമുക്ക് തത്വത്തിൽ, ഇതിനകം അറിയാം).

#FFFFFF	=	FF (255)	FF (255)	FF (255)
#FFBAAA	=	255 -0	255 - 206*1/3 = 186 (BA)	255 - 255*1/3 = 170 (AA)
#FF7655	=	255 - 0	255 - 206*2/3 = 118 (76)	255 - 255*2/3 = 85 (55)
#FF4500	=	FF (255)	45 (49)	0

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

ഇപ്പോൾ നമുക്ക് വ്യക്തമായ മൊത്തത്തിലുള്ള ചിത്രം ഉണ്ട്, നമുക്ക് കോഡ് എഴുതുന്നതിലേക്ക് പോകാം. ആരംഭിക്കുന്നതും അവസാനിക്കുന്നതുമായ നിറങ്ങളുണ്ട്, നമുക്ക് n ഇന്റർമീഡിയറ്റ് നിറങ്ങൾ കണക്കാക്കാം (ഇവിടെ n ഏകപക്ഷീയമായി തിരഞ്ഞെടുക്കപ്പെടുന്നു), കൂടാതെ ഒരു കാലതാമസം മൂല്യമുണ്ട് t (ഇവിടെ t ഏകപക്ഷീയമായി തിരഞ്ഞെടുത്തിരിക്കുന്നു). അതിനാൽ, അൽഗോരിതം ഇപ്രകാരമാണ്: വെബ്‌പേജിലെ ഘടകത്തിന് ആദ്യ ഇന്റർമീഡിയറ്റ് നിറം നൽകുക, തുക t കൊണ്ട് കാലതാമസം വരുത്തുക, രണ്ടാമത്തെ ഇന്റർമീഡിയറ്റ് നിറം മൂലകത്തിന് നൽകുക, കാലതാമസം വരുത്തുക, ..., nth ഇന്റർമീഡിയറ്റ് നൽകുക മൂലകത്തിന്റെ നിറം, അത് അവസാന നിറമാണ്.

നടപ്പിലാക്കൽ

ഉദാഹരണമായി, ക്ലിക്ക് ചെയ്യുമ്പോൾ പശ്ചാത്തലം വെള്ളയിൽ നിന്ന് ഓറഞ്ച്-ചുവപ്പിലേക്ക് മാറുന്ന ഒരു ബട്ടൺ ഉണ്ടാക്കാം.

നമുക്ക് പോകാം... ഓരോ ആവർത്തനത്തിനു ശേഷവും കാലതാമസം വരുത്തിക്കൊണ്ട് ഒരു ലൂപ്പിൽ ഇന്റർമീഡിയറ്റ് നിറങ്ങൾ കണക്കാക്കുക എന്നതാണ് മനസ്സിൽ വരുന്ന ആദ്യത്തെ തെറ്റായ ചിന്ത.

ഫംഗ്ഷൻ ഫേഡ്() ( (var i = 1; i