สร้างเอฟเฟกต์แบบเรียงซ้อนอย่างง่ายดายด้วย CascadeJS

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

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

ห้องสมุดนี้มี ไม่มีการพึ่งพา; มันทำงานบน JavaScript คลาสสิก คุณสามารถติดตั้งได้จนถึงเวลา 23.00 น. Bower หรือโดยการดาวน์โหลดสำเนาจาก GitHub.

เพื่อให้ CascadeJS ทำงานได้คุณจะต้อง ต้องการสองไฟล์: ไฟล์ CSS และไฟล์ JavaScript พวกเขาทั้งสองมาพร้อมกับ เวอร์ชันย่อ เพื่อประหยัด KBs ขนาดหน้าของคุณ.

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

แต่คุณจะต้อง ตั้งค่า ไหล() ฟังก์ชัน ในไฟล์ของคุณหลังจากกำหนดเป้าหมายองค์ประกอบใด ๆ ที่คุณต้องการทำให้เคลื่อนไหว.

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

นี่คือ ตัวอย่างของวานิลลา JavaScript จากการสาธิตของไซต์หลัก:

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

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

ทั้งหมด ตัวอย่างรหัส มีให้บริการอย่างเปิดเผยในหน้าห้องสมุดหลักเพื่อให้คุณสามารถคัดลอก / วางและคนจรจัดด้วยตัวคุณเอง แต่คุณจะพบว่า เอกสาร ในหน้า GitHub หากคุณกำลังมองหาวิธีการเริ่มต้นที่ชัดเจนยิ่งขึ้น.