โฮมเพจ » Toolkit » รหัสภาพเคลื่อนไหวพิมพ์ดีดข้อความด้วย jQuery TypeIt

    รหัสภาพเคลื่อนไหวพิมพ์ดีดข้อความด้วย jQuery TypeIt

    คำสั่งผสมของ jQuery และข้อความ ไม่มีขอบเขตบนเว็บ คุณสามารถสร้างเกือบทุกอย่างด้วยความคิดสร้างสรรค์เล็กน้อยและไลบรารี JavaScript ที่ถูกต้อง.

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

    TypeIt ฟรีและโอเพนซอร์ซ 100% สร้างเป็น เครื่องมือข้อความสำหรับชุมชน jQuery. เอกสารทั้งหมดมีให้ทางออนไลน์และง่ายต่อการติดตามอย่างไม่น่าเชื่อ.

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

    คุณสามารถเริ่มต้นโดย การเพิ่มไฟล์ Raw TypeIt JavaScript ผ่าน CDN ไปยังส่วนหัวของหน้าเว็บของคุณ จากนั้นเพิ่ม jQuery เขียนข้อความและเชื่อมต่อเข้าด้วยกัน ง่าย!

    โดยทั่วไปแล้วคุณจะ กำหนดเป้าหมาย div เฉพาะบนหน้า และใช้เป็นที่เก็บสำหรับภาพเคลื่อนไหวข้อความ นี่คือ ข้อมูลโค้ดตัวอย่าง เพื่อแสดงให้คุณเห็นว่ามันทำงานอย่างไร:

     $ ('. type-it'). typeIt (strings: ['นี่คือสตริงของฉัน!']); 

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

    คุณสามารถทำได้ ทดสอบตัวเลือกเหล่านี้ ในหน้าปลั๊กอินหากคุณยินดีที่จะใช้เวลาเล่นกับการตั้งค่า.

    เครื่องมือสร้างแอนิเมชันข้อความนี้เป็นตัวอย่างที่สมบูรณ์แบบของสิ่งที่คุณสามารถทำได้กับปลั๊กอินนี้ คุณมีตัวเลือกที่กำหนดเองมากมายที่คุณสามารถสร้างเว็บแอปได้, ใช้ปลั๊กอินนี้, ไปยัง สร้างภาพเคลื่อนไหวได้ทันที!

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

    ดังนั้นดาวน์โหลด TypeIt และให้มันยิง! เมื่อคุณได้ทำงานมันสนุกมากจริงๆ และหากคุณมีคำถามหรือข้อเสนอแนะสำหรับนักพัฒนาคุณสามารถเชื่อมต่อกับเขาใน Twitter @amacarthur.