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

സൈറ്റുകളിലൊന്നിൽ, സുഗമമായ ആനിമേഷൻ ഉപയോഗിച്ച് പേജിൻ്റെ സ്ക്രോളിംഗ് നടപ്പിലാക്കേണ്ടത് ആവശ്യമാണ്. 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 പ്ലാറ്റ്‌ഫോം ഉപയോഗിക്കുക - ഇത് രഹസ്യവും സുരക്ഷിതവുമാണ്.

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

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

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

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

ബന്ധിപ്പിക്കുന്നതിലൂടെ നമുക്ക് ആരംഭിക്കാം 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-ൽ ഇത് നന്നായി പ്രവർത്തിക്കുന്നില്ല. ചില ആനിമേഷനുകൾ പ്ലേ ചെയ്യുന്നില്ല, അവയുടെ സ്ഥാനത്ത് ശൂന്യമായ ഇടമുണ്ട്. ഇത് എങ്ങനെ പരിഹരിക്കണമെന്ന് ആർക്കെങ്കിലും അറിയാമെങ്കിൽ, ദയവായി അഭിപ്രായങ്ങളിലോ ഇൻലോ എഴുതുക

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

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