สร้างการไล่ระดับสีที่สวยงามด้วย Granim.js

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

กับ Granim.js, คุณสามารถสร้าง การเปลี่ยนสีไล่ระดับสีแบบกำหนดเอง ที่ดูเรียบเนียนและสอดรับกับเว็บไซต์ใด ๆ.

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

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

เพียงแค่ วาง granim.js ไฟล์ลงในหน้าของคุณ ที่จะเริ่มต้น. คุณสามารถดาวน์โหลดสำเนาจาก GitHub หรือโฮสต์หนึ่งจาก CDN สด.

ต่อไปนี้คือ ตัวอย่างรหัสพื้นฐาน จาก repo GitHub:

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

สามารถใช้มาสก์รูปภาพสำหรับโลโก้ได้เช่นภาพ PNG ซึ่งซ่อนอยู่หลังการไล่ระดับสี สิ่งนี้ช่วยให้คุณสร้าง โลโก้ JS-animated ที่การไล่ระดับสี เปลี่ยนช้าตลอดทั้งข้อความ.

หมายเหตุตัวอย่างนี้ใช้ มาก ของรหัส JS / CSS ดังนั้นมันจึงไม่ใช่การติดตั้งที่ง่าย.

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

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

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

ไปยัง ดาวน์โหลดสำเนา ไปที่หน้าเผยแพร่ใน GitHub หรือหยิบสำเนาของ .js ไฟล์โดยตรงจาก cdnjs และ ดูแหล่งที่มาในตัวอย่างสด ดูตัวอย่าง CodePen นี้ที่สร้างโดย Jonathan Schneider.