12 ฉากภูมิทัศน์ที่สร้างขึ้นทั้งหมดด้วย CSS & SVG

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

สิ่งนี้นำไปสู่โครงการที่ยอดเยี่ยมจริงๆ เช่น ภูมิทัศน์ SVG บริสุทธิ์ที่ฉันรวบรวมไว้ที่นี่

โปรเจ็กต์เหล่านี้ทั้งหมดสามารถแก้ไขและใช้งานได้ฟรี พวกเขาทำงานกับโค้ด SVG พร้อมกับ CSS & JS พื้นฐานบางอย่างเพื่อสร้างภาพเคลื่อนไหว การบิดเบือน และเอฟเฟกต์พารัลแลกซ์

อ่าว Hawke

ตัวอย่างภูมิทัศน์อ่าวที่สวยงามนี้พัฒนาโดย Louis Coyle มันเป็นไปตามรูปลักษณ์แบบโพลีซึ่งเลียนแบบการแสดงรูปหลายเหลี่ยมที่มักพบในการเรนเดอร์ 3 มิติ

เป็นเอฟเฟกต์ยอดนิยมกับ SVG และ JavaScript แต่ก็ไม่ง่ายเลยที่จะดึงออกมา

Louis ใช้ไลบรารี TweenMax เพื่อสร้างแอนิเมชั่นที่สวยงามทั้งในรูปแบบและโค้ด

หากคุณเคยต้องการที่จะขุดลงไปในโค้ด SVG ดิบ ข้อมูลโค้ดนี้มีมากมายให้เรียนรู้

ภูมิทัศน์โพลีต่ำ

นี่เป็นอีกภูมิทัศน์หนึ่งที่สร้างแบบจำลองตามรูปลักษณ์โพลีต่ำ

อันนี้มาจากนักพัฒนา Luke Reid และให้ความสำคัญกับเอฟเฟกต์ 3D มากขึ้น เลย์เอาต์ทั้งหมดให้ความรู้สึกเหมือนจริงมาก และการไล่ระดับท้องฟ้าที่โปรยปรายด้วยดวงดาวช่วยเติมชีวิตชีวาให้กับการออกแบบนี้

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

แอนิเมชั่นแนวนอน SVG

Evan Winston ได้พัฒนาแอนิเมชั่นแบบกำหนดเองนี้ซึ่งจะค่อยๆ หย่อนองค์ประกอบที่มองเห็นได้ทั้งหมดลงในมุมมอง

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

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

ภูมิทัศน์ทางทะเล

สำหรับมุมมองพื้นฐานริมทะเลสาบ ฉันกำลังขุดตัวอย่าง SVG นี้จริงๆ มันมีแอนิเมชั่นหน้าพื้นฐานสองสามอย่าง เช่น คลื่นในน้ำและเมฆในพื้นหลัง

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

แอนิเมชั่น CSS3 สมัยใหม่มีประโยชน์มากที่สุดในเว็บไซต์ที่มีแอนิเมชั่น UI/UX แต่คุณสามารถใช้มันสำหรับภาพทิวทัศน์หรือภาพประกอบได้เช่นกัน นั่นเป็นครึ่งหนึ่งของความสนุกของการเป็นนักพัฒนา

ภูมิทัศน์ฤดูหนาว

ภูมิทัศน์ฤดูหนาวนี้เป็นเครื่องเตือนใจถึงหิมะสีขาวที่คมชัดที่เราเห็นทุกปี

Andrey Sorokin สร้างแอนิเมชั่นพื้นฐานนี้ด้วยโค้ด SVG และ JavaScript บางตัว อาจเคลื่อนไหวได้ช้า ดังนั้นคุณอาจต้องให้เวลาสักครู่เพื่อดูผลทั้งหมด

ฉันประทับใจมากกับคุณภาพของเอฟเฟกต์การค่อยๆ เปลี่ยนและการทำงานในเบราว์เซอร์ได้ดีเพียงใด

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

ไม่ต้องพูดถึงแอนิเมชั่นของดวงอาทิตย์ที่ออกมาจากต้นไม้นั้นช่างน่ายินดี

ทิวทัศน์ SVG

เราได้เห็นการเติบโตอย่างมากในเทรนด์การออกแบบแฟลตและการออกแบบกึ่งแบนซึ่งทั้งหมดใช้สีพื้นฐานโดยไม่มีการไล่ระดับสี

ตัวอย่างนี้มีลักษณะเหมือนกันโดยมีขอบแข็งสำหรับเงาและมุม

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

ภูมิทัศน์ธรรมชาติ

นักพัฒนา Amr Zakaria ได้สร้างการออกแบบแนวราบที่คล้ายกับภูมิทัศน์นี้โดยใช้เรือและเครื่องบินที่เคลื่อนไหวเพื่อดึงดูดความสนใจของคุณ

สิ่งทั้งหมดทำงานบน CSS ล้วนๆ และทำงานกับแอนิเมชั่นคีย์เฟรม CSS ที่ค่อนข้างชัดเจน

ทั้งหมดนี้สามารถทำซ้ำสำหรับพื้นหลังบนเว็บเพจได้หากคุณมีความอดทนในการทำงาน ส่วนที่ยากที่สุดคือการตอบสนองอย่างเต็มที่สำหรับหน้าจอมือถือ

ไฟพารัลแลกซ์

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

องค์ประกอบทั้งหมดรวมถึงโคมไฟถนนได้รับการออกแบบด้วยรูปทรง SVG และเอฟเฟกต์ CSS

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

แอนิเมชั่นพื้นฐาน

ในภาพรวม SVG ที่อัปเดตนี้ คุณจะได้พบกับองค์ประกอบที่กำหนดเองจำนวนมากที่สะท้อนให้เห็น

ผู้สร้าง Stef van Dijk ให้ความสำคัญกับแต่ละแอนิเมชั่นด้วยการเพิ่มเอฟเฟกต์การกระเด้งและคล้ายแรงโน้มถ่วงในแต่ละชิ้น ตัวอย่างเช่น เมื่อภูเขาตกลงมา คุณจะสังเกตเห็นผลกระทบจากการสะท้อนกลับจากพื้นดิน

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

SVG & CSS

ดูที่ปากกานี้สำหรับแอนิเมชั่นพื้นหลังขนาดใหญ่พิเศษ สิ่งทั้งหมดนี้ใช้ได้กับ SVG และ CSS ล้วนๆ โดยไม่ต้องใช้ JavaScript

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

การออกแบบบางสิ่งเช่นนี้ต้องใช้เวลามาก แต่จะทำให้คุณคุ้นเคยกับไวยากรณ์ SVG อย่างแท้จริง พร้อมด้วยพื้นฐานของแอนิเมชั่น CSS

หญ้า

แม้ว่าภูมิทัศน์นี้จะเรียบง่ายมาก ฉันก็คิดว่ามันเป็นครูที่ยอดเยี่ยมสำหรับผู้เขียนโค้ดส่วนหน้าใหม่

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

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

หน้าพารัลแลกซ์

Chris Gruber ได้พัฒนาภูมิทัศน์พารัลแลกซ์ที่ไม่มีที่ติซึ่งเคลื่อนไหวตามการเคลื่อนไหวของเมาส์ของคุณ

แต่นอกเหนือจากนั้น เขายังทำให้องค์ประกอบบางหน้าเคลื่อนไหว เช่น เรือใบและก้อนเมฆในพื้นหลัง

ทั้งหมดนี้ต้องใช้ JavaScript เพียงเล็กน้อย เนื่องจากทำงานบน jQuery น้อยกว่า 20 บรรทัด ทั้งหมดที่น่าประทับใจยิ่งขึ้นเมื่อพิจารณาว่ารายละเอียดนี้เป็นอย่างไร