เลย์เอาต์เว็บรุ่นใหม่ - National Geographic Forest Giant

Christopher Gammon
Christopher Gammon

การใช้เครื่องมือจาก CSS และเลย์เอาต์เบราว์เซอร์ช่วยให้คุณแสดงภาพเนื้อหาเว็บได้อย่างน่าทึ่ง การใช้ฟีเจอร์ของเว็บ เช่น ฟิลเตอร์ CSS, WebGL, วิดีโอ HTML5, SVG, Canvas และเทคโนโลยีแห่งอนาคตที่พัฒนาอย่างต่อเนื่อง เช่น ภูมิภาค CSS, รูปร่าง CSS และฟิลเตอร์ที่กำหนดเองของ CSS จะช่วยให้คุณสร้างสรรค์งานได้มากขึ้น Adobe มีประสบการณ์ยาวนานในการทำงานร่วมกับผู้สร้างเนื้อหาที่หลงใหลในเลย์เอาต์และการออกแบบ จึงใช้ความรู้นี้กับเว็บอย่างสม่ำเสมอและมีส่วนร่วมในมาตรฐานเว็บที่พัฒนาอย่างต่อเนื่องมากมาย

เราใช้เนื้อหาจากฟีเจอร์ "ยักษ์แห่งป่า" ของ National Geographic ในการสร้างโปรโตไทป์ที่แสดงให้เห็นว่าฟีเจอร์เหล่านี้ช่วยให้เลย์เอาต์เว็บที่สมบูรณ์และเทคนิคการตอบสนองได้อย่างไร บทความนี้จะแสดงวิธีที่เราสร้างลักษณะที่น่าสนใจบางอย่างของเว็บไซต์ หากต้องการทราบภาพรวมแบบกระชับ เราขอแนะนำให้ดูวิดีโอด้านล่างนี้ ซึ่ง Christian Cantrell จะแนะนำฟีเจอร์ต่างๆ ของเว็บไซต์

รายละเอียดของเลย์เอาต์

องค์ประกอบของเลย์เอาต์ที่ยอดเยี่ยมและฟีเจอร์ที่อยู่เบื้องหลังอาจมองไม่เห็นได้ชัด เราจึงสร้าง "การวางซ้อนของผู้แก้ไข" ซึ่งจะไฮไลต์ฟีเจอร์ที่น่าสนใจมากขึ้น หากต้องการเปิดใช้เครื่องหมายผู้แก้ไข ให้คลิกแถบที่ด้านล่างของบทความ

รูปภาพเครื่องหมายของบรรณาธิการ

ไม่ได้เชื่อมโยงกับเลย์เอาต์

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

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

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

ใน CSS ด้านบน เรากําลังสร้างโฟลว์ที่มีชื่อเรียกว่า "story" เนื้อหาของขั้นตอนที่มีชื่อนี้คือองค์ประกอบที่มีรหัส "storyContent" จากนั้นจะส่งผ่านไปยังองค์ประกอบทั้งหมดที่มีชื่อคลาส "story" ภูมิภาค CSS เป็นเครื่องมือที่ยอดเยี่ยมสําหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งช่วยให้ใช้ฟีเจอร์ต่างๆ ได้ เช่น หลายคอลัมน์และคอลัมน์ที่เลื่อนออกเพื่อให้ได้เลย์เอาต์ที่สมบูรณ์บนหน้าจอขนาดใหญ่ ขณะที่ปรับเป็นเลย์เอาต์คอลัมน์เดียวบนหน้าจอขนาดเล็ก นอกจากนี้ คุณยังตั้งค่าขนาดของส่วนได้ด้วยหน่วยที่ปรับเปลี่ยนตามพื้นที่โฆษณา เช่น vw หรือ vh ซึ่งสามารถใช้เพื่อไม่ให้คอลัมน์สูงกว่าความสูงของวิวพอร์ตในเลย์เอาต์ โดยไม่ต้องกังวลว่าเนื้อหาจะถูกตัดออก เนื่องจากเนื้อหาจะไหลไปยังองค์ประกอบถัดไปในเชนภูมิภาคอย่างเป็นธรรมชาติ

ตัวพิมพ์แรกแบบตัวพิมพ์ใหญ่

การยกเว้น CSS ช่วยให้เราตัดข้อความให้อยู่รอบหรือภายในรูปร่างที่ไม่สม่ำเสมอได้ ซึ่งมีประโยชน์สำหรับการออกแบบที่มีลูกเล่น เช่น ตัวพิมพ์ใหญ่ขึ้นต้น ตัวพิมพ์แรกแบบตัวห้อยเป็นแนวทางการออกแบบที่ใช้กันโดยทั่วไป ซึ่งจะขยายตัวอักษรตัวแรกของเรื่องหรือบทหนึ่งๆ เพื่อให้ข้อความที่เหลือตัดขึ้นที่ด้านบนและด้านล่างของตัวอักษร ผลลัพธ์นี้คล้ายกับวิธีที่เนื้อหาในบรรทัดตัดขึ้นลงตามค่าลอย แต่การยกเว้นช่วยให้เราไม่ต้องจำกัดตัวเองให้ใช้เฉพาะกล่องสี่เหลี่ยมผืนผ้าอีกต่อไป การใช้ shape-outside ในองค์ประกอบประเภทลอยช่วยให้เรากําหนดเรขาคณิตที่ช่วยให้เนื้อหาตัดขึ้นรูปตามรูปร่างของตัวละครได้

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

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

รูปภาพตัวอักษรหัวบรรทัด

รูปร่าง

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

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

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
รูปภาพรูปร่าง CSS

ข้อความแบบสมดุล

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

นี่เป็นตําแหน่งที่เราใช้ข้อความที่สมดุลภายในบทความ เนื่องจากฟีเจอร์นี้เป็นมาตรฐานที่ Adobe เสนอ เราจึงใช้ polyfill ที่ Randy Edmunds สร้างขึ้นเพื่อให้ได้ผลลัพธ์เดียวกัน ฟีเจอร์นี้เหมาะสําหรับกรณีที่ตอบสนอง เมื่อปรับขนาดเบราว์เซอร์ คุณจะเห็นว่าบล็อกยังคงจัดข้อความให้สมดุลเพื่อให้บรรทัดมีความกว้างใกล้เคียงกัน การใช้ polyfill ข้อความที่ปรับสมดุลนั้นง่ายมาก เนื่องจากเป็นปลั๊กอิน jQuery เพียงใช้ "balanceText()" กับตัวเลือกเมื่อเลย์เอาต์มีการเปลี่ยนแปลง เราก็จะได้ข้อความที่ปรับสมดุลอย่างดีดังรูปภาพต่อไปนี้

$('.balance').balanceText();
รูปภาพข้อความที่สมดุล

กรองทรานซิชัน

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

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

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

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

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

$("#map").css("webkitFilter", "none");

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

รูปภาพการพลิกหน้า

พื้นผิวที่ผ่านการจัดการแสดงผลล่วงหน้าใน WebGL

หัวใจสำคัญของบทความนี้คือรูปภาพ "The President" ที่สมบูรณ์ภาพแรก ซึ่งเชื่อว่าเป็นต้นไม้ที่ใหญ่ที่สุดเป็นอันดับ 2 ของโลกตามปริมาตร รูปภาพนี้สร้างขึ้นโดยการต่อภาพต้นไม้หลายร้อยรูปเข้าด้วยกันเพื่อสร้างภาพเต็ม เราต้องการจำลองกระบวนการนี้โดยแบ่งรูปภาพออกเป็นกลุ่มรูปภาพเล็กๆ ที่ลอยมารวมกันเป็นภาพเต็ม ซึ่งทำได้โดยใช้ WebGL โดยเฉพาะกับไลบรารี Three.js ซึ่งเป็น API Wrapper ระดับที่สูงขึ้นรอบๆ WebGL

รูปภาพต้นไม้ขนาดใหญ่

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

หากต้องการเลื่อนตำแหน่งพื้นผิว เราจะแก้ไข UV ซึ่งแมปพื้นผิวกับเรขาคณิต ใน Three.js โค้ดจะมีลักษณะดังนี้

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

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

ฟีเจอร์ทดลอง

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

เมื่อติดตั้ง Chrome Canary และกำหนดค่าอย่างถูกต้องแล้ว ให้ดูการสาธิต (โปรดทราบว่าทั้งโปรเจ็กต์เป็นแบบโอเพนซอร์สและมีให้บริการบน GitHub)

บทสรุป

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

เลย์เอาต์ของเว็บเบราว์เซอร์มีการเปลี่ยนแปลงอยู่ตลอดเวลา เราจึงเห็นว่าผู้ใช้ต้องการคงคุณค่าการผลิตและคุณภาพเลย์เอาต์ที่เราเคยชินกับเนื้อหาการอ่านเดิมไว้ ฟีเจอร์ต่างๆ เช่น ภูมิภาค CSS, การยกเว้น, ข้อความที่ปรับสมดุล, ตัวกรองที่กำหนดเอง และ WebGL จะช่วยให้ครีเอเตอร์เนื้อหาไม่ต้องเลือกระหว่างการเข้าถึงกับคุณภาพการออกแบบอีกต่อไป "Forest Giant" เป็นสัญญาณที่ชัดเจนว่าเว็บแห่งอนาคตจะรองรับทั้ง 2 รูปแบบ