Toolkit - หน้า 22

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

แอนิเมชั่นแฟนซีเป็นสิ่งที่น่าสนใจบนเว็บ พวกเขากำลังสร้างง่ายขึ้นด้วยความเหลือเชื่อมากมาย ห้องสมุดภาพเคลื่อนไหว. Cascade.js เป็นอีกหนึ่งห้องสมุดที่จะเพิ่มลงในรายการและเป็นห้องสมุดที่ไม่เหมือนใคร ด้วย Cascade คุณสามารถออกแบบเอฟเฟ็กต์ภาพเคลื่อนไหวที่กำหนดเองโดยใช้ ตัวอักษรเรียงซ้อน ในข้อความหรือ องค์ประกอบแบบเรียงซ้อน ในภาชนะหลัก. ห้องสมุดนี้มี ไม่มีการพึ่งพา; มันทำงานบน JavaScript คลาสสิก คุณสามารถติดตั้งได้จนถึงเวลา 23.00 น. Bower หรือโดยการดาวน์โหลดสำเนาจาก GitHub. เพื่อให้ CascadeJS ทำงานได้คุณจะต้อง ต้องการสองไฟล์: ไฟล์ CSS และไฟล์...

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

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

ส่วนสำคัญของเนื้อหาออนไลน์นั้นใช้ข้อความเป็นหลัก แต่ผู้คนจะไม่สนใจที่จะอ่านข้อความบนเว็บไซต์ของคุณเว้นแต่ว่าตัวอักษรนั้นได้รับการออกแบบมาอย่างดี. คุณอาจทำงานกับ เฟรมเวิร์กที่กำหนดเอง แต่สามารถรู้สึกเข้มงวด. ลองใช้ Sassline ซึ่งเป็นห้องสมุดที่ใช้ Sass ฟรีเพื่อสร้างกริดแบบสมบูรณ์แบบบนเว็บ. เครื่องมือฟรีนี้ทำงานบน Sass ดังนั้นคุณจะต้องรู้วิธีแก้ไขภาษานั้นก่อน หากคุณยังใหม่ต่อการพัฒนาเว็บไซต์ก็เป็นความคิดที่ดี ฝึกฝน CSS และ Sass ของคุณก่อนเลือก Sassline. แต่เมื่อคุณเรียนรู้แล้วคุณจะไม่สามารถออกแบบเลย์เอาต์ในลักษณะเดียวกันได้อีก. มันใช้หน่วยความจำในการสร้าง เส้นเขตแดนที่กำหนดเองที่เหมาะกับข้อความของคุณทั่วกระดาน. ซึ่งรวมถึงส่วนหัวย่อหน้าบล็อกโคตต์ทุกอย่างของคุณ. และ Sassline มาพร้อมกับเบรกพอยต์ที่ตอบสนองเพื่อให้คุณสามารถปรับขนาดข้อความของคุณ (และความสูงของบรรทัด) โดยอัตโนมัติตามตาราง Sassline...

หากคุณต้องการ สร้างองค์ประกอบที่ยืดหยุ่นที่เติมตู้คอนเทนเนอร์โดยอัตโนมัติ ฉันขอแนะนำให้ปรับขนาดได้ สคริปต์ JS โอเพนซอร์สฟรีนี้เหมาะสำหรับการสร้างการออกแบบที่ลื่นไหลโดยไม่ต้องเครียด. ทุกอย่างในไลบรารี Scalable.js นั้นมีความอ่อนตัวคุณจึงสามารถเปลี่ยนสไตล์ขนาดตำแหน่งและเนื้อหาภายในของคอนเทนเนอร์ได้ ต้องการองค์ประกอบที่จัดชิดกับด้านบนหรือด้านล่างของหน้า? Scalable มีตัวเลือกสำหรับสิ่งนั้น. ดู repo ของ GitHub เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการทำงานของมัน. ในรูปแบบพื้นฐานที่สุดสคริปต์นี้ใช้องค์ประกอบหน้าเป้าหมายพร้อมกับตัวเลือกบางอย่างสำหรับปรับแต่งการแสดงผล นี่คือตัวอย่างโค้ดที่นำมาจาก GitHub โดยตรง: var scalable = new Scalable (containerEl, ตัวเลือก); โดยปกติแล้วพารามิเตอร์แรกคือองค์ประกอบคอนเทนเนอร์ใดที่คุณกำลังกำหนดเป้าหมาย หรือสิ่งที่คล้ายกัน)....

แผนภูมิข้อมูลไม่ใช่สิ่งที่น่าสนใจที่สุดในการดู, โดยเฉพาะอย่างยิ่งที่เต็มไปด้วยข้อมูล หากคุณพบว่าแผนภูมิข้อมูลมาตรฐานคือ ไม่สามารถรักษาความสนใจของคุณ, Google มีเครื่องมือใหม่ที่สามารถแก้ไขได้ ก็เรียกว่า Data Gif Maker ที่สามารถเปลี่ยนชุดข้อมูลของคุณให้เป็น Gif ที่เคลื่อนไหวได้อย่างสมบูรณ์. ตรรกะที่อยู่เบื้องหลังนั้นคือไม่เหมือนกับเครื่องมือสร้างแผนภูมิแบบคงที่ผู้ใช้จะสามารถดูดซับข้อมูลเพิ่มเติมจาก Gif แบบเคลื่อนไหว เหมือนกับ, การสร้างแผนภูมิของคุณเองก็ค่อนข้างตรงไปตรงมาเช่นกัน, และนี่คือวิธีที่คุณสามารถทำได้. เปิดขึ้นมา เว็บไซต์ Data Gif Maker และกรอกข้อมูลในตารางที่ให้ไว้ ด้วยข้อมูลที่จำเป็น (ชื่อค่าตัวอย่างข้อมูล). เมื่อข้อมูลอยู่ในสถานที่, เลือกสีที่จะใช้ เพื่อแสดงข้อมูลเฉพาะนั้น...

เว็บเกม ได้มาไกลขอบคุณ WebGL และ HTML5 APIs ที่เกี่ยวข้อง. ไลบรารีโอเพ่นซอร์สที่โดดเด่นที่สุดสำหรับ 3D คือ Three.js. ในขณะที่ Three.js นั้นทรงพลัง แต่ก็มีเช่นกัน ซับซ้อนในการเรียนรู้ตั้งแต่เริ่มต้น. แต่คุณสามารถ รับ Whitestorm.js, เฟรมเวิร์กโอเพนซอร์ซสำหรับเว็บกราฟิก 3 มิติ มัน ใช้ Three.js ในฐานะที่เป็นเทคโนโลยีพื้นฐานที่จะช่วยให้คุณสร้างได้เร็วขึ้นและสร้างเอฟเฟกต์ 3D สมจริงในเบราว์เซอร์. Whitestorm มาพร้อมกับมัน...