Document.querySelector("nav").addEventListener("click", function (e) ( var dest = e.target.href if (!dest || !(dest = dest.split("#"))) return e .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 / 1,000 var pt = performance.now() requestAnimationFrame(ฟังก์ชั่น f(t) ( console.log((p.scrollTop = st + d * (t - pt) / 1,000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) ถ้า (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) )) ));
* ( ขนาดกล่อง: border-box; ) nav ( ตำแหน่ง: เหนียว; ความกว้าง: 1.25em; ลอย: ซ้าย; ระยะขอบ: 8px; ) a ( จอแสดงผล: บล็อก; ความสูงบรรทัด: 1.25em; จัดตำแหน่งข้อความ: กึ่งกลาง; ) a:hover ( พื้นหลัง: silver; ) html, body, main ( height: 100%; Margin: 0; ) main ( overflow: auto; ) h1 ( Margin: 16px 0; พื้นหลัง: Antiquewhite; ) 1 2 3 4 5 6 7 8 9 10 1 2 อยู่ที่นั่นเลื่อนได้อย่างราบรื่น ระหว่างจุดยึดใน JS บริสุทธิ์? ฉันสงสัยว่ามีสคริปต์สำหรับการเลื่อนอย่างราบรื่นใน JS ล้วนๆ หรือไม่ ฉันกำลังสร้างเว็บไซต์โดยไม่มี
3โดยใช้ jQuery
4โดยใช้ jQuery
5โดยใช้ jQuery
6โดยใช้ jQuery
7โดยใช้ jQuery
8โดยใช้ jQuery
9โดยใช้ jQuery
10โดยใช้ jQuery
มีการเลื่อนอย่างราบรื่นระหว่างจุดยึดใน JS บริสุทธิ์หรือไม่ ฉันสงสัยว่ามีสคริปต์สำหรับการเลื่อนอย่างราบรื่นใน JS ล้วนๆ หรือไม่ ฉันกำลังสร้างเว็บไซต์โดยไม่ใช้ jQuery ในเมื่อเร็วๆ นี้
แอนิเมชันที่เล่นเมื่อคุณเลื่อนหน้ากำลังได้รับความนิยมมากขึ้น อย่างไรก็ตาม ฉันสังเกตเห็นว่าเบราว์เซอร์ส่วนใหญ่ไม่ได้ออกแบบมาสำหรับแอนิเมชั่นประเภทนี้ การเลื่อนหน้าด้วยเมาส์จะไม่ราบรื่น (เช่นใน Firefox) แต่เป็นขั้นตอน ส่งผลให้การเลื่อนภาพเคลื่อนไหวบนหน้าต่างๆ กระตุกเช่นกัน ในความคิดของฉัน ปัญหาไม่ได้อยู่ที่เบราว์เซอร์เลย แต่อยู่ที่ปลั๊กอินที่ใช้สร้างภาพเคลื่อนไหวเหล่านี้ เพราะพวกเขาคือคนที่ยอมให้กระโดดกะทันหัน ฉันเชื่อว่าสำหรับแอนิเมชั่นใดๆ ควรมีความเร็วในการเล่นสูงสุดซึ่งจะทำให้แอนิเมชั่นมีความราบรื่น และผู้ใช้จะสามารถเข้าใจสิ่งที่เกิดขึ้นบนเพจได้ หากคุณเห็นด้วยกับฉันให้เคลื่อนไหวอย่างราบรื่นและไม่กระตุกอยู่ใต้แมว ในบทความนี้ เราจะพูดถึงปลั๊กอินสำหรับสร้างภาพเคลื่อนไหวที่ควบคุมด้วยการเลื่อน ซึ่งฉันเรียกว่า Scrollissimo อะนาล็อกที่ใกล้เคียงที่สุดคือปลั๊กอิน ScrollMagic จากพวกเขามีจุดประสงค์และความจริงที่ว่า Greensock ได้รับเลือกให้เป็นเอ็นจิ้นแอนิเมชั่น หากคุณยังไม่คุ้นเคยกับมันด้วยเหตุผลบางประการ บางทีเพื่อทำความเข้าใจทุกสิ่งที่เกิดขึ้นอย่างถ่องแท้ คุณควรอ่านบทความเกี่ยวกับ Greensock ที่ได้รับการตีพิมพ์ในHabréแล้ว ตัวอย่างเช่นอันนี้
นอกจากความคล้ายคลึงกันแล้ว ปลั๊กอินเหล่านี้ยังมีความแตกต่างอีกด้วย แต่ฉันอยากจะเน้นสิ่งสำคัญเป็นพิเศษ – แอนิเมชั่นที่ราบรื่น เพื่อไม่ให้ฟังดูไม่มีมูล นี่คือข้อพิสูจน์สำหรับคุณ หน้าแรก ScrollMagic ยังยืนยันคำพูดของฉัน
วิธีการใช้งาน เชื่อมต่อ ในการเริ่มใช้งาน Scrollissimo คุณต้องทำสองสิ่ง ขั้นแรก เชื่อมต่อ Greensock สามารถเชื่อมต่อได้เพียงเล็กน้อยเท่านั้น ห้องสมุดที่จำเป็น(TweenLite, TimelineLite และ CSS):
หรือเชื่อมต่อหนึ่งไลบรารีที่มีทั้งหมดข้างต้น:
และประการที่สอง เราเชื่อมต่อกับ Scrollissimo เอง ห้องสมุดมีให้จากพื้นที่เก็บข้อมูล และสำหรับผู้ใช้ Bower ก็สามารถติดตั้งได้ด้วยคำสั่ง
Bower ติดตั้ง scrollissimo
ดาวน์โหลดแล้ว เชื่อมต่อทันที:
คุณสามารถเลือก (แต่ไม่จำเป็น) รวม jQuery เพื่อความสะดวกของคุณเอง ต่อไปในบทความผมจะเขียนโค้ดโดยใช้มันเพื่อให้อ่านง่ายยิ่งขึ้น
ฉันได้จัดเตรียมความเป็นไปได้ในการทริกเกอร์ Scrollissimo ไม่เพียงแต่ในการเลื่อนทั้งหน้าเท่านั้น แต่ยังรวมถึงเหตุการณ์อื่น ๆ ด้วย แต่ในสถานการณ์ส่วนใหญ่ที่คุณต้องสมัครรับเหตุการณ์การเลื่อนหน้า:
$(หน้าต่าง).scroll(function())( Scrollissimo.knock(); ));
ตอนนี้ ทุกครั้งที่มีเหตุการณ์การเลื่อนเกิดขึ้น Scrollissimo จะคำนวณความคืบหน้าปัจจุบันของแอนิเมชั่นและเล่น
หมายเหตุ: หากคุณไม่ต้องการให้ปลั๊กอินนับการเลื่อนหน้า คุณสามารถส่งค่าคุณสมบัติ scrollTop ไปยังเมธอด knock() ได้ ตัวอย่างเช่น Scrollissimo.knock(1000) จะบอกปลั๊กอินว่าคุณได้เลื่อนไปแล้ว หน้า 1000 พิกเซล .
หมายเหตุ: เพื่อรองรับอุปกรณ์สัมผัส มีอะแดปเตอร์สัมผัส scrollissimo.touch.js ซึ่งต่อสู้กับการค้างหน้าขณะเลื่อน
เพียงเท่านี้คุณก็สามารถสร้างภาพเคลื่อนไหวได้โดยตรงแล้ว! Scrollissimo สามารถสร้างภาพเคลื่อนไหวฝาแฝด (ภาพเคลื่อนไหวเดี่ยว) และไทม์ไลน์ (คิวของภาพเคลื่อนไหวเดี่ยว) เริ่มจากฝาแฝดกันก่อน
แอนิเมชั่นที่ง่ายที่สุด สมมติว่าเรามี div สีแดงที่สวยงามที่เรียกว่า Divy เขาต้องการที่จะเติบโตจริงๆ แต่จนถึงตอนนี้เขามีขนาดกว้างและสูงเพียง 50 พิกเซลเท่านั้น
#Divy( ตำแหน่ง: คงที่; บน: 0; ซ้าย: 0; ความสูง: 50px; ความกว้าง: 50px; พื้นหลัง: สีแดง; )
มาทำให้หลังจาก 1,000 พิกเซลจากจุดเริ่มต้นของหน้ากลายเป็นความกว้าง 300 พิกเซล ในการทำสิ่งนี้ ขั้นแรกเราจะสร้าง Tween ที่เกี่ยวข้อง เหมือนกับว่าเรากำลังสร้างแอนิเมชั่นปกติโดยใช้ Greensock:
Var divyTween = TweenLite ใหม่($("#Divy"), 1,000, ( ความกว้าง: 300 ));
หมายเหตุ: ดังที่คุณสังเกตเห็น ความแตกต่างเพียงอย่างเดียวจากภาพเคลื่อนไหว Greensock มาตรฐานคือ เราระบุระยะเวลาของภาพเคลื่อนไหวไม่ใช่เป็นวินาที แต่เป็นพิกเซล (ในกรณีของเราคือ 1,000)
ยอดเยี่ยม! สิ่งที่เหลืออยู่ก็คือให้แฝดนี้ถูกกลืนกินโดย Scrollissimo:
Scrollissimo.add(divyTween, 0, 6);
ทีนี้ลองช้าลงแล้วดูที่บรรทัดนี้ อาร์กิวเมนต์แรกคือ Tween แบบเดียวกับที่เราสร้างขึ้น อาร์กิวเมนต์ที่สองมาจากตำแหน่งที่จะเริ่มภาพเคลื่อนไหว ในกรณีของเรา นี่คือจุดเริ่มต้นของหน้า (0 พิกเซล) อาร์กิวเมนต์ที่สามยังคงอยู่ นี่คือที่ที่เราไปถึง คุณสมบัติหลักซึ่งทำให้ Scrollissimo แตกต่างจากปลั๊กอินทั่วไป อาร์กิวเมนต์ที่สามคือความเร็วในการเล่นภาพเคลื่อนไหวสูงสุด ความเร็วนี้วัดเป็นนามธรรม หน่วยไร้มิติและเลือก "ด้วยตา" ฉันจะตอบคำถามทันที “จะเกิดอะไรขึ้นถ้าคุณไม่ระบุพารามิเตอร์ที่สาม” ถ้าคุณไม่ระบุ ความเร็วสูงสุดแล้วมันก็จะไม่มีอยู่จริง แอนิเมชันนี้จะเล่นในลักษณะเดียวกับที่เล่นโดยปลั๊กอินทั่วไป
Var divyTimeline = TimelineLite ใหม่ (); divyTimeline.to($("#Divy"),1000 ( กว้าง: 300 )); divyTimeline.to($("#Divy"), 1,000, ( ส่วนสูง: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
นั่นคือทั้งหมดที่คุณต้องการเพื่อสร้างภาพเคลื่อนไหวแบบเลื่อนได้สำเร็จโดยใช้ Scrollissimo นี่คือที่ฉันอาจจะจบบทความ โดยสรุป ฉันจะบอกว่าปลั๊กอินอยู่ระหว่างการพัฒนา มีพื้นที่ให้เติบโตและปรับปรุง ดังนั้นฉันยินดีที่จะรับคำถาม คำแนะนำ และคำขอคุณสมบัติต่างๆเค้าโครงเคลื่อนไหว!
สวัสดีตอนบ่าย. วันนี้ฉันอยากจะบอกคุณเกี่ยวกับเรื่องนี้ เอฟเฟกต์ที่น่าสนใจ, ยังไง เลื่อนได้อย่างราบรื่นไปที่จุดยึด ตัวอย่างเช่น อาจเป็นเมนูที่ด้านบนของหน้าซึ่งเมื่อคลิกแล้วจะเลื่อนไปยังองค์ประกอบที่เกี่ยวข้องได้อย่างราบรื่น
คุณอาจเคยเห็นผลลัพธ์ที่คล้ายกันกับหน้า Landing Page อื่นๆ วันนี้คุณจะได้เรียนรู้วิธีการใช้งาน
การเลื่อนอย่างราบรื่นเพื่อยึดโดยใช้จาวาสคริปต์ในโปรเจ็กต์หนึ่ง งานคือการใช้เอฟเฟกต์ที่คล้ายกันด้วยการเลื่อนไปยังองค์ประกอบบางอย่างอย่างราบรื่นเมื่อคลิกที่รายการเมนูรายการใดรายการหนึ่ง
เริ่มต้นด้วยการเชื่อมต่อ ไลบรารี jqueryในโครงการของเราและเขียนเส้นทางไปยังสคริปต์ที่รับผิดชอบในการเลื่อนอย่างราบรื่น:
เราจัดการกับเรื่องนี้ ตอนนี้คุณต้องใส่ป้ายกำกับและจุดยึดที่จะเกิดการเลื่อน
ฉันจะเล่าตัวอย่างเมนูที่อยู่ในโครงการเช่าอุปกรณ์มืออาชีพในงานก่อสร้างและทำความสะอาด นี่มันคือ ซอร์สโค้ด:
- อุปกรณ์ทำความสะอาด
- อุปกรณ์ก่อสร้าง
- คลังสินค้า
อย่างที่คุณเห็นทุกอย่างเป็นมาตรฐานและไม่มีลูกเล่น บล็อกที่สอดคล้องกับเมนูจะถูกสร้างขึ้นบนหน้า Landing Page ในภายหลัง พวกเขาเปิดเผยบริการเฉพาะ นี่คือบล็อกที่ต้องทำ การเปลี่ยนแปลงที่ราบรื่น.
เพื่อนำทางไปยังสถานที่ที่ต้องการบนเว็บไซต์ เพียงเพิ่มลิงก์ไปยังตัวระบุ บล็อกที่ต้องการ- มาทำสิ่งนี้กันเถอะ
- อุปกรณ์ทำความสะอาด
- อุปกรณ์ก่อสร้าง
- คลังสินค้า
ตอนนี้คุณต้องตั้งค่าตัวระบุ "การทำความสะอาด", "การสร้าง", "การกระทำ" ให้กับบล็อกที่เกี่ยวข้อง สำหรับฉันมันดูเหมือนว่านี้:
ให้ความสนใจกับแอตทริบิวต์ name="cleaning" มันจะต้องตรงกับรหัส นี่คือสคริปต์:
$(function () ( $("a.scrollto").click(function () ( ให้ elementClick = $(this).attr("href") ให้ปลายทาง = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: ปลายทาง ), 1100 ));
หากคุณเช่นฉัน จำเป็นต้องใช้การเลื่อนไปยังองค์ประกอบต่างๆ จากนั้นใส่ตัวระบุ ในทำนองเดียวกันและนั่นมัน! มาก วิธีที่สะดวกและใช้งานง่าย ฉันไม่ได้บอกว่ามันดีที่สุด แต่มันได้ผล หากใครสามารถทำให้มันง่ายขึ้น ย่อให้สั้นลง หรือปรับปรุงมันได้ ฉันจะขอบคุณคุณมาก สำหรับฉันเอฟเฟกต์นี้สามารถเป็นประโยชน์กับหลาย ๆ คนได้
โปรดทราบว่าในตอนต้นของบทความเราได้ระบุชื่อและเส้นทางของสคริปต์ดังนี้:
นั่นคือ คุณต้องสร้างโฟลเดอร์ในรูทของไซต์ของคุณชื่อ js และวางไฟล์ชื่อ perehod.js ลงไป จากนั้นใส่โค้ดสคริปต์ลงไป นี่คือฉัน เผื่อไว้ ถ้าใครไม่เข้าใจล่ะ?
และนั่นคือทั้งหมดสำหรับวันนี้ ตอนนี้คุณรู้วิธีใช้เอฟเฟกต์สุดเจ๋งเช่นการเลื่อนหน้าไปที่จุดยึดอย่างราบรื่น ลาก่อนทุกคน!
ป.ล. : ขอบคุณผู้ที่ตอบรับสายเข้ามา เครือข่ายทางสังคมความช่วยเหลือเกี่ยวกับแนวคิดสำหรับบทความใหม่ ฉันไม่รู้ว่าทำไมคุณถึงตัดสินใจเขียนถึง ข้อความส่วนตัวทิ้งไว้ในความคิดเห็นจะดีกว่า ดังนั้น คนอื่นจะเขียนรีวิวได้ง่ายขึ้นหากเห็นว่ามีคนที่กล้าหาญกว่านี้ได้ทำไปแล้ว
คุณ วิธีนี้มีข้อเสียคือใช้งานไม่ได้กับ wow.js ซึ่งเราใช้สร้างแอนิเมชั่นในบทความ ภาพเคลื่อนไหวบางรายการไม่เล่นและมีพื้นที่ว่างแทน หากใครรู้วิธีแก้ไขปัญหานี้โปรดเขียนในความคิดเห็นหรือใน
ในไซต์ใดไซต์หนึ่งจำเป็นต้องใช้การเลื่อน (เลื่อน) หน้าเว็บไปด้านบน แอนิเมชั่นที่ราบรื่น- ใน jquery ทำได้โดยใช้คำสั่งเดียว:
$("html,body").animate((scrollTop:0),500);
แต่ใน JavaScript ล้วนๆ มันซับซ้อนกว่าเล็กน้อย:
วาร์ต;
ฟังก์ชั่น scrolltop() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
ถ้า(บนสุด>0) (
window.scrollTo(0,Math.floor(บน/1.5));
t = setTimeout("scrolltop()",30);
) อื่น (
เคลียร์ไทม์เอาต์(t);
}
กลับเท็จ;
}
ตัวแปร สูงสุดเท่ากับระยะการเลื่อนหน้าปัจจุบันเป็นพิกเซล ทุกๆ 30 มิลลิวินาที ค่านี้จะลดลง 1.5 เท่า และในที่สุดก็ถึงศูนย์อย่างราบรื่น นี่เป็นการเลียนแบบคุณสมบัติการค่อยๆ เปลี่ยนในภาพเคลื่อนไหว CSS
หากคุณต้องการเลื่อนหน้าเป็นเส้นตรงโดยไม่ต้องเร่งความเร็ว ให้เขียนดังนี้:
window.scrollTo(0,-20);
จากนั้นหน้าจะเลื่อนไปด้านบนด้วยความเร็ว 20 พิกเซลต่อ 30 ms
อะไรทำให้เกิดช่วงเวลา 30 มิลลิวินาที? อัตรารีเฟรชหน้าจอที่สะดวกสบายอยู่ที่ประมาณ 30 เฟรมต่อวินาที ซึ่งหมายความว่าระยะเวลาของแต่ละเฟรมคือ 30 มิลลิวินาที เพื่อความราบรื่นสูงสุด คุณสามารถสร้าง 60 เฟรมต่อวินาที จากนั้นระยะหมดเวลาควรอยู่ที่ประมาณ 15 ms แต่สิ่งนี้อาจล่าช้าบนอุปกรณ์ที่อ่อนแอ
ขอขอบคุณผู้เขียนเว็บไซต์หากคุณต้องการสนับสนุนโครงการ ให้ใช้แพลตฟอร์ม Yandex.Money ซึ่งเป็นความลับและปลอดภัย
ตามที่คุณอาจเดาได้แล้วบทความนี้จะไม่พูดถึงทิวลิปและดอกกุหลาบหรือวิธีปลูกต้นแอปเปิ้ลจากดอกคาโมไมล์ (ดังนั้นนี่ไม่ใช่สถานที่สำหรับมิคูริเนียนรุ่นเยาว์ :-) แต่เราจะพูดถึงการเปลี่ยนสีขององค์ประกอบ ของหน้าเว็บเกี่ยวกับการไหลของสีหนึ่งไปยังอีกสีหนึ่งอย่างราบรื่นเช่น มาพูดถึงเอฟเฟ็กต์สีจางกัน
ตัวอย่างเริ่มต้นด้วยตัวอย่าง: วางเมาส์เหนือรูปภาพแล้วเลื่อนเคอร์เซอร์ออกไป
หากคุณไม่สนใจรายละเอียดเชิงทฤษฎีแต่ต้องการ โซลูชั่นสำเร็จรูปแล้วถึงคุณ
คำชี้แจงของปัญหามีสองสี: สีเริ่มต้นและสีสุดท้าย
มีความจำเป็นต้องค้นหาสีกลางโดยการใช้สีทีละสีกับองค์ประกอบบนหน้าเราจะได้รับการเปลี่ยนจากสีเริ่มต้นไปเป็นสีสุดท้ายได้อย่างราบรื่น คุณควรค้นหาด้วยว่าควรมีสีกลางเหล่านี้กี่สี และหลังจากเวลาใดที่สีกลางหนึ่งควรเปลี่ยนเป็นสีอื่น
มองลึกเข้าไปในประเด็นตัวอย่างเช่น สีขาวเป็นสีเริ่มต้น และสีส้มแดงเป็นสีสุดท้าย
| #FFFFFF | ? | ...ไม่... | ? | #FF4500 |
ตอนนี้เราต้องค้นหาสีระดับกลาง ดี. แต่ยังไงล่ะ! เราควรแก้ไขปัญหานี้อย่างไร? ในการทำเช่นนี้ มาจำ (หรือค้นหา :-) ว่าสีที่เกิดขึ้นบนหน้าจอมอนิเตอร์เป็นอย่างไร สีใดๆ บนหน้าจอมอนิเตอร์ถูกสร้างขึ้นจากแม่สีสามสี: สีแดง (สีแดง) สีเขียว (สีเขียว) และสีน้ำเงิน (สีน้ำเงิน) โดยการผสมสีเหล่านั้น (เช่น รุ่นสี RGB) และสีจะถูกระบุบนหน้าเว็บหรือตามค่าตัวเลขในเดียวกัน ระบบ RGBหรือตัวอักษรของสีที่มีชื่อ (เช่น สีขาวสำหรับสีขาว สีแดงสำหรับสีแดง ฯลฯ แต่ไม่ใช่ทุกสีที่มีชื่อ) ซึ่งยังคงชี้ไปที่ค่าตัวเลข แต่เราจะไม่พิจารณาระบุสีตามชื่อเนื่องจากชื่อถูกประดิษฐ์ขึ้นเพื่อความสะดวกในการท่องจำของมนุษย์ แต่ในกรณีของเราจะสร้างความไม่สะดวกในการคำนวณเพราะ ยังคงต้องมีการแปลเป็นรูปแบบตัวเลข คุณสามารถตั้งค่าตัวเลขของสีได้สองวิธี: เลขฐานสิบหกและฟังก์ชัน
- ในรูปแบบเลขฐานสิบหก ค่า RGB คือ รูปแบบถัดไป: อักขระ "#" ตามด้วยอักขระฐานสิบหกสามหรือหกตัวทันที ค่า RGB สามหลัก (#rgb) จะถูกแปลงเป็นลำดับหกหลัก (#rrggbb) โดยการทำซ้ำตัวเลขแทนที่จะเพิ่มศูนย์ ตัวอย่างเช่น #fb0 ขยายเป็น #ffbb00 ดังนั้นจึงสามารถระบุสีขาว (#ffffff) ในรูปแบบที่สั้นกว่าได้ (#fff)
- ในการแสดงฟังก์ชัน รูปแบบการบันทึกค่า RGB คือ มุมมองถัดไป: สตริง "rgb(" ตามด้วยรายการค่าจริง (หรือจำนวนเต็ม หรือเปอร์เซ็นต์) ที่คั่นด้วยเครื่องหมายจุลภาค 3 ค่า ตามด้วยวงเล็บ ")" ทันที ค่าจำนวนเต็ม 255 เทียบเท่ากับค่าเปอร์เซ็นต์ 100% และ ค่าเลขฐานสิบหก F หรือ FF ดังนั้น rgb(255,255,255) = rgb(100%,100%,100%) = #FFF
ดังนั้นสีที่กำหนดในรูปแบบตัวเลขจะให้ค่าของสีส่วนประกอบซึ่งท้ายที่สุดแล้วทำให้เรามีโอกาสโดยการเปลี่ยนสีหลักของสีเริ่มต้นแต่ละสีเพื่อให้ได้สีที่สองซึ่งเป็นสีสุดท้าย ถ้าเราพิจารณาของเรา ตัวอย่างที่เป็นรูปธรรมจากนั้นเรามีดังต่อไปนี้ (ค่าในระบบทศนิยมระบุอยู่ในวงเล็บ):
| #FFFFFF | = | เอฟเอฟ (255) | เอฟเอฟ (255) | เอฟเอฟ (255) |
| 0 | – ซีอี (206) | – เอฟเอฟ (255) | ||
| #FF4500 | = | เอฟเอฟ (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 (เอเอ) |
| #FF7655 | = | 255 - 0 | 255 - 206*2/3 = 118 (76) | 255 - 255*2/3 = 85 (55) |
| #FF4500 | = | เอฟเอฟ (255) | 45 (49) | 0 |
ดังนั้นเราจึงได้เรียนรู้การคำนวณสีระดับกลาง ยังคงต้องชี้แจงความแตกต่างอีกประการหนึ่งเพื่อให้บุคคลสังเกตเห็นสีกลางจำเป็นต้องทำการหน่วงเวลาระหว่างการเปลี่ยนสีมิฉะนั้นการเปลี่ยนแปลงจะเกิดขึ้นเร็วมากจนผู้ใช้จะไม่สังเกตเห็นสีกลาง
ตอนนี้เรามีภาพรวมที่ชัดเจนแล้ว และเราก็ไปเขียนโค้ดกันต่อได้ มีสีเริ่มต้นและสีสิ้นสุด เราสามารถคำนวณสีกลางได้ n สี (โดยที่ n ถูกเลือกโดยพลการ) และมีค่าหน่วงเวลา t (โดยที่ t ถูกเลือกโดยพลการ) ดังนั้นอัลกอริทึมจึงเป็นดังนี้: กำหนดสีกลางสีแรกให้กับองค์ประกอบบนเว็บเพจ, หน่วงเวลาด้วยจำนวน t, กำหนดสีกลางที่สองให้กับองค์ประกอบ, ทำการหน่วงเวลา, ..., กำหนดสีกลางที่ n ให้กับองค์ประกอบซึ่งเป็นสีสุดท้าย
การนำไปปฏิบัติตัวอย่างเช่น เรามาสร้างปุ่มที่พื้นหลังเปลี่ยนจากสีขาวเป็นสีส้มแดงเมื่อคลิก
ไปกันเลย... ความคิดผิดประการแรกที่อาจนึกถึงคือการคำนวณสีกลางในลูป โดยทำให้เกิดความล่าช้าหลังจากการวนซ้ำแต่ละครั้ง
ฟังก์ชั่น fade() ( for (var i = 1; i
