สร้างสปินเนอร์และตัวโหลดองค์ประกอบเดียวด้วย CSSPIN

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

หนึ่งในสิ่งที่ยากที่สุดในการสร้างคือ โหลดภาพเคลื่อนไหวปินเนอร์ แต่แอนิเมชั่น CSS ที่ทันสมัยทำให้มันง่าย.

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

การตั้งค่าสปินเนอร์ด้วยห้องสมุดนี้เป็นเรื่องง่าย คุณเพียงแค่ คัดลอกไลบรารี CSS ลงในหน้าของคุณแล้ว เพิ่มองค์ประกอบ HTML ที่กำหนดเอง ทุกที่ที่คุณต้องการให้ปรากฏ.

สปินเนอร์ที่กำหนดเองเหล่านี้ใช้เท่านั้น องค์ประกอบ HTML หนึ่งรายการ เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหว นี่เป็นเรื่องใหญ่เพราะกราฟิกและเอฟเฟกต์อนิเมชั่นคือ แสดงผลอย่างหมดจดผ่านคลาส CSS.

และเนื่องจากคุณสามารถเข้าถึงซอร์สโค้ดได้ แทนที่รูปร่างสีขนาดและความเร็วของภาพเคลื่อนไหว เพื่อให้เหมาะกับโครงการของคุณมากขึ้น.

เพียงแค่จดรหัส จะใช้ไวยากรณ์น้อยกว่า, ดังนั้นคุณจะต้องคุ้นเคยกับภาษาก่อนการประมวลผลเพื่อทำการแก้ไขที่สำคัญ.

แต่คุณสามารถค้นหามากมาย ตัวอย่าง CSS ธรรมดา ในหน้าสาธิตหลักพร้อมด้วย คำแนะนำง่ายๆ ในหน้า GitHub.

หากคุณคุ้นเคยกับ NPM หรือ ซุ้มไม้ในสวน เหล่านี้คือ วิธีการทางเลือก สำหรับการติดตั้งห้องสมุด.

ไม่ว่าคุณจะติดตั้งอย่างไรมันก็เป็นไลบรารี่ภาพเคลื่อนไหว CSS ที่ยอดเยี่ยมในการทำงาน มันควรจะเป็น แบบแยกส่วนอย่างเต็มที่ มีพื้นที่เหลือเฟือสำหรับนักปั่นใหม่ภาพเคลื่อนไหวใหม่และการปรับแต่งจากนักพัฒนาคนอื่น ๆ.

หากต้องการเรียนรู้เพิ่มเติมและเรียกดูเอกสารทั้งหมดให้ดูที่ CSSPIN repo บน GitHub. ผู้สร้างก็ทำเรื่องเล็ก ๆ ตั้งค่าวิดีโอ ที่คุณสามารถดูด้านล่าง.