ጃቫስክሪፕት እየደበዘዘ - ለስላሳ ቀለም መቀየር. ወደ መልህቅ አገናኝ ለስላሳ ሽግግር

Document.querySelector("nav").addEventListener("ጠቅ አድርግ" ተግባር (ሠ) (var dest = e.target.href if (!dest || !(dest = dest.split("#"))) መመለስ ሠ .preventDefault () var p = document.querySelector ("ዋና") var a = document.getElementById (dest) var st = p.scrollTop var d = a.getBoundingClientRect()።ከላይ - p.getBoundingClientRect()ላይ - 8 var s = d / 1000 var pt = performance.now () requestAnimationFrame (ተግባር 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)))));

* (የሣጥን መጠን፡ ድንበር-ሣጥን፤) ናቭ (አቀማመጥ፡ ተጣባቂ፡ ስፋት፡ 1.25ኤም፡ ተንሳፋፊ፡ ግራ፡ ኅዳግ፡ 8 ፒክሰል፡) a (ማሣያ፡ አግድ፡ መስመር ከፍታ፡ 1.25ኤም፡ ጽሑፍ፡ አሰላለፍ፡ መሃል፡ ) ሀ፡ ማንዣበብ ( ዳራ፡ ብር፤ ) ኤችቲኤምኤል፣ አካል፣ ዋና (ቁመት፡ 100%፣ ህዳግ፡ 0) ዋና (ትርፍ፡ ራስ፤) h1 (ህዳግ፡ 16 ፒክስል 0፤ ዳራ፡ ጥንታዊ ነጭ፤) 1 2 3 4 5 6 7 8 9 10 1 2 አለ?ለስላሳ ማሸብለል በንጹህ JS መልህቆች መካከል? በንጹህ ጄኤስ ውስጥ ለስላሳ ማሸብለል ስክሪፕት ካለ እያሰብኩ ነው፣ ያለሱ ድህረ ገጽ እየሰራሁ ነው።

jQuery በመጠቀም

በንጹህ ጄኤስ ውስጥ በመልህቆች መካከል ለስላሳ ማሸብለል አለ? በንጹህ ጄኤስ ውስጥ ለስላሳ ማሸብለል ስክሪፕት ካለ እያሰብኩ ነው jQuery ሳትጠቀም ድህረ ገጽ እየሰራሁ ነው። ውስጥሰሞኑን

ገጹን ሲያሸብልሉ የሚጫወቱ እነማዎች ከጊዜ ወደ ጊዜ ተወዳጅ እየሆኑ መጥተዋል። ነገር ግን፣ አብዛኞቹ አሳሾች ለእንደዚህ አይነት እነማዎች የተነደፉ እንዳልሆኑ አስተውያለሁ። ገጾችን በመዳፊት ማሸብለል ያለ ችግር (እንደ ፋየርፎክስ) አይደለም ፣ ግን በደረጃ። በውጤቱም፣ በገጾች ላይ የሚንሸራተቱ እነማዎች እንዲሁ በጅምላ ይጫወታሉ። በእኔ አስተያየት, እዚህ ያለው ችግር በአሳሾቹ ላይ አይደለም, ነገር ግን እነዚህን እነማዎች ለመፍጠር ጥቅም ላይ በሚውሉ ፕለጊኖች ነው. ምክንያቱም ድንገተኛ መዝለልን የሚፈቅዱ እነሱ ናቸው። ለማንኛውም አኒሜሽን አኒሜሽኑ ለስላሳ የሚሆንበት እና ተጠቃሚው በገጹ ላይ ምን እንደተፈጠረ ለመረዳት የሚያስችል ከፍተኛ የመልሶ ማጫወት ፍጥነት መኖር አለበት ብዬ አምናለሁ። ከኔ ጋር ከተስማሙ፣ በድመቷ ስር ሳትንቀጠቀጡ በእርጋታ ይንቀሳቀሱ። በዚህ ጽሑፍ ውስጥ Scrollissimo ብዬ ስለጠራሁት በጥቅልል ቁጥጥር የሚደረግባቸው እነማዎችን ለመፍጠር ስለ ተሰኪ እንነጋገራለን ። በጣም ቅርብ የሆነው አናሎግ ScrollMagic ተሰኪ ነው። ከዓላማቸው እና ግሪንሶክ እንደ አኒሜሽን ሞተር መመረጡ እውነታ አላቸው. በሆነ ምክንያት እስካሁን የማታውቁት ከሆነ፣ እየተከሰተ ያለውን ነገር ሁሉ በደንብ ለመረዳት በሃቤሬ ላይ የታተሙትን ስለ ግሪንሶክ መጣጥፎችን ማንበብ አለቦት። ለምሳሌ ይህንን።

ከተመሳሳይነት በተጨማሪ እነዚህ ፕለጊኖችም ልዩነቶች አሏቸው። ግን በተለይ ዋናውን ነገር ማጉላት እፈልጋለሁ - ለስላሳ አኒሜሽን. ይህ መሠረተ ቢስ እንዳይመስል፣ ለእርስዎ ማረጋገጫ ይኸውልዎ። መነሻ ገጽ ScrollMagic ቃሎቼንም ያረጋግጣል።

እንዴት መጠቀም ይቻላል Scrollisimo ን መጠቀም ለመጀመር ሁለት ነገሮችን ማድረግ ያስፈልግዎታል። መጀመሪያ ግሪንሶክን ያገናኙ። በትንሹ ሊገናኝ የሚችለው አስፈላጊ ቤተ-መጻሕፍት(TweenLite፣ TimelineLite እና CSS)፡

ወይም ከላይ ያሉትን ሁሉንም የያዘ አንድ ቤተ-መጽሐፍት ያገናኙ፡-

እና ሁለተኛ, Scrollissimo እራሱን እናገናኘዋለን. ቤተ መፃህፍቱ ከማከማቻው ይገኛል። እና ለቦወር ተጠቃሚዎች በትእዛዙ መጫንም ይቻላል

Bower ጫን scrollissimo
ወርዷል፣ አሁን ተገናኝ፡

እንደ አማራጭ (ግን የግድ አይደለም) ለራስህ ምቾት jQuery ን ማካተት ትችላለህ። በኋላ በጽሁፉ ውስጥ ለበለጠ ተነባቢነት በመጠቀም ኮድ እጽፋለሁ።

መላውን ገጽ በማሸብለል ላይ ብቻ ሳይሆን በማንኛውም ሌላ ክስተት ላይ Scrollissimoን የማስነሳት እድል አቅርቤያለሁ ፣ ግን በአብዛኛዎቹ ሁኔታዎች ለገጹ ጥቅል ክስተት መመዝገብ ያስፈልግዎታል ።

$ (መስኮት) .ማሸብለል (ተግባር ()) ( Scrollissimo.knock (); ));
አሁን፣ የማሸብለል ክስተት በተከሰተ ቁጥር Scrollissimo የአኒሜሽኑን ወቅታዊ ሂደት ያሰላል እና ያጫውታል።

ማሳሰቢያ፡ ፕለጊኑ የገጹን ጥቅልል በራሱ እንዲቆጥር ካልፈለጉ የማሸብለል ንብረት ዋጋዎን ወደ ተንኳኳ () ዘዴ ማለፍ ይችላሉ። ገጽ 1000 ፒክስሎች .

ማሳሰቢያ፡ የንክኪ መሳሪያዎችን ለመደገፍ፣ በማሸብለል ጊዜ የገፅ ቅዝቃዜን የሚዋጋ የንክኪ አስማሚ scrollissimo.touch.js አለ።

ያ ነው ፣ አሁን በቀጥታ እነማ ማድረግ ይችላሉ! Scrollissimo መንትዮችን (ነጠላ እነማዎች) እና የጊዜ መስመሮችን (የነጠላ እነማዎች ወረፋ) ማንቃት ይችላል። በመንታዎቹ እንጀምር።

በጣም ቀላሉ አኒሜሽን ዲቪ የሚባል የሚያምር ቀይ ዲቪ አለን እንበል። እሱ በእውነት ማደግ ይፈልጋል, ግን እስካሁን ድረስ 50 ፒክሰሎች ስፋት እና ከፍተኛ ነው.

#ዳይቪ(አቀማመጥ፡ ቋሚ፤ ላይ፡ 0፤ ግራ፡ 0፤ ቁመት፡ 50 ፒክስል፤ ስፋት፡ 50 ፒክስል፤ ዳራ፡ ቀይ፤ )
ከገጹ መጀመሪያ ከ1000 ፒክሰሎች በኋላ 300 ፒክስል ስፋት እንዲኖረው እናድርገው። ይህንን ለማድረግ ግሪንሶክን በመጠቀም መደበኛ እነማ እየሰራን ያህል መጀመሪያ ተጓዳኝ ቱን እንፈጥራለን፡

Var divyTween = አዲስ TweenLite ($ ("# Divy"), 1000, (ወርድ: 300));
ማሳሰቢያ፡ እርስዎ እንዳስተዋሉት፣ ከመደበኛ ግሪንሶክ አኒሜሽን የሚለየው የአኒሜሽኑን ቆይታ በሰከንዶች ሳይሆን በፒክሰሎች (በእኛ ሁኔታ 1000) መግለፃችን ነው።

በጣም ጥሩ! የቀረው ይህችን መንታ በ Scrollissimo እንድትበላ መስጠት ብቻ ነው፡-

Scrollissimo.add (divyTween, 0, 6);
አሁን ፍጥነቱን እንቀንስ እና ይህን መስመር እንይ። የመጀመሪያው ክርክር እኛ በፈጠርነው መካከል ተመሳሳይ ነው። ሁለተኛው መከራከሪያ አኒሜሽን ለመጀመር ከየትኛው ቦታ ነው. በእኛ ሁኔታ, ይህ የገጹ መጀመሪያ ነው (0 ፒክሰሎች). ሦስተኛው መከራከሪያ ይቀራል. እዚህ የምንደርስበት ነው ዋና ባህሪ, Scrollissimo ከመደበኛ ተሰኪዎች የሚለየው. ሦስተኛው ነጋሪ እሴት ከፍተኛው የአኒሜሽን መልሶ ማጫወት ፍጥነት ነው። ይህ ፍጥነት የሚለካው በአብስትራክት ነው። መለኪያ የሌላቸው ክፍሎችእና "በዓይን" ይመረጣል. ወዲያውኑ "ሦስተኛውን ግቤት ካልገለጹ ምን ይሆናል?" ለሚለው ጥያቄ መልስ እሰጣለሁ. ካልገለጽክ ከፍተኛ ፍጥነት, ከዚያ አይኖርም. ይህ አኒሜሽን በመደበኛ ተሰኪዎች እንደሚጫወት በተመሳሳይ መንገድ ይጫወታል።

የጊዜ መስመሮች ስለዚህ፣ ዲቪ በስፋት አድጓል። ቁመቱ እንዲያድግ እንዴት ልንረዳው እንችላለን? የአኒሜሽን ሰንሰለቶች ወይም በግሪንሶክ አነጋገር፣ የጊዜ ሰሌዳዎች እዚህ ይረዱናል። እነማዎችን ለመሥራት ከዚህ በፊት ከተጠቀምክባቸው፣ ከዚያ ለአንተ ምንም አዲስ ነገር የለም። ከላይ ካለው መንትያ ጋር እንዳደረግነው በተመሳሳይ መንገድ, በጊዜ መስመር እናደርጋለን. jsFiddle

Var divyTimeline = አዲስ TimelineLite (); divyTimeline.to($("# Divy"),1000 (ወርድ: 300)); divyTimeline.to($("#Divy")፣1000፣(ቁመት፡300)); Scrollissimo.add (divyTimeline, 0, 6);

ማጠቃለያ Scrollissimoን በመጠቀም የማሸብለል እነማዎችን በተሳካ ሁኔታ ለመፍጠር የሚያስፈልግህ ያ ብቻ ነው። ጽሑፉን የምቋጭበት ቦታ ይህ ነው። በማጠቃለያው ፣ እኔ እላለሁ ፕለጊኑ በንቃት ልማት ላይ ነው ፣ ለማደግ እና ለማሻሻል ቦታ አለው። ስለዚህ, ማንኛውንም ጥያቄዎች, ምክሮች እና የባህሪ ጥያቄዎችን ለመቀበል ደስተኛ ነኝ.

አቀማመጥ፣ አኒሜሽን!

እንደምን አረፈድክ። ዛሬ ስለዚህ ጉዳይ ልነግርዎ እፈልጋለሁ አስደሳች ውጤት፣ እንዴት ለስላሳ ማሸብለልወደ መልህቁ. ለምሳሌ፣ ይህ በገጹ አናት ላይ ያለ ሜኑ ሊሆን ይችላል፣ ጠቅ ሲደረግ፣ በተቀላጠፈ ሁኔታ ወደ ተጓዳኝ አካል ይሸብልላል።

በሌሎች ማረፊያ ገፆች ላይ ተመሳሳይ ተፅዕኖ አይተህ ይሆናል። ዛሬ እንዴት እንደሚተገበሩ ይማራሉ.

ጃቫስክሪፕት በመጠቀም ወደ መልሕቅ ለስላሳ ማሸብለል

በአንደኛው ፕሮጄክቱ ውስጥ፣ ተግባሩ ከምናሌው ንጥሎች ውስጥ አንዱን ሲጫኑ ወደ አንድ የተወሰነ አካል በማሸብለል ተመሳሳይ ውጤትን መተግበር ነበር።

በመገናኘት እንጀምር jquery ቤተ መጻሕፍትወደ ፕሮጄክታችን እና ለስላሳ ማሸብለል ኃላፊነት ወደሆነው ወደ ስክሪፕቱ የሚወስደውን መንገድ ይፃፉ-

ከዚህ ጋር ተገናኘን። አሁን በየትኛው ማሸብለል እንደሚከሰት መለያዎችን እና መልህቆችን ማስቀመጥ ያስፈልግዎታል።

ለግንባታ እና ለጽዳት ስራዎች ሙያዊ መሳሪያዎችን ለመከራየት በፕሮጀክቱ ውስጥ የነበረውን ምናሌ ምሳሌ እነግርዎታለሁ. እነሆ ምንጭ ኮድ:

የጽዳት እቃዎች
የግንባታ እቃዎች
አክሲዮን

እንደምታየው, ሁሉም ነገር መደበኛ እና ያለ ማታለያዎች ነው. ከምናሌው ጋር የሚዛመዱ እገዳዎች በማረፊያ ገጹ ላይ ተፈጥረዋል። የተለየ አገልግሎት ገለጹ። እነዚህ መደረግ ያለባቸው ብሎኮች ነበሩ ለስላሳ ሽግግር.

በጣቢያው ላይ ወደሚፈለገው ቦታ ለማሰስ በቀላሉ ወደ መለያው አገናኝ ያክሉ የሚፈለገው እገዳ. ይህን እናድርግ።

የጽዳት እቃዎች
የግንባታ እቃዎች
አክሲዮን

አሁን መለያዎቹን "ማጽዳት", "ግንባታ", "ድርጊት" ወደ ተጓዳኝ ብሎኮች ማዘጋጀት ያስፈልግዎታል. ለኔ እንዲህ መሰለኝ።

ለስም = "ማጽዳት" ባህሪ ትኩረት ይስጡ. ከመታወቂያው ጋር መመሳሰል አለበት። ስክሪፕቱ ራሱ ይኸውና፡-

$ (ተግባር () ( $ ("a.scrollto"). ንካ (ተግባር () (እናድርግ elementClick = $ (ይህ) .attr ("href") መድረሻ = $ (elementClick).offset () .ላይ; $. ("html: አይደለም(: አኒሜሽን), አካል: አይደለም (: የታነመ)"). አኒሜት (( scrollTop: መድረሻ), 1100);

እርስዎ ልክ እንደ እኔ ወደ ብዙ አካላት ማሸብለልን መተግበር ካለብዎት፣ ከዚያ መለያዎችን ብቻ ያስቀምጡ፣ በተመሳሳይ መንገድእና ያ ነው! በጣም ምቹ መንገድእና ለመተግበር ቀላል ነው እያልኩ አይደለም፣ ግን ይሰራል። ማንም ሊያቃልለው፣ ሊያሳጥረው ወይም በሆነ መንገድ ሊያሻሽለው ከቻለ በጣም አመሰግናለሁ። እንደ እኔ, ይህ ተፅዕኖ ለብዙዎች ጠቃሚ ሊሆን ይችላል.

እባክዎን በጽሁፉ መጀመሪያ ላይ የስክሪፕቱን ስም እና መንገድ እንደሚከተለው አመልክተናል።

ማለትም በጣቢያዎ ስር ስር js የሚባል ማህደር መፍጠር እና በውስጡ perehod.js የሚባል ፋይል ማስቀመጥ ያስፈልግዎታል። እና ከዚያ የስክሪፕት ኮዱን ራሱ ያስገቡ። ይህ እኔ ነኝ፣ እንደዚያ ከሆነ። አንድ ሰው ካልተረዳስ?

እና ለዛሬ ያ ብቻ ነው። አሁን እንደ ለስላሳ ገጽ ወደ መልሕቅ ማሸብለል እንደዚህ ያለ አሪፍ ውጤት እንዴት እንደሚተገበሩ ያውቃሉ። ሰላም ሁላችሁም!

P.s.: ወደ ውስጥ ላሉ ጥሪ ምላሽ ለሰጡን እናመሰግናለን ማህበራዊ አውታረ መረቦችለአዳዲስ መጣጥፎች ሀሳቦችን ያግዙ። ለመጻፍ ለምን እንደወሰንክ አላውቅም የግል መልዕክቶች, በአስተያየቶቹ ውስጥ መተው ይሻላል, ስለዚህ የበለጠ ደፋር የሆነ ሰው ቀድሞውኑ እንዳደረገው ካዩ ሌሎች ሰዎች ግምገማ ለመጻፍ ቀላል ይሆናል.

ዩ ይህ ዘዴጉድለት አለ፣ በጽሑፉ ውስጥ እነማውን ለመፍጠር የተጠቀምነው wow.js ጋር በደንብ አይሰራም። አንዳንድ እነማዎች አይጫወቱም እና በቦታቸው ባዶ ቦታ አለ። ይህንን እንዴት ማስተካከል እንደሚቻል የሚያውቅ ካለ፣ እባክዎን በአስተያየቶቹ ውስጥ ይፃፉ ወይም ይግቡ

ከጣቢያዎቹ በአንዱ ላይ ገጹን ወደ ላይኛው ክፍል ማሸብለል (ማሸብለል) መተግበር አስፈላጊ ነበር ለስላሳ እነማ. በ 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 ጊዜ ይቀንሳል፣ በመጨረሻም ያለምንም ችግር ዜሮ ይደርሳል። ይህ በሲኤስኤስ እነማዎች ውስጥ ያለውን ቀላል ንብረቱን መኮረጅ ነው።

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

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

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

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

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

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

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

ለምሳሌ

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

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

የችግሩ መግለጫ

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

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

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

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

#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