20 โครงการคริสต์มาสสุดยอดเยี่ยมที่ซ่อนอยู่ใน CodePen

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

ในโพสต์นี้เราจะดูที่ 20 สุดยอดการทดลองคริสต์มาสใน CodePen, ที่คุณสามารถใช้เป็นแรงบันดาลใจในการสร้างงานออกแบบของคุณเอง.

1. เพลงคริสต์มาสสำหรับครอบครัว

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

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

2. ต้นคริสต์มาสดิจิตอล

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

3. อนิเมชั่นคริสต์มาสพร้อม Snowfall

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

4. Santa On The Run!

ซานต้าบนรัน! เป็นเกมจาวาสคริปต์ที่สนุกสำหรับวันหยุดที่ใช้เฟรมเวิร์กเกม phaser.js มีกฎไม่มากเกินไปในเกมนี้: ซานต้าวิ่งไม่สิ้นสุดหรืออย่างน้อยก็จนกว่าเขาจะล้มลง ปากกานี้ให้โอกาสที่ยอดเยี่ยมแก่คุณในการทำความเข้าใจวิธีเขียนเกมที่ง่ายกว่าใน JavaScript.

5. ตัวเลือกชื่อซานตาลับ

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

6. ลูกบอลคริสต์มาสใน CSS บริสุทธิ์

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

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

7. เกล็ดหิมะที่เคลื่อนย้ายได้

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

เกล็ดหิมะนั้นสร้างขึ้นใน CSS3 และพื้นหลังใช้การไล่ระดับสี - ไม่มีภาพในปากกานี้เลย.

8. การทดลองหีบเพลงวันหยุด

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

SVG นั้นมีประสิทธิภาพมากกว่าที่พวกเขาพบเห็นตั้งแต่แรกเห็นพวกเขาสามารถจัดวางอย่างชาญฉลาดและออกแบบด้วยกฎสไตล์เดียวกับที่เราใช้กับองค์ประกอบ HTML ปกติ.

9. มนุษย์หิมะ CSS Pure Pure

ใครบอกว่าการออกแบบแนวราบต้องน่าเบื่อ? มนุษย์หิมะผู้น่ารักคนนี้สามารถเพิ่มจิตวิญญาณคริสมาสต์ในการออกแบบได้อย่างง่ายดาย ไม่มีภาพที่ใช้สำหรับมนุษย์หิมะมันเขียนอย่างสมบูรณ์ใน CSS ควรดูที่โค้ด CSS สักครู่และดูว่านักพัฒนาใช้อย่างไร: ก่อนและ: หลังจากตัวเลือกหลอกเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ.

10. CSS3 เกล็ดหิมะ

คุณสามารถอำนวยความสะดวกในการสร้างรูปภาพ CSS3 เท่านั้นโดยใช้เครื่องมือการพัฒนาขั้นสูงด้านหน้า เกล็ดหิมะ CSS3 ที่ออกแบบมาอย่างดีนี้เป็นตัวอย่างที่ยอดเยี่ยมสำหรับสิ่งนี้ นักพัฒนาใช้ประโยชน์จากภาษา templating ของ Jade ที่รวบรวมเป็น HTML และตัวประมวลผลล่วงหน้าของ Sass CSS เพื่อใช้การออกแบบเกล็ดหิมะที่น่าทึ่งนี้.

11. ปุ่มคริสต์มาส

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

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

12. สุขสันต์วันหยุด Parallax

ถ้าคุณชอบการเลื่อนแบบพารัลแลกซ์ทำไมคุณไม่ใช้มันในการออกแบบวันหยุดของคุณล่ะ? ผู้พัฒนาปากกานี้ทดลองอย่างชาญฉลาดด้วยเอฟเฟกต์และใช้ปลั๊กอิน jallery Parallax.js ด้วยวิธีที่ใช้กันน้อยกว่าผลการเลื่อนไม่ได้เป็นแนวตั้งตามปกติ แต่เป็นแนวนอน บรรยากาศคริสต์มาสจะทวีความรุนแรงด้วยหิมะที่น่าประทับใจ

ถ้าฉันต้องเลือกข้อบกพร่องใด ๆ ของปากกานี้มันจะเป็นตัวเลือกสี: ตัวอักษรสีขาวบนพื้นหลังสีขาวบางส่วนทำให้การเข้าถึงการออกแบบอ่อนแอลงอย่างมีนัยสำคัญ.

13. CSS กระดาษห่อของขวัญคริสต์มาส

คุณสามารถสร้างกระดาษห่อของขวัญคริสต์มาสที่ไม่เหมือนใครได้ด้วยความช่วยเหลือของ CSS3 ผู้พัฒนาปากกานี้ไม่เพียงแสดงตัวเดียว แต่มีหกรุ่นสำหรับสิ่งนี้ รูปแบบที่สวยงามนั้นเกิดขึ้นได้จากการใช้การไล่ระดับสี CSS อย่างชาญฉลาดและคุณสมบัติโหมดผสมฉากหลัง.

คุณสามารถค้นหาตัวอย่างเจ๋ง ๆ เพิ่มเติมและคำอธิบายโดยละเอียดเกี่ยวกับเว็บไซต์ของผู้พัฒนาเอง.

14. กล่องภายในกล่อง

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

15. กล่องของขวัญพร้อม Paper Peel Effect

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

16. Holiday Canvas ที่มีชีวิตชีวา

คริสต์มาสเป็นช่วงเวลาที่ดีสำหรับการทดลองกับสิ่งใหม่ ๆ เช่นเดียวกับที่นักพัฒนาทำในปากกานี้โดยใช้ผ้าใบ HTML5 เป็นพื้นหลังแบบเคลื่อนไหว ผืนผ้าใบมาก่อนเนื้อหา (สุขสันต์วันหยุด!) ในไฟล์ HTML และตั้งเป็นพื้นหลังด้วยความช่วยเหลือของการวางตำแหน่ง CSS อัจฉริยะ.

ปากกายังใช้สคริปต์ภาพเคลื่อนไหวพื้นหลังที่รวมเป็นไฟล์ JavaScript แยกต่างหาก.

17. UI บัตรของขวัญ

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

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

18. CSS สุขสันต์วันคริสต์มาสการ์ดบริสุทธิ์

การหัวเราะซานต้าอย่างไร้ขีด จำกัด ซึ่งใช้เพียง HTML และ CSS3 เท่านั้นสามารถเปิดโอกาสให้คุณเข้าใจวิธีการใช้ไวยากรณ์ภาพเคลื่อนไหวเฟรมหลักในทางปฏิบัติ ใน CSS3 คุณสามารถใช้กฎ @keyframes เพื่อระบุกฎของภาพเคลื่อนไหวและจากนั้นคุณสามารถผูกภาพเคลื่อนไหวที่ระบุนี้กับองค์ประกอบบางอย่างได้โดยใช้คุณสมบัติ CSS3 ของภาพเคลื่อนไหว.

คุณต้องเพิ่มชื่อของคีย์เฟรมเป็นค่าแรกของคุณสมบัติภาพเคลื่อนไหวเช่นเดียวกับผู้พัฒนาทำเช่นนี้ด้วยคีย์เฟรมแบบกำหนดเองที่เรียกว่า bodyLaugh, beardLaugh, headLaugh และ mouthLaugh ที่สร้างขึ้นโดยเฉพาะสำหรับปากกานี้.

19. Xmas Cracker

หากคุณวางตัวบน Xmas Cracker ที่น่าประทับใจมันจะเผยให้เห็นข้อความคริสต์มาสที่ไม่เหมือนใครซึ่งเป็นวิธีที่น่าอัศจรรย์ในการอวยพรสุขสันต์วันคริสต์มาสให้กับผู้เยี่ยมชมของคุณ HTML ถูกเขียนใน HAML ซึ่งเป็นภาษามาร์กอัป Abstraction HTML ในขณะที่กฎสไตล์ใช้ประโยชน์จากพลังของภาษา Sass Syntactically Awesome Styesheets.

ผลลัพธ์ที่ได้นั้นยอดเยี่ยมและยอดเยี่ยมแน่นอน ด้วยการเพิ่ม JavaScript อีกเล็กน้อยก็สามารถใช้เพื่อส่งราคาหรือข้อความที่กำหนดเองไปยังผู้ใช้.

20. ไฟกะพริบคริสต์มาส

ไฟกะพริบคริสต์มาสเหล่านี้สามารถมอบบรรยากาศที่เป็นเอกลักษณ์ให้กับเว็บไซต์ใด ๆ ได้อย่างรวดเร็ว รหัสส่วนหน้าเขียนด้วย HAML ที่คอมไพล์เป็น HTML, Sass ที่คอมไพล์เป็น CSS และ jQuery.

เอฟเฟกต์การเรืองแสงแบบเคลื่อนไหวทำได้โดยกฎ @keyframes ดังที่ระบุโดย CSS3 สีของไฟ LED ถูกตั้งค่าในไฟล์ jQuery โดยเพิ่ม 50 องศาให้กับค่า Hue ของไฟ LED ก่อนหน้านี้โดยใช้ระดับสี HSL.