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

Christopher Gammon

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

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

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

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

อิงตามเลย์เอาต์

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

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

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

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

หมวกแบบหล่น

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

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

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

รูปร่าง

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

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

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

ข้อความที่สมดุล

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

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

$('.balance').balanceText();

ฟิลเตอร์การเปลี่ยน

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

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

ตัวกรองที่กำหนดเองจะเขียนโดยใช้ 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

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

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

เพื่อชดเชยพื้นผิว เรากำลังปรับเปลี่ยนยูวีซึ่งจับคู่พื้นผิวกับเรขาคณิต ใน 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 รูปแบบ