Rock ‘n’ Roll

Rock ‘n’ Roll

ถ้าใครเคยเข้าเว็บของคิวบิกครีเอทีฟ (เช่นเว็บค่าย http://cubiccreative.org/creativecamp13) จะเห็นว่าเรามีการใช้เทคนิกที่ประกอบกับการเลื่อนของหน้าจออยู่หลายจุดเหมือนกัน เช่น parallax พาราแลกซ์ หรือการ snapping เลื่อนหัวข้อตามหน้าจอไปติดที่บางจุดของเนื้อหา ซึ่งโค้ดที่ใช้หลักๆ เริ่มมาตั้งแต่เว็บค่าย Cubic Creative Camp 10 แล้วก็ก็อปปี้แก้ไขจากเว็บหนึ่งมาอีกเว็บหนึ่งไปเรื่อยๆ ไม่มีหลักแหล่ง

แต่ทีนี้เพื่อให้โค้ดเหล่านี้นำไปใช้งานในเว็บใหม่ๆ ได้ง่ายขึ้น เราเลยตัดสินใจทำเป็น framework เฟรมเวิร์กที่สมบูรณ์ในตัวเอง โดยแยกโค้ดจากของเก่าเฉพาะที่เกี่ยวกับเอฟเฟคการเลื่อนหน้าจอต่างๆ ออกมา ปรับใช้รันได้ในตัวเองโดยไม่ใช้ jQuery แล้วตั้งชื่อว่า Rock ‘n’ Roll

ในเบื้องต้นตอนนี้แยกโค้ดออกมาสำหรับเอฟเฟคหลักๆ ได้แก่ Parallax, Zoom, Blur และ Fade แล้ว เดี๋ยวในอนาคตคงจะดูดโค้ดส่วนของ Scrolled, Clipping, Snapping และ Responsive มาใส่เพิ่มอีก

ถ้าใครสนใจ (จะมีไหม) ดูตัวอย่างได้ที่นี่ หรือจะไปโหลดมาแก้มาใช้จาก GitHub ของคิวบิกครีเอทีฟก็ได้ (เป็น repository เรโปแบบ public สาธารณะอันแรกเลยนะเนี่ย)

ภาพประกอบจากคิวบิกครีเอทีฟ

Advertisements

Javascript and Circumcision

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

(ปล. ปกติตามนโยบายของคิวบิกครีเอทีฟคงจะไม่สามารถมาโพสท์เรื่องงานในที่สาธารณะแบบนี้ได้ แต่ขออนุญาต CEO เป็นกรณีพิเศษแล้วเฉพาะกรณีนี้เท่านั้น ไม่ถือเป็นบรรทัดฐานในกรณีอื่นๆ แต่อย่างใด)

Screen Shot 2013-11-21 at 20.53.52

ก่อนอื่นเลย แนวคิดเริ่มต้นที่จะทำเว็บอันนี้ ตั้งใจไว้ว่าจะเป็นการซ้อมมือเพื่อเตรียมปรับสไตล์ของเว็บคิวบิกฯ ให้ตามสมัยนิยมมากขึ้น โดยถ้าให้สรุปหลักๆ ก็จะมีแนวคิดดีไซน์แบบ Flat Design, Big Picture, Parallax และ Scrolling-sensitive Content เข้าไว้ด้วยกัน

Flat Design

อันนี้ไม่มีอะไรมาก ตามสมัยนิยมที่นำเทรนด์โดย Microsoft ก็พยายามจะลดการไล่สีลงในหลายๆ จุดที่เป็นไปได้ แต่ด้วยความที่คิวบิกฯ ยังคงต้องการดีไซน์ที่ดูหวือหวามีมิติอยู่ การจะเปลี่ยนให้แบน 100% คงจะไม่เวิร์ค เพราะฉะนั้นในหลายๆ จุดก็จะยังมีการไล่สีอยู่ (เช่นพื้นหลัง หรือแบบอักษรหัวเรื่อง)

Big Picture

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

จริงๆ แนวคิด Big Picture ของคิวบิกครีเอทีฟเริ่มต้นอันแรกกับธีมเว็บไซต์ของ Paduppa Studio (เป็นธีมสำเร็จรูป ผู้เขียนไม่ได้ออกแบบเอง) หลังจากนั้นก็เริ่มมาใส่ในดีไซน์ของเว็บคิวบิกฯ ยุคที่ 5 (เริ่มประมาณปลายปี 2012 พร้อมๆ กับการเริ่มทำ Responsive Design กับการรองรับ Retina Display) ตัวอย่างที่เห็นชัดคือหน้าเกี่ยวกับคิวบิกครีเอทีฟ ซึ่งการใช้รูปใหญ่ๆ ยังเป็นดีไซน์ที่ง่ายกับการทำเว็บ Responsive และรองรับ Retina Display

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

Screen Shot 2013-11-21 at 22.03.09

Parallax

สุดท้าย คือเรื่องของการใช้อนิเมชันแบบ Parallax ตามสมัยนิยม ซึ่งเว็บแรกที่สะดุดตาคือเว็บของ Flickr และในช่วงปีที่ผ่านมาจะเห็นได้ว่ามีการใช้ดีไซน์ในลักษณะนี้เต็มไปหมด (เช่นเว็บ Apple ในช่วง Q4 2013)

สำหรับเว็บของ Cubic Staff Program อันนี้ จะมี Scrolling Parallax ที่รูปใหญ่ๆ ที่แทรกระหว่างเนื้อหาเป็นพักๆ ซึ่งจริงๆ แล้วเดี๋ยวนี้พวก Parallax ก็มีไลบรารีสำเร็จรูปที่ใช้ได้เต็มไปหมด แต่เนื่องจากโดยส่วนตัวเป็นพวกขอบเขียนโปรแกรมแบบฮาร์ดโค้ด และดูหนังโป๊แบบฮาร์ดคอร์ เลยเขียนเองแม่งแม่ของคุณเสียเลย

วิธีการก็คือว่า เราจะแบ่งทั้งเพจนี้เป็นช่วงต่างๆ โดยแต่ละช่วงจะปรับขนาดตามหน้าต่างที่ดู แต่ไม่น้อยกว่า 800px ต่อช่วง และจะมีทั้งแบบเต็มจอ หรือครึ่งจอ โดยเราจะนับระยะสำหรับครึ่งจอเป็น 1 หน่วย และเต็มจอเป็น 2 หน่วย

หลังจากนั้นในบรรดา <div> ของแต่ละช่วงทั้งหมด เราจะกำหนด attribute พิเศษไว้ ตั้งชื่อว่า px-length โดยถ้า <div> ไหนเราอยากให้แสดงเต็มจอ ก็ตั้งเป็น px-length=”2″ ส่วนอันไหนเราอยากให้เป็นครึ่งจอก็ตั้งเป็น px-length=”1″ ซึ่งตอนโหลดหน้าครั้งแรก หรือเมื่อมีการปรับขนาดหน้าจอ Javascript ก็จะใช้ค่านี้เพื่อกำหนดความสูงของ <div> แต่ละตัวใหม่

ต่อมาในส่วนของ Parallax เนื่องจากเราต้องให้เอฟเฟคแสดงผลเมื่อผู้ใช้เลื่อนหน้าจอมาถึงแล้วเท่านั้น เราจะรู้ว่าผู้ใช้เลื่อนมาถึงแล้ว เราจำเป็นต้องรู้ว่า <div> ดังกล่าวอยู่ที่ตำแหน่งเท่าไหร่ของทั้งเพจ แต่เนื่องจากเรารู้ว่า <div> ทั้งหมดแต่ละอันมีค่า px-length เท่าไหร่บ้าง รวมกับขนาดความสูงหน้าจอ เราจึงสามารถคำนวณตำแหน่งของตัวเองได้ไปในคราวเดียวกัน แล้วก็เก็บค่านี้ไว้ที่ px-start และ px-stop เป็นระยะที่เราต้องการให้เริ่มมีเอฟเฟค Parallax และหยุดทำเมื่อใด

ต่อมาการทำให้ภาพเลื่อนอยู่ในกรอบ ก็เริ่มจากการมี <div> ครอบด้านนอกที่ตั้งสไตล์ overflow: hidden; ไว้ ส่วน <div> ข้างในก็แสดงภาพ โดยใช้สไตล์ transform: translateY(y); ในการเลื่อน เพื่อให้ได้ประสิทธิภาพที่ดีกว่า

เพื่อให้เอฟเฟคเนียนยิ่งขึ้น ต้องเพิ่มโค้ดที่หลอกให้เบราวเซอร์เปิดการใช้งาน Hardware Acceleration โดยเติม transform: translate3d(0, 0, 0); เข้าไปอีกที

ส่วนป้ายชื่อที่มีการเลื่อนที่แตกต่างกัน ก็ใช้วิธีเดียวกันกับภาพพื้นหลัง แต่ตั้งให้ป้ายชื่อแต่ละชิ้นมีอัตราส่วนในการเคลื่อนที่ตามการเลื่อนจอที่แตกต่างกัน โดยตั้งเป็น attribute ที่มีชื่อว่า px-ratio เป็นค่าไว้สำหรับให้ Javascript นำไปใช้คำนวณ

Scrolling-sensitive Content

สุดท้ายอันนี้คือการทำให้เนื้อหามีอนิเมชันที่สอดคล้องกับการเลื่อนจอของผู้ใช้ (เช่นป้ายชื่อเลื่อนเข้ามาเมื่อผู้ใช้เลื่อนหน้าจอมาถึงจุดนั้น) ซึ่งก็ใช้วิธีเดียวกันกับด้านบนในการหาตำแหน่งค่า px-start และ px-stop แล้วจึงใช้ CSS Transition / CSS Animation เพื่อทำอนิเมชันต่างๆ

Screen Shot 2013-11-21 at 21.59.46

Fallback

สำหรับในกรณีที่ผู้ใช้ไม่มี Javascript หรือเบราวเซอร์ไม่รองรับ CSS3 เราก็ให้แสดงภาพแต่แรกไปเลยดื้อๆ โดยใช้วิธีง่ายๆ คือให้แสดงอนิเมชันเฉพาะเบราวเซอร์ที่เป็น WebKit แล้วค่า CSS ทุกอย่างที่เกี่ยวกับการทำเอฟเฟคให้ขึ้นต้นด้วย -webkit- ให้หมด แม้ว่าจะเป็นค่าที่ CSS เก่าๆ มีก็ตาม (เช่นใช้ -webkit-opacity แทน opacity เฉยๆ)

วิธีนี้จริงๆ มักง่ายไปหน่อย แต่ไม่ใช่ปัญหามากนักเพราะเดี๋ยวนี้ส่วนมากก็ใช้ WebKit เยอะแล้ว และการไม่ใช้ WebKit ก็ไม่ได้ทำให้ไม่ได้รับสารใดๆ ในหน้าเว็บนี้น้อยลง

จะมีปัญหาอีกเล็กน้อยที่ควรจะแก้แต่ขี้เกียจแก้ คือขนาดตัวอักษรที่จะเล็กมากในอุปกรณ์พกพา เด็กๆ ไม่ควรเอาเป็นเยี่ยงอย่างนะจ๊ะ

ซึ่งแนวทางการดีไซน์นี้คงจะมีให้เห็นในเว็บไซต์ของคิวบิกครีเอทีฟในช่วงปีสองปีนี้แน่ๆ เป็นอย่างน้อย (และประสิทธิภาพควรจะดีขึ้นเรื่อยๆ ตามประสบการณ์) นอกจากนี้เว็บใหญ่ถัดไป (Cubic Creative Camp 10) ก็มีการดีไซน์ใหม่ที่จะเริ่มใช้ด้วย แต่ยังขออุบไว้ก่อนให้รอลุ้นกันเล่นๆ

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

เย่!