Scrollissimo ለስላሳ ማሸብለል አኒሜሽን ተሰኪ ነው። ወደ መልህቅ አገናኝ ለስላሳ ሽግግር

ከጣቢያዎቹ በአንዱ ላይ ገጹን ወደ ላይኛው ክፍል ማሸብለል (ማሸብለል) መተግበር አስፈላጊ ነበር ለስላሳ እነማ. በ jquery ውስጥ ይህ በአንድ ትዕዛዝ ይከናወናል:

$("ኤችቲኤምኤል፣አካል")።አኒሜት((ማሸብለል፡0፣500);

ግን በንጹህ ጃቫ ስክሪፕት ትንሽ የተወሳሰበ ነው፡-

var t;
የተግባር ማሸብለል()
var top = Math.max (document.body.scrollTop,document.documentElement.scrollTop);
ከሆነ (ከላይ>0) (
መስኮት.ማሸብለልወደ(0,Math.floor(ከላይ/1.5));
t = setTimeout ("ማሸብለል ()",30);
) ሌላ (
clearTimeout(t);
}
የውሸት መመለስ;
}

ተለዋዋጭ ከላይከአሁኑ ገጽ የማሸብለል ርቀት በፒክሰል ጋር እኩል ነው። በየ30 ሚሴ ይህ ዋጋ በ1.5 ጊዜ ይቀንሳል፣ በመጨረሻም ያለምንም ችግር ዜሮ ይደርሳል። ይህ በCSS እነማዎች ውስጥ ያለውን የቀላል ንብረቱን መኮረጅ ነው።

ሳያፋጥኑ ገጹን ወደላይ ወደላይ ማሸብለል ከፈለጉ እንደዚህ ያለ ነገር ይፃፉ።

መስኮት.ማሸብለልቶ (0,-20);

ከዚያ ገጹ በ 20 ፒክስል በ 30 ms ፍጥነት ወደ ላይ ይሸብልላል።

የ 30 ms ጊዜ መንስኤው ምንድን ነው? ምቹ የሆነ የስክሪን እድሳት መጠን በግምት 30 ክፈፎች በሰከንድ ነው፣ ይህ ማለት የእያንዳንዱ ፍሬም ቆይታ 30 ሚሴ ነው። ለጥሩ ቅልጥፍና፣ በሰከንድ 60 ፍሬሞችን መስራት ይችላሉ፣ እና ከዚያ የማለቂያ ጊዜዎቹ በግምት 15 ሚሴ መሆን አለባቸው። ነገር ግን ይህ በደካማ መሳሪያዎች ላይ ሊዘገይ ይችላል.

ለጣቢያው ደራሲ ምስጋና ይግባው

ፕሮጀክቱን መደገፍ ከፈለጉ የ Yandex.Money መድረክን ይጠቀሙ - ሚስጥራዊ እና ደህንነቱ የተጠበቀ ነው.

ሰላም ጓዶች። በድረ-ገጽ ላይ ወደ መልህቅ ማገናኛ ወደ ለስላሳ ሽግግር የመሰለ ርዕስን መንካት እፈልጋለሁ. በድር ጣቢያዎ ላይ ከጻፉ ጥራዝ ጽሑፎች፣ በቅጽበታዊ ገጽ እይታዎች እና ሌሎች አካላት በትክክል ቅርጸት ያድርጉት ፣ ከዚያ ወደ መልህቁ ለስላሳ ማሸብለል ንድፉን የበለጠ ማራኪ ያደርገዋል። ግን በመጀመሪያ ምን እንደሆነ እና እንዴት እንደሚሰራ እንወቅ. በዚህ ዝርዝር ውስጥ ያሉትን እቃዎች ጠቅ በማድረግ በዚህ ገጽ ላይ የስራ ምሳሌ ማየት ይችላሉ.

የኤችቲኤምኤል መልህቅ አገናኝ እንዴት እንደሚሰራ

መልህቅ ማያያዣዎች በቋንቋው ተሠርተዋል። hypertext ምልክት ማድረግ. በኤችቲኤምኤል ውስጥ መልህቅ መፍጠር በጭራሽ አስቸጋሪ አይደለም። የሚያስፈልግህ ነገር ቢኖር የዚህን ቋንቋ ትንሽ እውቀት እና እንዴት እንደሚሰራ መረዳት ነው። በዚህ ላይ ምንም ችግር ከሌለዎት, ከዚያ ያለ ብዙ ችግር ማድረግ ይችላሉ. ስለዚህ፣ ለመሰካት HTML ገጽ, በኮዱ ውስጥ የሚከተለውን የመሰለ ነገር መጻፍ ያስፈልግዎታል.

እና ይህ መለያ በተጠቆመበት ገጽ ላይ ወደዚህ ቦታ ለመሄድ ፣ ይህንን በአገናኝ ውስጥ መፃፍ ያስፈልግዎታል ።

በአንድ ገጽ ላይ ወደ መለያ ይዝለሉ

በአንድ ገጽ ላይ ወደ መለያ ይዝለሉ

በዚህ አቀራረብ, ሽግግሩ የሚከናወነው ከአንድ ቦታ ወደ ሌላ በፍጥነት በመዝለል ነው

ወደ መልህቅ ለስላሳ ማሸብለል

የድረ-ገጽ ቴክኖሎጂዎችን በማዳበር፣የተለያዩ ተፅዕኖዎች ያላቸው፣ወዘተ የሚያምሩ፣ተለዋዋጭ ድር ጣቢያዎችን መፍጠር ተችሏል። እና ከይዘቱ ሌላ ጎብኚን ሲስቡ እና ጣቢያውን ስለመጎብኘት ጥሩ ስሜት ሲተዉ በጣም ጥሩ ነው። በተወሰነ ደረጃ, ይህ በጣቢያው ባለቤት እጅ ውስጥ ይጫወታል. ለ ለስላሳ ሽግግርወደ መልህቁ, ቤተ-መጽሐፍቱን እንጠቀማለን እና በጣም ትንሽ ስክሪፕት እናገናኛለን.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 < script type= "text/javascript" >$ (ሰነድ) .ዝግጁ (ተግባር () ( $ ("a") .ጠቅ አድርግ (ተግባር () ( elementClick = $ (ይህ ) .attr ( "href"); መድረሻ = $(elementClick) .ማካካሻ () .ከላይ ከሆነ ($.browser .safari) ($("አካል") .አኒሜት ( ( scrollTop: መድረሻ) , 1100; የውሸት መመለስ ;

$(ሰነድ)።ዝግጁ(ተግባር()($("a")) ንካ (ተግባር () ( elementClick = $(this) .attr("href")፤ መድረሻ = $(elementClick)።ኦፍሴት()ላይ ከሆነ($.browser.safari)($("አካል")) .አኒሜት(( scrollTop: መድረሻ), 1100);) ሌላ($("html"). አኒሜት(( scrollTop: መድረሻ), 1100); የውሸት መመለስ;)

ይህንን ስክሪፕት ለማገናኘት ሦስት መንገዶች አሉ። የመጀመሪያው በገጹ ላይ ማስገባት ነው የጭንቅላት መለያዎች. ሁለተኛው ወደ መውሰድ ነው የተለየ ፋይልእና በተናጥል እንደዚህ ይገናኙ

ወደ እሱ ለመሄድ በገጹ ላይ ምልክት ያድርጉ

በሁለተኛ ደረጃ ፣ ለስላሳ ማሸብለል ለሁሉም መልህቆች ሳይሆን ለተወሰኑት ብቻ እንዲከሰት ከፈለጉ ፣ የስክሪፕቱን ሶስተኛ መስመር በዚህ መንገድ መለወጥ ያስፈልግዎታል ።

በአንድ ገጽ ላይ ወደ መለያ ይዝለሉ

ሌላው ልጠቅሰው የምፈልገው ነገር፣ ከቀላል የኤችቲኤምኤል መልህቅ በተቃራኒ jQuery መልህቅ አይመዘገብም የአድራሻ አሞሌወደ እሱ በሚሄዱበት ጊዜ የአሳሽ አገናኝ ወደ መልህቁ። የማወራውን እንድትረዱ፣ በአሳሹ የአድራሻ አሞሌ ላይ ወደ መልሕቅ የሚወስድ አገናኝ ምን እንደሚመስል ምሳሌ እሰጣለሁ።

#መልሕቅ

ምናልባት አስቀድመው እንደገመቱት, ጽሑፉ ስለ ቱሊፕ እና ጽጌረዳዎች አይናገርም, ወይም የፖም ዛፍን ከካምሞሊም እንዴት ማደግ እንደሚቻል (ስለዚህ ይህ ለወጣት ሚቹሪኒያውያን ቦታ አይደለም :-), ነገር ግን የንጥረ ነገሮችን ቀለም ስለመቀየር እንነጋገራለን. የድረ-ገጽ፣ ስለ አንድ ቀለም ለስላሳ ፍሰት ወደ ሌላ፣ ማለትም ስለ ደብዛዛ ተጽእኖዎች እንነጋገር.

ለምሳሌ

በምሳሌ እንጀምር፡ በሥዕል ላይ አንዣብብ እና ከዚያ ጠቋሚውን ያንቀሳቅሱት።

በንድፈ-ሀሳባዊ ዝርዝሮች ላይ ፍላጎት ከሌለዎት, ግን ያስፈልግዎታል ዝግጁ የሆነ መፍትሄከዚያም ወደ አንተ።

የችግሩ መግለጫ

ሁለት ቀለሞች ተሰጥተዋል-የመጀመሪያው ቀለም እና የመጨረሻው ቀለም.

መካከለኛ ቀለሞችን ማግኘት አስፈላጊ ነው, የትኛውን አንድ በአንድ በገጹ ላይ ወደ አንድ አካል በመተግበር, ከመጀመሪያው ቀለም ወደ መጨረሻው ለስላሳ ሽግግር እናገኛለን. እንዲሁም ከእነዚህ መካከለኛ ቀለሞች ውስጥ ምን ያህል መሆን እንዳለባቸው እና ከየትኛው ጊዜ በኋላ አንድ መካከለኛ ቀለም ወደ ሌላ መቀየር እንዳለበት ማወቅ አለብዎት.

ጉዳዩን በጥልቀት በመመልከት ላይ

ለምሳሌ ነጭ እንደ መጀመሪያው ቀለም እና ብርቱካንማ-ቀይ እንደ የመጨረሻው ቀለም እንውሰድ.

#FFFFFF ? ... ን... ? #ኤፍኤፍ4500

አሁን መካከለኛ ቀለሞችን ማግኘት አለብን. ጥሩ። ግን እንዴት?! ይህን ጉዳይ እንዴት ልንመለከተው ይገባል? ይህንን ለማድረግ በስክሪኑ ላይ ቀለም እንዴት እንደሚፈጠር እናስታውስ (ወይም :-) እናስታውስ. በማያ ገጹ ላይ ያለው ማንኛውም ቀለም ከሶስት ዋና ዋና ቀለሞች ማለትም ቀይ (ቀይ) አረንጓዴ (አረንጓዴ) እና ሰማያዊ (ሰማያዊ) በመደባለቅ (ማለትም. የቀለም ሞዴልአርጂቢ)። እና ቀለሞች በድረ-ገጽ ላይ ወይም በተመሳሳይ የቁጥር እሴቶች ይገለጣሉ የ RGB ስርዓት, ወይም በቀጥታ የተሰየሙ ቀለሞች (ለምሳሌ ነጭ ለ ነጭ, ቀይ ለ ቀይ, ወዘተ, ነገር ግን ሁሉም ቀለሞች ስም የላቸውም) ይህም አሁንም የቁጥር እሴቶችን ያመለክታል. ነገር ግን አንድን ቀለም በስም ለመጥቀስ ግምት ውስጥ አንገባም, ምክንያቱም ስሞች የተፈጠሩት ለሰው ልጅ ለማስታወስ እንዲመች ነው, ነገር ግን በእኛ ሁኔታ በስሌቶች ጊዜ ምቾት ይፈጥራሉ, ምክንያቱም አሁንም ወደ አሃዛዊ ቅርጽ መተርጎም ያስፈልገዋል. የአንድ ቀለም ቁጥራዊ እሴት በሁለት መንገዶች ማዘጋጀት ይችላሉ-ሄክሳዴሲማል እና ተግባራዊ.

  • በሄክሳዴሲማል አጻጻፍ፣ የ RGB እሴት ነው። ቀጣዩ ቅርጸት: የ "#" ቁምፊ ወዲያውኑ በሶስት ወይም ስድስት ሄክሳዴሲማል ቁምፊዎች ይከተላል. ባለ ሶስት አሃዝ RGB እሴት (#rgb) ዜሮዎችን ከመጨመር ይልቅ በማባዛት ወደ ባለ ስድስት አሃዝ ቅደም ተከተል (#rrggbb) ይቀየራል። ለምሳሌ #fb0 ወደ #ffbb00 ያድጋል። ስለዚህ, ነጭ ቀለም (#ffffff) በአጭር ቅጽ (#ffff) ሊገለጽ ይችላል.
  • በተግባራዊ ውክልና፣ የ RGB እሴት ቀረጻ ቅርጸት ነው። ቀጣይ እይታ: ሕብረቁምፊው "rgb("፣ወዲያውኑ በነጠላ ሰረዝ የተለዩ ሶስት እውነተኛ (ወይም ኢንቲጀር፣ ወይም መቶኛ) እሴቶች ዝርዝር ይከተላል፣ወዲያውኑ በቅንፍ ")" ይከተላል። የኢንቲጀር እሴቱ 255 ከመቶኛ እሴቱ 100% እና ጋር እኩል ነው። ሄክሳዴሲማል እሴቶች F ወይም FF፣ so rgb(255,255,255) = rgb(100%,100%,100%) = #FFF.

ስለዚህ ፣ በቁጥር መልክ የተሰጠው ቀለም የመለዋወጫውን ቀለሞች እሴቶች ይሰጠናል ፣ በመጨረሻም እያንዳንዱን የመነሻ ቀለም እያንዳንዱን ዋና ቀለሞች በመቀየር ወደ ሁለተኛው ፣ የመጨረሻ ቀለም ለመድረስ እድሉን ይሰጠናል። የኛን ብናስብ ተጨባጭ ምሳሌከዚያ የሚከተለው አለን (በአስርዮሽ ስርዓት ውስጥ ያሉ እሴቶች በቅንፍ ውስጥ ተገልጸዋል)

#FFFFFF = ኤፍኤፍ (255) ኤፍኤፍ (255) ኤፍኤፍ (255)
0 - እ.ኤ.አ. (206) - ኤፍኤፍ (255)
#ኤፍኤፍ4500 = ኤፍኤፍ (255) 45 (49) 0

እነዚያ። ከ ዘንድ እንዲቻል ነጭብርቱካንማ-ቀይ ለማግኘት የነጭውን ቀይ ክፍል ሳይለወጥ መተው ያስፈልግዎታል (እሴቱን ወደ ዜሮ ይቀይሩ) ፣ ከአረንጓዴው 206 ን ይቀንሱ እና 255 ከሰማያዊው ይቀንስ (ΔR = 0 ፣ ΔG = -206, ΔB = -255) ጭማሪዎች.

አሁን ፣ ለምሳሌ ፣ ሁለት መካከለኛ ቀለሞችን + የመጨረሻውን ቀለም (በአጠቃላይ 3) ለማግኘት ፣ የ RGB triplet (#FFFFFF) የመጀመሪያ እሴቶችን በ ΔR ፣ ΔG ፣ በጨመረው ሙሉ ዋጋ መለወጥ ያስፈልግዎታል ። ΔB፣ ግን በመጀመሪያ በ1/3፣ ከዚያም በ2/3 እና በመጨረሻ በ3/3 (3/3 = 1፣ ይህ ነው) ሙሉ ትርጉምየመጨረሻውን ቀለም ለማግኘት መጨመር, እኛ በመርህ ደረጃ, አስቀድመን እናውቃለን).

#FFFFFF = ኤፍኤፍ (255) ኤፍኤፍ (255) ኤፍኤፍ (255)
#FFBAAA = 255 -0 255 - 206*1/3 = 186 (ቢኤ) 255 - 255*1/3 = 170 (አአ)
#ኤፍኤፍ7655 = 255 - 0 255 - 206*2/3 = 118 (76) 255 - 255*2/3 = 85 (55)
#ኤፍኤፍ4500 = ኤፍኤፍ (255) 45 (49) 0

ስለዚህ, መካከለኛ ቀለሞችን ለማስላት ተምረናል. አንድ ሰው መሃከለኛ ቀለሞችን እንዲያስተውል አንድ ተጨማሪ ንፅፅርን ለማብራራት ይቀራል ፣ ቀለሞችን በመቀየር መካከል የጊዜ መዘግየቶችን ማድረግ አስፈላጊ ነው ፣ አለበለዚያ ለውጦቹ በፍጥነት ስለሚከሰቱ ተጠቃሚው በቀላሉ መካከለኛ ቀለሞችን አያስተውልም።

አሁን ግልጽ የሆነ አጠቃላይ ምስል አለን እና ወደ ኮድ መጻፍ መሄድ እንችላለን. የመነሻ እና የማለቂያ ቀለሞች አሉ, n መካከለኛ ቀለሞችን (n በዘፈቀደ የተመረጠበት) እና የመዘግየቱ ዋጋ t (t በዘፈቀደ የተመረጠበት) ማስላት እንችላለን. ስለዚህ አልጎሪዝም የሚከተለው ነው፡- የመጀመሪያውን መካከለኛ ቀለም በድረ-ገጹ ላይ ላለው ንጥረ ነገር ይመድቡ፣ በቲ መጠን ዘግይተዋል፣ ሁለተኛውን መካከለኛ ቀለም ለኤለመንት ይመድቡ፣ መዘግየት፣ ...፣ nth መካከለኛ ይመድቡ። ቀለም ወደ ኤለመንት, እሱም የመጨረሻው ቀለም ነው.

መተግበር

እንደ ምሳሌ፣ ሲጫኑ ከበስተጀርባው ከነጭ ወደ ብርቱካንማ-ቀይ የሚቀየር ቁልፍ እንስራ።

እንሂድ... ወደ አእምሯችን የሚመጣው የመጀመሪያው የተሳሳተ ሀሳብ መካከለኛ ቀለሞችን በ loop ውስጥ ማስላት ነው ፣ ከእያንዳንዱ ድግግሞሽ በኋላ መዘግየት።

የተግባር ማደብዘዝ () (ለ (var i = 1; i