Toolkit - หน้า 21

Oculus Rift, HTC Vive และผลิตภัณฑ์ VR อื่น ๆ ได้เปลี่ยนอนาคตของเทคโนโลยี เราอาจเย้ยหยันในความคิดเกี่ยวกับชุดหูฟัง VR แต่เหมือนกับอินเทอร์เน็ตในปี 1990 VR เป็นหนทางแห่งอนาคต. และต้องขอบคุณ WebVR ที่ทำให้เรามีวิธี ผสานอินเทอร์เน็ตกับ VR โดยใช้ JavaScript API ที่ทรงพลัง. ไลบรารี่นี้ฟรีโอเพนซอร์สและได้รับการสนับสนุนจาก W3C ดังนั้นจึงเป็นห้องสมุดที่สมบูรณ์แบบที่จะเล่นถ้าคุณอยู่ในโลกเสมือนจริง. WebVR ยังคงอยู่ในช่วงทดลองและคุณสามารถทำได้เท่านั้น ทดสอบกับเบราว์เซอร์บนหูฟัง...

คุณสามารถสร้างสิ่งที่น่าอัศจรรย์ด้วย CSS3 จาก ฟิลด์อินพุตที่กำหนดเอง ไปยัง เมนูแบบเลื่อนลง และแม้กระทั่ง กราฟิกแบบเวกเตอร์. เทคนิคเหล่านี้นั้น แซงหน้า JavaScript อย่างรวดเร็ว, ทำให้นักพัฒนาซอฟต์แวร์สามารถสร้างประสบการณ์การใช้งานที่ดีขึ้นได้ง่ายขึ้น. หนึ่งในสิ่งที่ยากที่สุดในการสร้างคือ โหลดภาพเคลื่อนไหวปินเนอร์ แต่แอนิเมชั่น CSS ที่ทันสมัยทำให้มันง่าย. เพื่อประหยัดเวลาในการสร้างคุณสามารถใช้ไลบรารี่เช่น CSSPIN กับตันของ สปินเนอร์ที่กำหนดเองที่กำหนดไว้ล่วงหน้า. ภาพเคลื่อนไหวทั้งหมดเหล่านี้มีอิสระในการโคลนและเปิดกว้างโดยสิ้นเชิงดังนั้นคุณจึงมี การเข้าถึงแบบเต็ม เพื่อแก้ไขรหัสตามที่คุณต้องการ. การตั้งค่าสปินเนอร์ด้วยห้องสมุดนี้เป็นเรื่องง่าย คุณเพียงแค่ คัดลอกไลบรารี CSS ลงในหน้าของคุณแล้ว...

มี ปลั๊กอิน Lightbox นับสิบ และพวกเขาทั้งหมดที่ดี ด้วยเหตุผลต่าง ๆ. บางคนทำงานได้ดีขึ้นในเว็บไซต์พอร์ตโฟลิโอ. แต่หนึ่งในปลั๊กอินใหม่ที่ฉันชอบใช้คือ baguetteBox.js, สร้างโดยนักพัฒนา JavaScript Marek Grzybek. แน่นอนปลั๊กอินนี้ใช้งานได้ฟรีและเปิดแหล่งที่มาบน GitHub หากคุณต้องการขุดลงในโค้ดด้วยตนเอง. ห้องสมุด ไม่มีการอ้างอิงใด ๆ, เพื่อให้คุณสามารถรันได้โดยไม่ต้อง jQuery, Zepto หรืออย่างอื่น มันคือ ไลบรารี JavaScript ล้วนๆด้วยการตั้งค่าที่ง่ายมาก. มันหมายถึง ทำงานได้อย่างสมบูรณ์บนอุปกรณ์พกพา,...

ทุกคนรู้เกี่ยวกับ คำแนะนำ และมีแหล่งข้อมูลฟรีมากมายที่จะช่วยคุณสร้างมันขึ้นมา อย่างไรก็ตาม, ฟองข้อความที่กำหนดเอง หรือ “poppers” ยังมีประโยชน์มาก. พวกเขา ไม่ จำกัด เพียงการโฮเวอร์กิจกรรม, เพื่อให้สามารถปรากฏบนหน้าอย่างสม่ำเสมอและหลีกเลี่ยงพฤติกรรมผู้ใช้อื่น ๆ. หากคุณต้องการสร้างสิ่งเหล่านี้ poppers ฟองคำพูด บนเว็บไซต์ของคุณแล้ว Popper.js เป็นตัวเลือกที่ดีที่สุด มันเป็นปลั๊กอินโอเพนซอร์สฟรีโฮสต์บนเว็บไซต์ทางการ js.org. คุณจะพบเคล็ดลับฟองสบู่เหล่านี้ในเว็บไซต์จำนวนมากที่มีส่วนต่อประสานที่ซับซ้อน บางครั้งพวกเขาจะเสนอ เคล็ดลับอย่างรวดเร็ว, เกมส์, และ คำแนะนำออนบอร์ด สำหรับผู้ใช้ใหม่ในอินเทอร์เฟซ. ด้วย...

กรอบส่วนหน้า ควรจะเป็น น้ำหนักเบาและใช้งานง่าย. Bootstrap นั้นเป็นที่นิยมมากที่สุดถึงแม้ว่ามันจะเป็นหนึ่งในรุ่นที่หนักที่สุด และในโลกที่มีทางเลือกมากมายสำหรับ Bootstrap มันอาจเป็นการยากที่จะหาคนที่คุณชอบ. Mini.css คือ กรอบที่ใหม่กว่า และมันขึ้นอยู่กับชื่อของมันจริงๆ ขณะนี้อยู่ในเวอร์ชัน 2.x เฟรมเวิร์กนี้มีวัตถุประสงค์เพื่อเป็น มีขนาดเล็กที่สุด, ปัจจุบันมีน้ำหนักเพียง 7KB เมื่อ gzipped. กรอบทั้งหมดคือ ตอบสนองมือถือ และควรทำงานกับเลย์เอาต์ที่คุณต้องการ แต่เป้าหมายคือการทำให้ห้องสมุดนี้เพรียวบาง เสนอของจำเป็นสำหรับงานของคุณ. คุณสามารถ ติดตั้ง Mini.css ด้วยระบบการจัดการแพ็คเกจ เช่น...

กราฟิกและภาพมีบทบาทสำคัญในการปรับปรุงเนื้อหาเว็บ ด้วยเทคโนโลยีที่ทันสมัยมันง่ายมากที่จะเพิ่มภาพที่กำหนดเองเช่นไอคอน SVG ลงในหน้าของคุณ. แต่อีกหนึ่งภาพที่น่าแปลกใจที่คุณสามารถสร้างได้ตั้งแต่ต้นคือแผนภูมิเว็บ. สิ่งนี้สามารถช่วยคุณได้ วาดกราฟข้อมูลด้วยสายตา เพื่อให้ผู้เยี่ยมชมสามารถอ่านข้อมูลที่เกี่ยวข้องได้อย่างรวดเร็ว และแทนที่จะเขียนกราฟด้วยตัวคุณเองคุณสามารถใช้ห้องสมุดอย่าง Billboard.js เพื่อยกของหนัก. นี่คือการสร้างจริงบน D3 ซึ่งเป็นห้องสมุดการสร้างภาพข้อมูล JavaScript เป็นสิ่งที่ได้รับความนิยมมากที่สุดอย่างง่ายดายทำให้เป็นระบบที่ปลอดภัยที่สุดที่คุณสามารถขอได้. ด้วย Billboard.js คุณสามารถเข้าถึง D3 API ได้อย่างรวดเร็วและง่ายดาย เป้าหมายหลักของ Billboard คือ ใช้งานง่ายทำให้ทุกคนสามารถเข้าถึงได้. แม้ว่ามันจะช่วยให้มีประสบการณ์กับ JavaScript แต่คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญ. เพียงสังเกตว่า...

ปุ่มตัวเลือกเริ่มต้นของ HTML5 ค่อนข้างน่าเบื่อ มีหลายวิธีที่จะ ปรับแต่งพวกเขา ใช้ CSS3 แต่เทคนิคส่วนใหญ่ เน้นเฉพาะรูปลักษณ์. Radiobox.css เน้นไปที่ รูปลักษณ์ และ สไตล์ เพิ่มภาพเคลื่อนไหว CSS3 ที่กำหนดเองไปยังอินพุตวิทยุ. ห้องสมุดนี้คือ ฟรีทั้งหมด และ โอเพ่นซอร์ส, พร้อมใช้งานบน GitHub เพื่อดาวน์โหลด ด้วยไลบรารี CSS นี้คุณสามารถเลือกจาก ภาพเคลื่อนไหวมากกว่า 12 แบบ...

ภาพเคลื่อนไหวบนเว็บ เสนอวิธีการ ดึงดูดความสนใจของผู้คน และ วาดพวกเขาต่อไป เข้าสู่เว็บไซต์ มีเครื่องมือมากมายให้ทำ สร้างภาพเคลื่อนไหวฟรี แต่ Shift.css เป็นหนึ่งในกลุ่มใหม่ล่าสุด. มันคือ กรอบโอเพนซอร์สฟรี ทำเพื่อการสร้าง ภาพเคลื่อนไหวแบบไดนามิกภายในคอนเทนเนอร์ใด ๆ. และภาพเคลื่อนไหวเหล่านี้ ไม่ได้ถูกล็อคเป็นหนึ่งลำดับ. คุณสามารถสร้างภาพเคลื่อนไหวที่กำหนดเองได้ แต่ละองค์ประกอบ ในบล็อกและใช้สิ่งเหล่านี้ ในลำดับที่แน่นอน. เปลี่ยนหน้าตัวอย่าง สามารถแสดงให้คุณดีกว่าที่ฉันสามารถอธิบายเป็นคำพูดได้. สิ่งหนึ่งที่คุณจะสังเกตได้คือองค์ประกอบแต่ละอย่างภายในคอนเทนเนอร์คือ องค์ประกอบ HTML แยกต่างหาก. ไม่ว่าจะเป็น SVG...