ความเป็นมาและบทนำ
หากคุณกำลังเรียกดูเว็บไซต์สมัยใหม่บนคอมพิวเตอร์หรือโทรศัพท์มือถือคุณอาจเคยพบว่าเมื่อคุณเลื่อนลง / ขึ้นเว็บไซต์ดูเหมือนว่าทั้งหน้าจอจะเคลื่อนไปตามทิศทางของการเลื่อน หากนี่คือเอฟเฟกต์ในพื้นหลังข้อมูลที่อยู่เบื้องหน้าจะเปลี่ยนไปเช่นกันเมื่อคุณเลื่อน เอฟเฟกต์นี้สามารถอธิบายสั้น ๆ ได้ว่าเป็น Parallax Scrolling
การเลื่อน
ให้เราเข้าใจความหมายโดยการเลื่อน เมื่อคุณกำลังดูหน้าเว็บการดำเนินการสำหรับการเรียกดูหน้าเว็บในทิศทางใดก็ได้ (ขึ้นลงซ้ายและขวา) เรียกว่าการเลื่อน
โดยปกติแล้วหากคุณเป็นผู้ใช้คอมพิวเตอร์เดสก์ท็อปการดำเนินการนี้ทำได้โดยใช้ล้อเลื่อนบนเมาส์
ประวัติศาสตร์
ให้เราดูคำว่า - เลื่อน ในสมัยก่อนในการส่งข้อความถึงคนอื่น ๆ ซึ่งอยู่ห่างไกลกันมากจะใช้ม้วนกระดาษที่เขียนด้วยลายมือ ม้วนเหล่านี้ดูเหมือนดังที่แสดงด้านล่าง -
ลองนึกภาพการกระทำของบุคคลที่ถือม้วนหนังสือ หากต้องการอ่านเนื้อหาทั้งหมดบุคคลนั้นจะต้อง "เลื่อน" และม้วนต่อไป การใช้ม้วนหนังสือเหล่านี้เพื่อรักษาข้อความบันทึกหรือการตัดสินใจ เมื่อเวลาผ่านไปการใช้ม้วนหนังสือก็เพิ่มขึ้นเนื่องจากเตรียมจากวัสดุการเขียนที่แตกต่างกันเช่นปาปิรัสกระดาษรองและกระดาษ
เมื่อคอมพิวเตอร์พัฒนาขึ้นการประมวลผลและการจัดเก็บเอกสารตารางและรูปภาพที่มีขนาดใหญ่มากก็เป็นไปได้ บางครั้งข้อมูลก็มากจนขนาดหน้าจอไม่เพียงพอที่จะนำเสนอข้อมูลต่อผู้ใช้ เมื่อข้อมูลที่จะแสดงมีขนาดใหญ่กว่าขนาดของหน้าต่างหรือพื้นที่แสดงข้อมูลจะยังคงซ่อนอยู่ สิ่งนี้จำเป็นสำหรับวิธีการขยายพื้นที่หน้าจอ
ตัวเลือกบางอย่างในการขยายหน้าจอแสดงอยู่ด้านล่าง -
- เพื่อเพิ่มขนาดหน้าจอ
- เพื่อลดขนาดข้อมูล
- เพื่อใช้การเลื่อน
กลไกการเลื่อนนี้มีความสำคัญมากขึ้นสำหรับผู้ที่ทำงานกับการออกแบบกราฟิกและการแก้ไขรูปภาพ
แหล่งกำเนิดการเลื่อนพารัลแลกซ์
ให้เราดูประวัติของการเลื่อนพารัลแลกซ์ อันดับแรกเราจะเข้าใจว่าคำว่าพารัลแลกซ์หมายถึงอะไร คำว่าพารัลแลกซ์มาจากคำภาษากรีกπαράλλαξις (parallaxis) ซึ่งหมายถึงการสลับกัน
หากเรากำลังดูวัตถุจากมุมหนึ่งวัตถุจะปรากฏในลักษณะเฉพาะ แต่ถ้าคุณกำลังเคลื่อนย้ายวัตถุเดียวกันจากตำแหน่งที่ต่างกันจะมีการเคลื่อนไหวของวัตถุอย่างชัดเจน ปรากฏการณ์นี้เรียกว่าพารัลแลกซ์
ตอนนี้เราได้เข้าใจที่มาและความเป็นมาของ Parallax แล้วให้เราเข้าใจประวัติและแนวคิดของการเลื่อนแบบ Parallax ในการออกแบบเว็บ
คำจำกัดความ
อ้างอิงจาก Wikipedia - Parallax scrolling เป็นเทคนิคหนึ่งในคอมพิวเตอร์กราฟิกที่ภาพพื้นหลังเคลื่อนผ่านกล้องช้ากว่าภาพเบื้องหน้าสร้างภาพลวงตาของความลึกในฉาก 2 มิติและเพิ่มความรู้สึกดื่มด่ำในประสบการณ์เสมือนจริง
การเลื่อนแบบพารัลแลกซ์ถูกนำมาใช้ในช่วงแรก ๆ ของภาพเคลื่อนไหว สตูดิโอแอนิเมชั่นหลายแห่ง (เช่นดิสนีย์) ใช้กล้องหลายตัวเพื่อให้ได้เอฟเฟกต์พารัลแลกซ์
เมื่อเทคโนโลยีคอมพิวเตอร์กราฟิกพัฒนาไปพร้อมกับเฟรมเวิร์กล้ำยุคเช่น JavaScript นักออกแบบเว็บและนักพัฒนาจึงสามารถสร้างเว็บไซต์ที่มีประสบการณ์มากมาย แม้ว่าการเลื่อนแบบพารัลแลกซ์จะเริ่มต้นด้วยเลเยอร์สองชั้น แต่ก็ถูกนำไปสู่อีกระดับด้วยแถบเลื่อนในคอมพิวเตอร์ เทคนิคนี้ยังคงเหมือนเดิม แต่เนื่องจากการประยุกต์ใช้สำหรับการเลื่อนทำให้เกิดประสบการณ์ที่ไม่เหมือนใคร
ตัวอย่าง
การเลื่อนพารัลแลกซ์ถูกนำมาใช้อย่างกว้างขวางในเว็บไซต์สมัยใหม่ เนื่องจากการเลื่อนพารัลแลกซ์สามารถนำไปใช้กับโทรศัพท์มือถือและไซต์เดสก์ท็อปได้ในคราวเดียวความนิยมของไซต์ดังกล่าวจึงเพิ่มสูงขึ้นในช่วงไม่กี่ปีที่ผ่านมา
ตัวอย่างบางส่วนของเว็บไซต์ที่ใช้การเลื่อนแบบพารัลแลกซ์มีดังต่อไปนี้ -
แบร์กริลล์
ในขณะที่ภาพเคลื่อนไหวดำเนินไปคุณจะสามารถดูได้ว่าเนื้อหาของเว็บไซต์มีการโต้ตอบอย่างไร เมื่อคุณเลื่อนไปข้างหน้าข้อมูลจะเปิดเผยมากขึ้นเรื่อย ๆ
ทำให้เงินของคุณมีความสำคัญ
เพื่อแนะนำผู้อ่านเกี่ยวกับประโยชน์ของเครดิตยูเนี่ยนไซต์นี้จะนำคุณผ่านโครงเรื่อง ในขณะที่คุณเลื่อนไปข้างหน้าข้อมูลจะถูกเปิดเผยในลักษณะที่ไม่เหมือนใคร
อินโฟเควสท์อินโฟกราฟิก
การเดินทางของพนักงานในการค้นหาข้อมูลที่สำคัญในที่ทำงานของเขาแสดงให้เห็นโดยใช้ประสบการณ์การเลื่อน
GitHub 404
สิ่งนี้แตกต่างจากประสบการณ์พารัลแลกซ์ปกติเล็กน้อยวัตถุที่อยู่ด้านบนสุดของหน้าจอจะเคลื่อนที่เมื่อคุณเลื่อนตัวชี้เมาส์ไปที่วัตถุนั้น
การประยุกต์ใช้การเลื่อนแบบพารัลแลกซ์
ถึงตอนนี้ควรมีความชัดเจนจากคำจำกัดความและภูมิหลังว่าการเลื่อนแบบพารัลแลกซ์มีประโยชน์ในสื่อดิจิทัลที่หลากหลาย แอปพลิเคชั่นบางตัวมีการเลื่อนแบบพารัลแลกซ์อยู่ด้านล่าง -
การออกแบบเกม
การเลื่อนแบบ Parallax ใช้กันอย่างแพร่หลายในการออกแบบเกม ตัวละครต้องเคลื่อนที่โดยสัมพันธ์กับพื้นหลังและด้วยการควบคุมของผู้เล่นโดยใช้เมาส์และคีย์บอร์ดประสบการณ์ทั้งหมดจึงต้องเปลี่ยนไป การออกแบบเกมเป็นวิธีดั้งเดิม แต่ทันสมัยมากในการใช้การเลื่อนแบบพารัลแลกซ์
เว็บไซต์
เพื่อให้ผู้ใช้เข้าถึงเว็บไซต์ประสบการณ์ที่ไม่หยุดนิ่งและแตกต่างกันจึงเป็นสิ่งสำคัญ ดังที่คุณอาจสังเกตเห็นจากตัวอย่างของเว็บไซต์ที่กล่าวถึงข้างต้นการเลื่อนแบบพารัลแลกซ์จะเพิ่มเข้าไปในเนื้อหาเนื่องจากการนำเสนอในลักษณะโต้ตอบ
บทนี้พูดถึงแนวคิดของการออกแบบเว็บและข้อดีของการใช้ Parallax scroll ในการออกแบบเว็บ
พื้นหลังการออกแบบเว็บไซต์
ตั้งแต่จุดเริ่มต้นของ 20 THศตวรรษที่สื่อกระดาษได้เข้าแข่งขันตัดคอเนื่องจากสื่อดิจิตอล สื่อดิจิทัลรวมถึงสิ่งที่เราเห็นบนอินเทอร์เน็ตและด้วยเหตุนี้นิตยสารพันธมิตรที่มาพร้อมกัน
จดหมายข่าวที่คุณได้รับเป็นส่วนหนึ่งของการสมัครสมาชิกรายสัปดาห์ / รายเดือนจะรวมอยู่ในสื่อดิจิทัลด้วย โดยพื้นฐานแล้วสื่อดิจิทัลขึ้นอยู่กับอุปกรณ์เคลื่อนที่และเดสก์ท็อปเป็นหลัก สร้างความแตกต่างเมื่อคุณสามารถดูเนื้อหาบนมือถือ (มือถือ) และอุปกรณ์เดสก์ท็อป วิธีแสดงเนื้อหาบนอุปกรณ์อย่างใดอย่างหนึ่งรูปแบบเฉพาะของการออกแบบเนื้อหาอยู่ที่การเล่น
รูปแบบของการออกแบบนี้เรียกว่า Web Designing. จากมุมมองด้านการออกแบบหรือการเขียนโค้ดเมื่อผู้ออกแบบหน้าเว็บกำหนดที่จะสร้างหน้าเว็บเขา / เธอจะคำนึงถึงอุปกรณ์เคลื่อนที่ด้วยเช่นกัน
อ้างอิงจาก Wikipedia Web design ครอบคลุมทักษะและสาขาวิชาต่างๆมากมายในการผลิตและการบำรุงรักษาเว็บไซต์ หนึ่งในทักษะดังกล่าวคือการออกแบบประสบการณ์ที่มีประสิทธิภาพสำหรับผู้ใช้ การออกแบบเว็บไซต์ให้ความสำคัญกับประสบการณ์นี้และเป็นวิธีที่เป็นระเบียบในการจัดเรียงเนื้อหาของหน้าและจัดสไตล์ที่แตกต่างกันให้กับพวกเขา
การออกแบบเว็บไซต์ประกอบด้วย - การออกแบบส่วนต่อประสานการออกแบบกราฟิกและการใช้มาตรฐานบางอย่างในการเขียนโค้ด งานนี้สามารถทำได้โดยบุคคลคนเดียวหรือโดยทีมงาน
มีเครื่องมือมากมายในตลาดที่จะทำให้งานนี้เป็นเรื่องง่าย แต่ก็ขึ้นอยู่กับทักษะความคิดสร้างสรรค์ในการสร้างหน้าตาของหน้าเว็บ
การออกแบบเว็บไซต์สมัยใหม่
ด้วยวิวัฒนาการของเทคโนโลยีทำให้เกิดความรู้มากมาย อินเทอร์เน็ตกลายเป็นสิ่งหนึ่งและทำให้คุณภาพชีวิตของเราสูงขึ้นอย่างรวดเร็ว ณ จุดใดจุดหนึ่งข้อมูลมากขึ้นกำลังถูกประมวลผลโดยผู้ใช้อินเทอร์เน็ตโดยเฉลี่ย ข้อมูลนี้สามารถอยู่ในรูปแบบของเว็บไซต์บนคอมพิวเตอร์เดสก์ท็อปหรือจากอุปกรณ์พกพา แท็บเล็ตหรือโทรศัพท์มือถือ
แม้ว่าข้อมูลมากมายจะพยายามดึงดูดความสนใจของผู้ใช้ แต่ก็เห็นได้ชัดว่าในฐานะคนที่ออกแบบประสบการณ์บนเว็บ there are only 3 seconds allocated to pass the message across.
หนึ่งจัดการกับสิ่งนี้อย่างไร? การส่งผ่านข้อความนั้นสำคัญกว่าเพราะเป็นแหล่งที่มาของการออกแบบเว็บใด ๆ คุณต้องการสร้างเว็บไซต์ที่สื่อสารในขณะเดียวกันก็ต้องดึงดูดและทำให้ผู้ใช้ยึดติดกับเนื้อหา เป็นงานที่ยากแน่นอน
เมื่อพิจารณาถึงขอบเขตงานที่กว้างขวางสำหรับเนื้อหาเว็บใด ๆ ผู้คนจำนวนมากขึ้นเรื่อย ๆ เข้าสู่โลกของการออกแบบเว็บไซต์ นักออกแบบเว็บไซต์ที่สร้างสรรค์เป็นที่พูดถึงของเมืองด้วยความสามารถอันน่าทึ่งในการสร้างประสบการณ์การใช้งานที่ดีให้กับผู้ใช้ ปัจจุบันนักออกแบบเว็บไซต์อาจรับงานใน บริษัท การตลาด / โฆษณาหรือเริ่มต้นด้วยตนเองเพื่อดำน้ำในการออกแบบเว็บไซต์
Aesthetic appeal is the key for a given content on web. ซึ่งหมายความว่านักออกแบบเว็บไซต์จะต้องตระหนักถึงหลักการและรากฐานของการออกแบบสีระยะห่าง ฯลฯ ผู้ใช้จำนวนมากขึ้นจะได้เห็นเนื้อหาเว็บคุณภาพเยี่ยมทุกวัน เห็นได้ชัดว่าเราจะเปรียบเทียบหน้าเว็บหรือเว็บไซต์ปัจจุบันกับหน้าเว็บที่เข้าชมเมื่อไม่กี่ชั่วโมงหรือไม่กี่นาทีย้อนหลัง การจัดลำดับเนื้อหาควบคู่ไปกับกราฟิกและสีที่ดีทำให้แบนเนอร์ / เพจแบบสแตนด์อโลนจำนวนมากกลายเป็นสิ่งที่ได้รับความนิยมบนอินเทอร์เน็ต
ตัวอย่าง
ให้เราใช้กรณีของกราฟิกอย่างง่าย มีกราฟิกมากมายบนอินเทอร์เน็ตที่เรียกว่ามีม พวกเขามีความเรียบง่ายGraphics Interchange Format (GIF)ภาพที่มีข้อความบางส่วนฝังอยู่ภายในกราฟิก มส์เหล่านี้กำลังสร้างกระแสอินเทอร์เน็ตโดยอิงจากเหตุการณ์ล่าสุดในบางส่วนของโลก หากเราดูตัวอย่างนี้สิ่งเดียวที่ดึงดูดใจคือภาพกราฟิกและข้อความที่เกี่ยวข้องหรือไม่เกี่ยวข้อง
ถึงกระนั้นก็ยังได้รับความนิยมอย่างมากซึ่งทำให้ใคร ๆ นึกถึงความเป็นไปได้ที่น่าทึ่งบนอินเทอร์เน็ต
ดังนั้นเพื่อให้การออกแบบเว็บมีประสิทธิภาพทั้งความคิดสร้างสรรค์และวิธีการสื่อสารข้อความจึงมีบทบาทสำคัญ
It is important point to note that a successful web page is combination of Web Design and Web Development. ตามแนวโน้มของตลาดในปัจจุบันพร้อมกับนักออกแบบเว็บไซต์นักพัฒนาเว็บเป็นสิ่งที่ต้องมีในทีม นักออกแบบเว็บไซต์มักจะมองหาแรงบันดาลใจและใช้ความคิดสร้างสรรค์ในการสร้างกราฟิกและโทนสีที่เกี่ยวข้อง ในขณะที่นักพัฒนาเว็บจะใช้ทักษะการเขียนโค้ดของตนเพื่อทำให้กราฟิกและโครงร่างสีปรากฏบนเว็บไซต์
นักออกแบบเว็บไซต์ควรมีความรู้ในการเขียนโค้ดเป็นอย่างดีเพื่อให้กราฟิกหรือโทนสีที่ต้องการใช้งานได้สำหรับนักพัฒนาเว็บ รหัสง่ายๆในแอปพลิเคชันง่ายๆเช่น Notepad สามารถช่วยนักออกแบบเว็บไซต์ให้มีที่นั่งขับรถในการพัฒนาเว็บไซต์
การใช้ Parallax Scrolling
Parallax Scrolling อยู่ในขอบเขตการทำงานของทั้งนักออกแบบเว็บไซต์และนักพัฒนาเว็บ นักออกแบบเว็บไซต์อาจสร้างเอฟเฟกต์ของ Parallax Scrolling โดยใช้เครื่องมือเช่น InVision, UXPin เพื่อให้นักพัฒนาเว็บทราบถึงพฤติกรรมที่ต้องการในการเลื่อน นอกจากนี้นักพัฒนาเว็บจะนำทักษะของตนไปใช้ในการสร้างเอฟเฟกต์การเลื่อนพารัลแลกซ์ ซึ่งสามารถทำได้โดยใช้เทคนิค JavaScript, CSS และ jQuery ที่แตกต่างกัน คำอธิบายโดยละเอียดของแต่ละวิธีเหล่านี้มีให้ในบทถัดไป
ตามคำจำกัดความที่ระบุไว้ในส่วนก่อนหน้านี้ parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
เทคนิค CSS ง่ายในการสร้าง Parallax เลื่อนผลจะปรากฏบนเว็บไซต์นี้ - The Urban เดิน
ดังที่คุณเห็นในภาพหน้าจอด้านบนโทรศัพท์มือถือที่อยู่ตรงกลางหน้าจอจะเปลี่ยนเนื้อหาหลังจากที่คุณเลื่อนสองครั้ง นอกจากนี้ให้สังเกตในการเลื่อนครั้งแรกพื้นหลังของโทรศัพท์มือถือจะเปลี่ยนไป
การเปลี่ยนแปลงนี้ทำให้คุณรู้สึกว่าโทรศัพท์อยู่ในตำแหน่งคงที่และพื้นหลังจะเปลี่ยนไปเมื่อคุณเลื่อนลง เอฟเฟกต์นี้เรียกว่าเอฟเฟกต์การเลื่อนพารัลแลกซ์ คุณรู้ว่าคุณกำลังเลื่อนลงเนื่องจากมีตัวบ่งชี้ของหน้าจอไปทางขวาสุดของหน้าจอในรูปแบบของจุดบางจุด
การใช้การเลื่อนแบบพารัลแลกซ์เป็นครั้งแรกในเกมคอมพิวเตอร์สมัยก่อน โดยที่ภาพพื้นหลังคงที่จะเคลื่อนที่ด้วยความเร็วที่ช้าลงเนื่องจากตัวละครเคลื่อนที่เร็วกว่าพื้นหลัง ตัวอย่างบางส่วนของเกมเหล่านี้ - Disney's Aladdin และ Disney's Lion King เกมเหล่านี้เปิดตัวในปี 1993 และ 1994 ตามลำดับ
แม้ว่าจะเป็นเรื่องจริงที่มันเริ่มต้นด้วยเกม แต่ในปัจจุบันนักออกแบบเว็บไซต์จำนวนมากกำลังให้ความสำคัญกับผลที่จะทำให้ผู้ชมชอบไซต์ของตน ข้อดีของการเลื่อนแบบพารัลแลกซ์คือขยายจากเว็บไซต์ไปยังไซต์มือถือ
เว็บไซต์เหล่านี้ซึ่งเคยออกแบบด้วยการเลื่อนพารัลแลกซ์สำหรับเวอร์ชันเดสก์ท็อปแล้วจะมีการเพิ่มโค้ดที่รองรับหน้าจอมือถือด้วยเช่นกัน
ข้อดีของ Parallax Scrolling ในเว็บและมือถือ
ในส่วนนี้เราจะพูดถึงข้อดีของการใช้การเลื่อนพารัลแลกซ์จากมุมมองต่างๆตามที่กล่าวไว้ด้านล่าง -
จากมุมมองของผู้ชม
มีองค์ประกอบสนุกที่เกี่ยวข้องกับการเลื่อนพารัลแลกซ์ ดังที่คุณได้เห็นในตัวอย่างข้างต้นการถ่ายทอดข้อมูลของคำนับพันกลายเป็นเรื่องง่ายขึ้นเมื่อผู้ใช้เลื่อนจากหน้าจอต่างๆ
หากเราพิจารณาผู้ใช้ครั้งแรกมีความอยากรู้อยากเห็นที่เกี่ยวข้องกับการเลื่อนแต่ละครั้ง ดังนั้นจึงไม่เพียงเสริมสร้างประสบการณ์ของเว็บไซต์ แต่ยังเพิ่มโอกาสที่ผู้ใช้จะใช้เวลามากขึ้นในการเยี่ยมชมเว็บไซต์ครั้งแรกด้วย
สัดส่วนของการมีส่วนร่วมของผู้ใช้เพิ่มขึ้นอย่างมากเมื่อผู้ใช้รู้สึกทึ่งในการเลื่อน
ผู้ใช้ไม่จำเป็นต้องใช้ความคิดในการค้นหาข้อมูลเนื่องจากมีให้ในลักษณะที่ชัดเจนกว่า
ในบางกรณีคุณสามารถใส่เรื่องราวเกี่ยวกับผลิตภัณฑ์ / บริการที่คุณนำเสนอโดยการทำให้รายการอื่น ๆ เคลื่อนไหวบนหน้าจอเช่นโลโก้หรือไอคอนเมนู
จากมุมมองทางเทคนิค
เมื่อคุณใช้การเลื่อนพารัลแลกซ์สำหรับเดสก์ท็อปแล้วคุณสามารถใช้เฟรมเวิร์กเดียวกันสำหรับเว็บไซต์หรือหน้าจอมือถือได้อย่างง่ายดาย
เนื่องจากข้อมูลโค้ดนั้นเรียบง่ายและสามารถใช้ซ้ำได้หากคุณเป็นตัวแทนการตลาดหรือ บริษัท ผู้ให้บริการเว็บไซต์สิ่งนี้จะกลายเป็นเรื่องง่ายเมื่อรวบรวมลูกค้าใหม่
ความรู้เกี่ยวกับการเลื่อนพารัลแลกซ์มาพร้อมกับความเชี่ยวชาญในเฟรมเวิร์กส่วนหน้าเช่น CSS, JavaScript และอื่น ๆ
สำหรับนักพัฒนาเว็บเมื่อต้องการสร้างเอฟเฟกต์การเลื่อนพารัลแลกซ์จะมีเทคนิคต่างๆ หนึ่งในเทคนิคดังกล่าวคือการใช้Cascaded Styling Sheets(CSS).
CSS อธิบายว่าองค์ประกอบ HTML แสดงบนหน้าจออย่างไร หนึ่งสามารถสร้างไฟล์ CSS และสามารถใช้สำหรับเว็บไซต์ที่สมบูรณ์ การเพิ่มไฟล์ CSS นั้นง่ายกว่าการเพิ่มสไตล์ให้กับองค์ประกอบ HTML แต่ละรายการและจัดการในส่วนต่างๆของหน้าเว็บ
Note- วิธีการบางอย่างที่กล่าวถึงด้านล่างในบทนี้เป็นวิธีการเฉพาะสำหรับคอมพิวเตอร์เดสก์ท็อปไม่ใช่สำหรับอุปกรณ์พกพา จะกล่าวถึงในขั้นตอนเมื่อเทคนิคเฉพาะไม่เหมาะสำหรับอุปกรณ์พกพา
เมื่อพิจารณาจาก CSS offloads ในรูปวาดพิเศษทั้งหมดในรูปแบบวัตถุเอกสาร (DOM) มีการใช้ประโยชน์จากการเร่งฮาร์ดแวร์มากขึ้นและเอฟเฟกต์ที่ราบรื่นโดยไม่ทำให้ CPU เป็นภาระ
วิธีตำแหน่งสัมบูรณ์
วิธีนี้มักใช้เพื่อสร้างเอฟเฟกต์พารัลแลกซ์เนื่องจากมีน้ำหนักค่อนข้างเบาเมื่อเทียบกับตัวเลือกอื่น ๆ ตำแหน่งของภาพพื้นหลังจะคงที่โดยสัมพันธ์กับเนื้อหาอื่น ๆ บนหน้าจอ ในตัวอย่างที่กล่าวถึงด้านล่างคุณจะเห็นวิธีการใช้ความมหัศจรรย์ของ CSS
ในส่วนนี้เราจะพูดถึงสองวิธีสำหรับวิธีตำแหน่งสัมบูรณ์ -
- พื้นหลังเดี่ยว
- พื้นหลังหลายแบบ
วิธีพื้นหลังเดียว
ในวิธีนี้เราจะสร้างไฟล์สองไฟล์ในโฟลเดอร์เดียวกัน ปฏิบัติตามขั้นตอนด้านล่างเพื่อจุดประสงค์เดียวกัน -
Step 1
เราต้องสร้างไฟล์สองไฟล์ในโฟลเดอร์เดียวกัน: ไฟล์แรกที่มีมาร์กอัป HTML และไฟล์ที่สองด้วยโค้ด CSS
Step 2
ตอนนี้ให้เรากำหนดมาร์กอัป HTML ของเรา สังเกตรหัสที่ระบุด้านล่าง -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
เปิดแผ่นจดบันทึก คัดลอกและวางข้อมูลโค้ดด้านบน
เมื่อคุณบันทึกไฟล์ภายใต้ Save as typeเลือก All Files. ป้อนชื่อไฟล์ของคุณตามต้องการ แต่ต้องตามด้วยนามสกุล -.html ดังแสดงในภาพหน้าจอด้านล่าง
Step 4
เมื่อบันทึกไฟล์แล้วให้สร้างไฟล์อื่นใน notepad และวางรหัสที่ระบุด้านล่าง -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}ดังที่คุณเห็นในขั้นตอนสุดท้ายเมื่อคุณบันทึกไฟล์ภายใต้ Save as พิมพ์เลือก All Files. ป้อนชื่อไฟล์ของคุณตามต้องการและเพิ่มนามสกุล.css ไปเลย
การวิเคราะห์รหัส
ให้เราเข้าใจว่าส่วนใดของโค้ดที่รับผิดชอบต่อเอฟเฟกต์พารัลแลกซ์ งานที่สำคัญที่สุดสำหรับพารัลแลกซ์ทำโดยใช้มุมมองและกฎการเปลี่ยนแปลง เอ่ยถึงline 15ในข้อมูลโค้ดด้านบน มุมมองถูกสร้างขึ้นสำหรับBgContainerอันดับแรก. สิ่งนี้เริ่มต้นแพลตฟอร์มสำหรับกฎการเปลี่ยนแปลง
ใน Parallax ตู้คอนเทนเนอร์เริ่มต้นที่บรรทัดที่ 40 transform กฎในบรรทัดที่ 48 พุช BgContainer div เป็นพื้นหลังโดยใช้การแปล (-1px)
คุณสามารถแก้ไขค่าสำหรับพารามิเตอร์การแปลและมาตราส่วนเพื่อแก้ไขความลึกของพารัลแลกซ์
เมื่อคุณเปิดไฟล์ html เอฟเฟกต์พารัลแลกซ์จะมองเห็นได้ดังที่แสดงด้านล่าง -
Note - สำหรับบทช่วยสอนที่เหลือจะถือว่าผู้อ่านสามารถสร้างไฟล์ HTML และ CSS ได้ตามโครงสร้างโฟลเดอร์ที่ให้ไว้ในวิธีการข้างต้น
วิธีการหลายพื้นหลัง
ในวิธีนี้เราจะมีภาพต่างๆปรากฏขึ้นเมื่อผู้ใช้เลื่อนหน้าลง มีภาพด้วยดินสอซึ่งใช้ในการผสมสีที่แตกต่างกันเพื่อแสดงเอฟเฟกต์นี้
สังเกตโค้ดต่อไปนี้สำหรับหน้า HTML ที่แสดงด้านล่าง -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>เช่นเดียวกับตัวอย่างก่อนหน้านี้เราจะใช้ styles.cssเก็บไว้ในตำแหน่งเดียวกับไฟล์ HTML นี้ เรามี div ที่แตกต่างกันสามชื่อที่เรียกว่า First, Second, Third และ Fourth
โค้ด CSS สำหรับการเลื่อนพารัลแลกซ์มีให้ด้านล่าง -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}ที่นี่เราสร้างเอฟเฟกต์พารัลแลกซ์จากบรรทัดที่ 7 คุณสมบัติที่สำคัญที่นี่คือ background-attachment:fixed.
เมื่อใช้คุณสมบัตินี้ภาพแรกที่มีดินสอสีจะยังคงอยู่ที่ด้านบนเสมอ เมื่อคุณเลื่อนลงภาพต่างๆตามที่อธิบายไว้ในบรรทัด 28 จะเริ่มปรากฏขึ้น
ด้วยเหตุนี้คุณจะสามารถเห็นเอฟเฟกต์พารัลแลกซ์ดังแสดงใน gif ด้านล่าง ภาพต่อไปนี้เป็นภาพหน้าจอของตัวอย่างที่เราพิจารณาสำหรับพื้นหลังหลาย ๆ ภาพ
Parallax CSS บริสุทธิ์
ให้เรารวมความรู้จากสองวิธีก่อนหน้านี้และสร้างเอฟเฟกต์ Pure CSS Parallax ขั้นสูง
ความแตกต่างจะเป็นวิธีที่เราจัดเรียงไฟล์ image องค์ประกอบและ z-transformทรัพย์สิน. คำอธิบายคุณสมบัติจะอยู่หลังโค้ด CSS
สร้างไฟล์ HTML ด้วยรหัสต่อไปนี้โดยใช้วิธีการปกติจาก Notepad
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>สำหรับไฟล์ CSS รหัสจะได้รับด้านล่าง -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}การวิเคราะห์รหัส
เราได้แก้ไขตำแหน่งของชั้นแรกใน line 26 โดยใช้ position:absoluteทรัพย์สิน. ตำแหน่งยังฮาร์ดโค้ดเป็น 0
ใน parallax_twoซึ่งเป็นเลเยอร์ที่มีหัวเรื่องเราได้นำไปใช้ z-index: 10เพื่อให้เอฟเฟกต์ลอยไปยังหัวเรื่อง เลเยอร์parallax_three ถูกย้ายไปที่ด้านล่างโดยการให้คุณสมบัติขอบด้านบน
ดังนั้นเราสามารถยกระดับความซับซ้อนในเอฟเฟกต์ Parallax ของเราได้
สังเกตผลดังแสดงในรูปด้านล่าง
ในการสร้างเอฟเฟกต์ Parallax วิธีที่ได้รับความนิยมมากที่สุดคือการใช้ JavaScript จากบทนี้เป็นต้นไปเราจะพูดถึงแนวคิดของ JavaScript และไลบรารีบางส่วนที่ใช้ในการเลื่อนพารัลแลกซ์
การใช้ JavaScript บริสุทธิ์เหมาะสมที่จะรักษาประสิทธิภาพของเว็บไซต์ให้ดีที่สุด มีข้อดีอื่น ๆ อีกมากมายของการใช้ไลบรารีจากแง่มุมของประสิทธิภาพ อย่างไรก็ตามเพื่อให้เข้าใจองค์กรโค้ดได้ดีขึ้นเราจะเริ่มต้นด้วยการใช้งานพารัลแลกซ์ JavaScript ที่บริสุทธิ์ ข้อเท็จจริงที่น่าสนุกบางครั้งเรียก JavaScript บริสุทธิ์vanilla JavaScript
Parallax Scrolling โดยใช้ Pure JavaScript
ขั้นแรกให้สร้างไฟล์ HTML หลักพร้อมรหัสที่แสดงด้านล่าง หน้า HTML จะประกอบด้วยข้อความหัวเรื่องสี่ข้อความ
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>สังเกตว่าในบรรทัดหมายเลข 4 สำหรับตัวอย่างนี้เรากำลังใช้ myscripts.js ไฟล์ซึ่งจะถูกเก็บไว้ในโฟลเดอร์เดียวกับไฟล์ HTML และไฟล์ CSS
ตอนนี้ให้เราเตรียมไฟล์ CSS ของเราตามที่แสดงด้านล่าง
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}ตอนนี้ส่วน JavaScript, สร้างไฟล์ใน notepad และบันทึกเป็นmyscripts.js
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});การวิเคราะห์รหัส
ให้เราวิเคราะห์โค้ด JavaScript
รหัสจาก line number 1 to 4 แสดงถึงฟังก์ชันตัวช่วย
ในบรรทัดที่ 6 เราเลือกองค์ประกอบพารัลแลกซ์และเพิ่ม scrollเหตุการณ์ไปที่หน้าต่าง ในการกำหนดพื้นที่ที่จะเลื่อนเรากำลังใช้scrolledHeightทรัพย์สิน. เมื่อหน้าจอเลื่อนลงbackgroundPositionY ได้รับการอัปเดตสำหรับองค์ประกอบพารัลแลกซ์
เพื่อทำให้เอฟเฟกต์พารัลแลกซ์ช้าลงเราหารด้วย 1.5 จำนวนนี้สามารถเปลี่ยนเป็นตัวเลขใดก็ได้ที่คุณต้องการ
ตอนนี้คุณจะสามารถเห็นหน้าเลื่อนลงตามที่ให้ไว้ในภาพหน้าจอด้านล่าง
การใช้ ScrollMagic JavaScript Library
ตามที่กล่าวไว้ในหัวข้อก่อนหน้านี้ในขณะที่เราสามารถใช้ JavaScript บริสุทธิ์เพื่อสร้างเอฟเฟกต์พารัลแลกซ์ แต่ก็มีไลบรารี JavaScript ที่มีประสิทธิภาพซึ่งจะช่วยเพิ่มประสบการณ์ของผู้ใช้ ScrollMagic เป็นหนึ่งในไลบรารีสำหรับสร้างการโต้ตอบการเลื่อนพารัลแลกซ์
ให้เราพูดคุยเพิ่มเติมเกี่ยวกับเรื่องนี้ด้วยความช่วยเหลือของตัวอย่างที่ให้ไว้ด้านล่าง -
Note- ในตัวอย่างนี้เพื่อให้ง่ายเราจะมี CSS เก็บไว้ในไฟล์ HTML นอกจากนี้โค้ด JavaScript จะปรากฏในเอกสารเดียวกัน โดยสรุปเราจะสร้างไฟล์ HTML เพียงไฟล์เดียวและจะมีไลบรารี ScrollMagic อ้างอิงพร้อมกับ CSS ที่จำเป็น
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>ดังที่แสดงในโค้ดด้านบนเราจำเป็นต้องมีการอ้างอิงไลบรารี JavaScript จาก line 3 to 6. โค้ด CSS ถูกระบุตั้งแต่บรรทัดที่ 9 ถึง 19
เครือข่ายการจัดส่งเนื้อหา
การอ้างอิงสคริปต์จากบรรทัดที่ 3 ถึง 6 ชี้ไปที่ URL ของ ScrollMagic Content Delivery Network (CDN) การใช้ CDN เหมาะสมกับการพัฒนาเว็บไซต์สมัยใหม่เนื่องจากคุณสามารถโหลดไลบรารีที่ต้องการได้โดยไม่ทำให้เว็บไซต์ของคุณช้าลง
หากมีการกำหนดเองที่จำเป็นในไลบรารีเราจะต้องโฮสต์ไลบรารีบนเซิร์ฟเวอร์ของตนเพื่อใช้เอฟเฟกต์เหล่านี้ หากคุณกำลังใช้ฟังก์ชันพื้นฐานจากไลบรารีการใช้ CDN URL จะมีประสิทธิภาพ
โค้ด HTML ด้านบนแสดงรูปภาพที่คั่นด้วย 2 ดิวิชั่น ส่วนแรกปรากฏขึ้นพร้อมกับหัวเรื่อง -These are bricks และส่วนที่สองปรากฏด้วย - Some More Bricks.
สังเกตว่าในโค้ด CSS จากบรรทัดที่ 9 ถึง 19 เราระบุเฉพาะตำแหน่งและสไตล์สำหรับ Parallax Div ที่เกี่ยวข้องเท่านั้น
ผลงานการสร้างพารัลแลกซ์ที่นุ่มนวลนี้ sceneทำได้โดยไลบรารี ScrollMagic หากคุณอ้างถึงรหัสสคริปต์จากบรรทัดที่ 43 ถึง 62 ScrollMagiccontroller ถูกเรียกใช้และ a scene ถูกสร้างขึ้น
ฉากจะแนะนำ DOM เพื่อสร้างเอฟเฟกต์พารัลแลกซ์เมื่อ 80% ของหน้าจอถูกครอบครอง JavaScript ใช้เพื่อทำความเข้าใจทริกเกอร์การเลื่อน ด้วยเหตุนี้สิ่งที่คุณจะได้รับคือประสบการณ์ลอยๆในหน้านี้
Note - เมื่อพิจารณาภาพด้านบนเป็นภาพ GIF คุณจะไม่สังเกตเห็นเอฟเฟกต์ที่ราบรื่นของการแบ่งข้อความ
ทริกเกอร์แอนิเมชัน
ความเป็นไปได้ในการสร้างประสบการณ์การใช้งานที่หลากหลายนั้นไม่มีที่สิ้นสุดด้วย ScrollMagic Library สังเกตข้อมูลโค้ดที่ระบุด้านล่างเพื่อทริกเกอร์ภาพเคลื่อนไหวเมื่อเลื่อน
โปรดทราบว่าสำหรับสิ่งนี้คุณต้องมีสองไฟล์ * ลบ; ไฟล์ HTML หนึ่งไฟล์และไฟล์ CSS หนึ่งไฟล์
สร้างไฟล์ HTML ด้วยรหัสที่แสดงด้านล่าง -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>ตอนนี้สร้างไฟล์ CSS ด้วยรหัสต่อไปนี้
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}การวิเคราะห์รหัส
อ้างอิงถึงโค้ด HTML โค้ด ScrollMagic เริ่มต้นจาก line 17 และดำเนินต่อไปจนถึง line 25. ในส่วนนี้เรากำลังสร้างฉาก ScrollMagic สองฉาก ฉากแรกมีไว้สำหรับภาพอิฐและอีกฉากเป็นภาพเคลื่อนไหวของแบนเนอร์
ตามที่ระบุไว้ใน setTween เปิดฟังก์ชั่น line 20เมื่อการเลื่อนเกิดขึ้นที่ 40% ของขนาดหน้าจอฉากต่อไปจะเริ่มขึ้นซึ่งจะแสดงแบนเนอร์นี่แหล่ะ!
ความทึบของ div กับ id - square ถูกควบคุมในไฟล์ CSS บน line 10 และ line 15.
ดังนั้นคุณจะเห็นภาพเคลื่อนไหวด้านล่างในหน้า
การเลื่อนแนวนอน
นอกจากนี้เรายังสามารถใช้การเลื่อนแบบพารัลแลกซ์และเลื่อนตามแนวนอนได้ ไลบรารี ScrollMagic สามารถใช้เพื่อสร้างเอฟเฟกต์การเลื่อนในแนวนอน ดูโค้ดด้านล่าง
แม้ว่าโค้ดจะตรงไปตรงมาเพื่อสร้างเอฟเฟกต์การเลื่อนแนวนอน แต่เราจำเป็นต้องมีการอ้างอิง jquery เพื่อให้ได้การเคลื่อนไหวในแนวนอนของหน้าจอ รายละเอียดของ jQuery อยู่ในบทถัดไปสำหรับตอนนี้เพียงทำตามโค้ดที่ระบุด้านล่าง
เราจะสร้างไฟล์แยกกันสามไฟล์ - ไฟล์ HTML สำหรับโค้ดหลักไฟล์ CSS สำหรับสไตล์และไฟล์ JS สำหรับการเรียกฟังก์ชัน ScrollMagic
นี่คือรหัสสำหรับเอกสาร HTML
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>สังเกตว่าเรามีสามส่วนซึ่งจะปรากฏขึ้นหลังจากเลื่อน ทั้งสามส่วนแสดงด้วย ids title1, title2 และ title3 ในบรรทัดที่ 15,19 และ 23 ตามลำดับ
รหัสสำหรับเอกสาร CSS มีให้ด้านล่าง -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}การวิเคราะห์รหัส
สีพื้นหลังสำหรับสามหน้าจอ (หรือส่วน) มีให้บน lines 10, 22 และ 25.
เรากำลังคำนวณความกว้างสัมพัทธ์ของแต่ละหน้าจอในโค้ดที่เริ่มต้น line 13.
โค้ด JavaScript สำหรับ ScrollMagic มีให้ด้านล่าง -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});สังเกต triggerHookคุณสมบัติในบรรทัดที่ 8 คุณสมบัตินี้มีหน้าที่ในการจัดเตรียมเอฟเฟกต์การเลื่อนเมื่อผู้ใช้ไปถึงเหตุการณ์เลื่อนที่เสร็จสมบูรณ์ ฟังก์ชั่นTimelineMax มีหน้าที่จัดทำเอฟเฟกต์การเลื่อนแนวนอนให้กับหน้าจอของเรา
เมื่อสร้างไฟล์ตามลำดับแล้วคุณจะสามารถเห็นภาพเคลื่อนไหวการเลื่อนแนวนอนดังที่แสดงด้านล่าง
ในบทก่อนหน้านี้เราได้เข้าใจแล้วว่าเอฟเฟกต์ที่ดีในการใช้ไลบรารี JavaScript จะเพิ่มไปยังเว็บไซต์ได้อย่างไร JavaScript เมื่อใช้ร่วมกับ Photoshop ให้ความยืดหยุ่นและความสะดวกในการเพิ่มการเลื่อนแบบพารัลแลกซ์ในเว็บไซต์ของคุณ
ในบทนี้เราจะดูปลั๊กอิน Photoshop สามตัวเพื่อเพิ่มเอฟเฟกต์การเลื่อนพารัลแลกซ์ เช่นเดียวกับที่เราอ้างถึงในบทก่อนหน้าสำหรับ JavaScript เราจะใช้การอ้างอิง Photoshop ในโค้ด HTML ของเราเพื่อสร้างการเลื่อนพารัลแลกซ์ Photoshop ที่มีประสิทธิภาพ
จุดสำคัญที่ควรทราบเกี่ยวกับปลั๊กอิน Photoshop คือบ่อยครั้งที่ปลั๊กอินไม่ได้รับการอัปเดตดังนั้นคุณต้องทำการค้นคว้าก่อนที่จะเริ่มใช้ปลั๊กอินใด ๆ สำหรับการเลื่อนแบบพารัลแลกซ์
Parallax Scrolling โดยใช้ Parallax.js ง่ายๆ
Parallax.js โดยใช้ปลั๊กอิน Photoshop เราสามารถสร้างเอฟเฟกต์การเลื่อนพารัลแลกซ์ได้โดยไม่ต้องยุ่งยากมากนัก การพิจารณาปลั๊กอิน jQuery จำเป็นต้องมีไลบรารีระดับไฮเอนด์เช่น bootstrap โปรดทราบว่าในบทนี้จะมีแท็ก HTML5 ในโค้ด
ให้เราดูไฟล์ HTML ที่แสดงด้านล่าง -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>รหัสการวิเคราะห์
ข้อมูลโค้ดด้านบนแสดงโค้ดสำหรับหน้าที่มีรูปภาพสองรูปและข้อความตัวอย่างคั่นระหว่างหน้า
อย่างที่คุณเห็นรหัสเริ่มต้นด้วย <!DOCTYPE html>นี่เป็นวิธีการทั่วไปในการแจ้งให้เบราว์เซอร์ทราบว่าโค้ดนั้นใช้ HTML5
ที่ <meta> แท็กจาก line 4 to 6แสดงรหัสซึ่งเป็นเครื่องสำหรับการตีความ คุณจะไม่สามารถเห็นผลกระทบของรหัสนี้ได้ สิ่งสำคัญที่ควรทราบคือ - ด้วยmeta แท็กนักพัฒนาเว็บจะได้รับการควบคุมขั้นสูงสำหรับข้อมูลที่แสดง
นอกจากนี้บน line 8 and 9เราได้รวมสไตล์ชีต CSS ไว้พร้อมกับ Bootstrap สำหรับหน้าฟอนต์และตัวพิมพ์ที่เฉพาะเจาะจง Bootstrap เป็นไลบรารีที่ใช้กันอย่างแพร่หลาย
Lines 10 and 11ดูแลไลบรารี Photoshop และ Parallax.js สิ่งสำคัญคือต้องรวมการควบคุม Parallax.js เพื่อให้มีผลกับภาพพารัลแลกซ์ คุณจะสามารถค้นหาdata-parallax ทรัพย์สินด้วย div บน line 21ซึ่งเพียงพอที่จะเรียกใช้ไลบรารี parallax.js สำหรับเอฟเฟกต์พารัลแลกซ์ที่ต้องการ
เอฟเฟกต์พารัลแลกซ์สามารถเห็นได้ในโค้ดบน lines 21 และ line 40. คุณสมบัติที่สำคัญที่ทำให้เอฟเฟกต์นี้เกิดขึ้นกับ parallax.js คือ -data-parallax, data-image-src, data-natural-width, data-natural-height.
ด้วยไฟล์ CSS เราต้องระบุคุณสมบัติเพียงรายการเดียว ดังที่แสดงด้านล่าง -
.parallax-container {
height: 500px;
width: 100%;
}ในโค้ด HTML ด้านบนเราได้สร้างโครงสร้างเฉพาะสำหรับไฟล์ CSS เราจะมีโฟลเดอร์ชื่อcss, ซึ่งจะมีไฟล์ CSS - bootstrap.min.css และ style.css.
เมื่อทุกอย่างผ่านเอกสารแล้วคุณจะเห็นเอฟเฟกต์พารัลแลกซ์ดังที่แสดงด้านล่าง -
Parallaxator โดยใช้ปลั๊กอิน Photoshop
Parallaxator ปลั๊กอิน Photoshop ที่ดีที่สุดให้เอฟเฟกต์การเลื่อนแบบพารัลแลกซ์และใช้งานง่าย คุณสามารถดาวน์โหลดปลั๊กอิน Parallaxator, CSS และ JS ไฟล์จากลิงค์นี้ - Parallaxator GitHub
เมื่อดาวน์โหลดไฟล์ CSS และ JS แล้วคุณสามารถใช้โค้ดที่แสดงด้านล่างเพื่อสร้างโค้ด HTML
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>รหัสการวิเคราะห์
เอฟเฟกต์พารัลแลกซ์จัดทำโดยคลาส parallax_child ซึ่งมาพร้อมกับแท็ก img แต่ละแท็ก parallax_child เชื่อมต่อกับไฟล์ CSS และ JS ซึ่งมีให้ด้านล่าง
สำหรับตัวพารัลแลกเซเตอร์ปลั๊กอินในการทำงานเราได้รวม fm.parallaxator.jquery.css และ fm.parallaxator.jquery.js ไฟล์เหล่านี้จำเป็นต้องมีอยู่ในไดเร็กทอรีเดียวกับไฟล์ HTML
โค้ดสำหรับ CSS ดังแสดงด้านล่าง -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}จากโค้ดด้านบนคุณจะสามารถเห็นเอฟเฟกต์พารัลแลกซ์
ปลั๊กอิน Stellar.js jQuery สำหรับ Parallax Scrolling
Stellar.js เป็นอีกหนึ่งส่วนเพิ่มเติมในรายการปลั๊กอิน Photoshop ของ Parallax แม้ว่าจะไม่ได้รับการบำรุงรักษาอีกต่อไป แต่นักพัฒนาที่ใช้โครงสร้างที่มีเสถียรภาพก็สามารถใช้เอฟเฟกต์การเลื่อนพารัลแลกซ์ได้อย่างง่ายดาย เข้ากันได้กับ Photoshop เวอร์ชันล่าสุดและใช้งานง่าย
คุณจะต้องดาวน์โหลด jquery.stellar.js ล่าสุดจากเว็บไซต์อย่างเป็นทางการสำหรับปลั๊กอินStellar.js เมื่อดาวน์โหลดแล้วให้สร้างไฟล์ปลั๊กอินนี้ในโฟลเดอร์เดียวกับไฟล์ HTML และ CSS ของคุณ
ให้เราดูโค้ด HTML
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>รหัสการวิเคราะห์
เพื่อให้ Stellar.js ทำงานได้เราได้รวมไลบรารีไว้หลังจากที่ปลั๊กอิน Photoshop อ้างอิงบน jquery.stellar.js line 6.
ฟังก์ชันสำหรับพารัลแลกซ์ Stellar ถูกเรียกในแท็กสคริปต์จาก line 8 to line 15. กับทรัพย์สินdata-stellar-background-ratio, เรากำลังตั้งค่าชดเชยสำหรับภาพที่กำลังแสดง นี้เสร็จเรียบร้อยแล้วlines 19,20,21 and 22.
โค้ด CSS ได้รับด้านล่าง -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}เมื่อทั้งสองไฟล์ถูกสร้างขึ้นและ stellar.js ไฟล์ปลั๊กอินจะรวมอยู่ในโฟลเดอร์เดียวกันคุณจะสามารถเห็นเอฟเฟกต์ดังที่แสดงในภาพหน้าจอด้านล่าง -
Bootstrap เป็นเฟรมเวิร์กยอดนิยมที่มีส่วนประกอบที่พร้อมใช้งานมากมายให้เลือกใช้ Bootstrap สามารถปรับโค้ดให้เหมาะสมสำหรับการใช้งานการเลื่อนพารัลแลกซ์
ในบทนี้มีตัวอย่างให้เราพูดถึงวิธีที่เราจะใช้ส่วนประกอบ Jumbotron เพื่อใช้การเลื่อนพารัลแลกซ์
เต็มหน้าด้วย Parallax Bootstrap4 Jumbotron
ลองนึกภาพเว็บไซต์ที่ผู้ใช้แสดงด้วยช่อง "คำกระตุ้นการตัดสินใจ" ขนาดใหญ่ที่มีเนื้อหาเกี่ยวกับส่วนลดหรือการขาย โดยปกติ Jumbotron จะพบการใช้งานในสถานที่ดังกล่าว เป็นกล่องขนาดใหญ่ที่มีประโยชน์ในการดึงดูดความสนใจของผู้ใช้
เนื่องจากเราใช้เพียงส่วนประกอบเดียวของ Bootstrap เราจะไม่สร้างไฟล์ CSS แยกต่างหากสำหรับตัวอย่างนี้ ให้เราดำดิ่งลงไปในโค้ด HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>รหัสการวิเคราะห์
ที่ line 64 อ้างอิงไลบรารี Bootstrap เรากำลังระบุระยะขอบและรัศมีขอบสำหรับ Jumbotron จากline 8 to 11.
อย่างที่เราเห็นบน line 33, เรากำลังสร้าง div ด้วยคลาส Jumbotron เพื่อแสดงช่องขนาดใหญ่ที่เราจะโหลดอิมเมจเฉพาะของเรา โปรดทราบว่าไม่มี URL โดยตรงสำหรับรูปภาพในครั้งนี้เราจะใช้รูปภาพที่ดาวน์โหลดมา คุณสามารถดาวน์โหลดภาพความละเอียดสูงสำหรับตัวอย่างของคุณและระบุในรูปแบบline 16.
ผลลัพธ์ที่คุณสามารถเห็นได้เมื่อคุณรันโค้ดข้างต้นแสดงไว้ด้านล่าง -
ในบทช่วยสอนนี้เราได้ศึกษาไลบรารีต่างๆสำหรับการสร้างการเลื่อนพารัลแลกซ์ เราได้ครอบคลุมทุกด้านตั้งแต่ระดับพื้นฐานไปจนถึงระดับสูงที่เราใช้ CSS Bootstrap ที่เราใช้สำหรับการพัฒนาส่วนหน้า เราขอแนะนำให้คุณใช้ทักษะความคิดสร้างสรรค์ของคุณเพื่อสร้างหน้าเว็บที่ยากที่จะเพิกเฉย โปรดจำไว้ว่าสำหรับการเลื่อนแบบพารัลแลกซ์มีตัวอย่างมากมายทางออนไลน์เพื่อเป็นแรงบันดาลใจให้คุณ
การใช้ Parallax Scrolling
ดังที่เราได้กล่าวไปแล้วในบทแนะนำคุณสามารถใช้การเลื่อนพารัลแลกซ์เพื่อให้ได้ประสบการณ์การใช้งานที่ไม่ธรรมดา นี่คือแนวคิดบางส่วนสำหรับไซต์ซึ่งคุณสามารถรวมการเลื่อนพารัลแลกซ์
ไทม์ไลน์ของเว็บไซต์
ไซต์ประเภทนี้มักจะมีเรื่องราวเกี่ยวกับผลิตภัณฑ์หรือ บริษัท หรือสิ่งอื่นใด คุณสามารถสร้างเอฟเฟกต์พารัลแลกซ์เพื่อถ่ายทอดเรื่องราวให้กับผู้เข้าชมและทำให้พวกเขามีส่วนร่วมกับแอนิเมชั่นต่างๆ
สำหรับไซต์ไทม์ไลน์การสร้างพื้นหลังและแสดงเนื้อหาข้อความในเบื้องหน้าจะคุ้มค่า คุณสามารถร่วมมือกับนักออกแบบกราฟิกเพื่อสร้างกราฟิกที่เข้ากันได้กับพื้นหลัง
เว็บไซต์ Mobile App
ปัจจุบันแอพมือถือเป็นสิ่งจำเป็นสำหรับการนำเสนอผลิตภัณฑ์ / บริการใด ๆ มีสตาร์ทอัพจำนวนมากที่กำลังมองหาการสร้างเว็บไซต์แอพมือถือซึ่งให้คำอธิบายว่าแอพมือถือทำอะไรได้บ้างและทำไม่ได้
App Store ของ Apple ซึ่งขึ้นชื่อเรื่องการสร้างแอปหลักเกณฑ์ที่เข้มงวดต้องการให้แอปบนอุปกรณ์เคลื่อนที่มีเว็บไซต์สนับสนุน เว็บไซต์นี้จะต้องน่าสนใจและเป็นมิตรกับผู้ใช้เสมอ
การใช้การเลื่อนแบบพารัลแลกซ์คุณสามารถใช้รูปภาพบนมือถือและแสดงฟังก์ชันประเภทต่างๆได้เมื่อผู้ใช้เลื่อนหน้าลงมา ตัวอย่างหนึ่งที่กล่าวถึงแล้วในบทที่ 4 ของบทช่วยสอนนี้
เมาส์เหนือเอฟเฟกต์
คุณสามารถใช้พลังของการเลื่อนพารัลแลกซ์และวางเมาส์เหนือเพื่อสร้างแอนิเมชั่นระดับถัดไป เมื่อวางเมาส์คุณจะสามารถควบคุมทิศทางการเลื่อนและสร้างเอฟเฟกต์พารัลแลกซ์ได้
ด้วยวิธีนี้มีความเป็นไปได้มากมายในการสร้างประสบการณ์ที่ยอดเยี่ยม สิ่งที่คุณต้องมีคือแนวคิดและชุดเครื่องมือและไลบรารีที่เหมาะสม
อนาคตของ Web UI
ด้วยพลังของเทคโนโลยีและองค์ประกอบที่สร้างสรรค์เช่นการเลื่อนแบบพารัลแลกซ์มีการแข่งขันที่ไม่เคยมีมาก่อนเพื่อสร้างประสบการณ์ผู้ใช้ที่น่าทึ่ง สิ่งนี้ไม่ได้ จำกัด เพียงแค่เว็บไซต์เท่านั้น แต่ยังขยายไปยังไซต์บนมือถืออีกด้วย
ในขณะที่ Web UI อยู่ในช่วงสูงสุด แต่การมีหน้าเว็บที่เข้ากันได้กับอุปกรณ์มือถือนั้นจำเป็นต้องใช้เวลา ดังที่เราได้เห็นในตัวอย่างสำหรับ Bootstrap และ jQuery เว็บไซต์จะมีอายุยืนยาวไม่ได้หากไม่รองรับอุปกรณ์พกพา
นอกเหนือจากไลบรารีที่มีอยู่แล้วประสบการณ์ของผู้ใช้ในอนาคตก็ตั้งตารอที่จะใช้ปัญญาประดิษฐ์และความเป็นจริงเสมือนเช่นกัน มีบางหน้าเว็บที่สามารถดูได้โดยใช้อุปกรณ์ VR ในสถานการณ์เช่นนี้การติดต่อกับปลั๊กอินล่าสุดและกำลังมองหาการสร้างปลั๊กอินใหม่นั้นสมเหตุสมผลจริงๆ
คุณใช้ความรู้ที่ได้รับในบทช่วยสอนนี้เพื่อสร้างประสบการณ์การใช้งานที่ดีที่สุดฉันขอให้คุณโชคดีและประสบความสำเร็จในเส้นทางการพัฒนาเว็บของคุณ!