Stories of Cubic Battlefield X (Part 1)

Stories of Cubic Battlefield X (Part 1)

หลังจากที่เขียนบล็อกแต่เรื่องเที่ยวมาเยอะแยะไปหมด ก็ขอกลับมาเขียนอะไรที่มีสาระเกี่ยวกับเรื่องงานบ้าง

ก่อนหน้าเมื่อนานมาแล้วเคยเขียนบล็อกเปรยๆ เกี่ยวกับการออกแบบกิจกรรม 5 กิจกรรมที่รู้สึกภูมิใจที่สุด ซึ่งหนึ่งในนั้นก็คือ Cubic Battlefield ที่เริ่มจัดครั้งแรกในค่าย Cubic Creative Fun Camp 2 เกือบจะ 10 ปีมาแล้ว

หลังจาก Cubic Battlefield ถูกจัดและปรับเปลี่ยนมามากกว่า 10 ครั้ง ถูกนับเลขต่อมาเรื่อยๆ จนถึง 9 จนเมื่อเดือนตุลาคมปีที่แล้วในค่าย Cubic Creative Camp 15 ก็มาถึงการเปลี่ยนแปลงครั้งใหญ่ในนาม Cubic Battlefield X (อ่านว่าเท็น ตั้งใจตามแบบ Mac OS X แต่ก่อน iPhone X นะ) Continue reading “Stories of Cubic Battlefield X (Part 1)”

My five most proud activity designs.

เพิ่งจบจากค่าย CCC10 มา ตอนทำๆ ค่ายอยู่ก็รู้สึกมานึกๆ ว่าจากกิจกรรมที่เคยออกแบบมาทั้งหมด รู้สึกภูมิใจ/ประทับใจกับอันไหนเป็นพิเศษบ้าง เลยอยากมาเล่าเล่นๆ ตรงนี้ รวมถึงที่มาแรงบันดาลใจของแต่ละกิจกรรม

อันดับที่ 5 – เข้ารหัสรัก…ปักหัวใจ

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

กิจกรรม เข้ารหัสรัก…ปักหัวใจ ยังเป็นกิจกรรมแรกๆ ของคิวบิกฯ ที่มีโครงเรื่อง (plot) เพื่อสร้างความน่าสนใจ โดยต่อมาใน ICTFC4 มีการสร้างกระบวนการเล่าเรื่อง (narrative) ในรูปแบบของละครสั้นแทรกทุกๆ โจทย์เพื่อให้เกิดความน่าสนใจขึ้นไปอีก

อันดับที่ 4 – Cubic Quest

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

ต่อมา Cubic Quest ก็มีการปรับเปลี่ยนรูปแบบหลายๆ รูปแบบ เริ่มมีการปรับจากการทำไอเท็มไม่จำกัดแล้วนับคะแนนตามมูลค่าไอเท็มเป็นมีไอเท็มชุดเดียว ทำเควสซ้ำไม่ได้ และวัดผลเป็นเปอร์เซ็นต์สำเร็จตอน Cubic Quest 5 (ICTFC3), แนวต่อสู้แบบ Cubic Quest 7 (ICTFC4) ไปจนถึงแนวข้อมูลสืบสวนสอบสวนไขปริศนา หรือเรียกกันเองว่าเควสกลางคืน (KUSFC4) ที่ภายหลังก็มีมาจัดกลางวัน

กิจกรรม Cubic Quest ถือเป็นจุดเริ่มต้นของไอเดียการดึงเอากลไกเกมจากวิดีโอเกมมาสู่โลกจริง ที่ก็เป็นฐานให้กับกิจกรรมอื่นๆ อีกมากมาย

ถึงแม้ว่าจะเป็นคนเริ่มต้นไอเดียเองตั้งแต่ครั้งแรกตอน KUSFC1 มาจนถึงครั้งที่ 21 ในปัจจุบัน ความจริงอย่างหนึ่งที่ไม่ค่อยมีใครเคยรู้คือ ผมเองไม่เคยเป็นคนดำเนินการหรือรับผิดชอบการออกแบบกิจกรรมเควสทั้ง 21 ครั้งเลย

อันดับที่ 3 – Cubic Route Cards

ถูกออกแบบและเริ่มใช้งานครั้งแรกเมื่อค่าย Cubic Innovator Camp 2 (2007) โดยในเริ่มแรกเป็นส่วนหนึ่งของกิจกรรมหลัก โดยใช้เป็นการคิดคะแนนของกิจกรรมฐานกลางคืน (หรือเรียกกันติดปากว่างานวัด) หลังจากนั้นก็มีการใช้งานเป็นกิจกรรมกลางตลอดช่วงระยะเวลาค่ายเป็นครั้งแรกในประวัติศาสตร์ของคิวบิกฯ ตอน Cubic ICT Fun Camp 4 (2007) ซึ่งถือว่าเป็นจุดเริ่มต้นแรกของการเริ่มเปลี่ยนระบบการให้รางวัลแต่ละกิจกรรม จากเดิมที่ให้เป็นขนมโดยตรง ก็เปลี่ยนเป็นการให้รางวัลเป็นคะแนนอะไรสักอย่างที่ต้องนำไปใช้ในกิจกรรมกลาง ก่อนที่จะไปแลกเป็นของรางวัลอื่นๆ อีกที (ถ้าให้คนยุคหลังๆ เข้าใจ ก็ต้องบอกว่าคือ Cubic World Civilization 4 ขึ้นไป)

ลักษณะการเล่นคือ จะเป็นการ์ดที่มี 4 ด้าน แต่ละด้านมีสัญลักษณ์ที่เป็นไปได้ 6 แบบ การ์ดสามารถนำมาวางต่อกันในตาราง โดยกติกาคือจะวางติดกันได้ก็ต่อเมื่อหันสัญลักษณ์ที่เหมือนกันเข้าด้านเดียวกัน (ใครไม่เห็นภาพลองดูรูปด้านล่างได้) ซึ่งข้อจำกัดนี้เป็นกลไกสำคัญที่นำไปสู่การแลกเปลี่ยนกับผู้เล่นคนอื่น (trading) เพื่อให้ได้การ์ดตามที่ต้องการ

อีกอย่างที่ภูมิใจเล็กๆ คือการตัดสินใจเลือกใช้สัญลักษณ์แทนสีเพียงอย่างเดียว เพื่อให้ไม่เป็นอุปสรรคกับผู้เล่นที่ตาบอดสี ซึ่งได้แรงบันดาลใจเริ่มต้นจากตลับหมึกเครื่องพิมพ์ของ HP และสัญลักษณ์ทั้ง 6 เอามาจากเกม Tetris Attack ถือว่าเป็นก้าวแรกของกิจกรรมคิวบิกครีเอทีฟที่มีการคิดถึงการเข้าถึงกิจกรรม (accessibility) ที่ต่อมากลายเป็นจุดขายสำคัญของค่ายคิวบิกฯ

Screen Shot 2014-04-29 at 3.50.41

อันดับที่ 2 – Cubic Mega Project X

กิจกรรมนี้ถ้าให้ย้อนไป มีจุดเริ่มต้นจากกิจกรรมโครงพิลึก (CCFC2) โดยในตอนนั้นมีฐานแรงบันดาลใจจากเกม World of Goo ที่เน้นไปที่การสร้างโครงสร้างตามโจทย์ที่กำหนด โดยโครงสร้างจะสร้างขึ้นจากอุปกรณ์ที่เรียบง่ายคือไม้เสียบลูกชิ้นกับก้อนโฟมเป็นหลัก

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

ต่อมา Cubic Mega Project X จึงต่อยอดจากแนวคิดของกิจกรรมโครงพิลึกเดิม โดยเพิ่มในส่วนของผู้ลงทุนที่จะเป็นคนให้เงินผู้รับเหมา (หรือเดิมก็คือผู้เล่นทั้งหมดในโครงพิลึก) ซึ่งจุดนี้นอกจากจะเป็นการเพิ่มโจทย์ในเรื่องของการประเมินความเสี่ยงให้ชัดเจนขึ้นแล้ว ยังเป็นการเพิ่มการมีปฏิสัมพันธ์ระหว่างผู้เล่นที่อยู่คนละกลุ่มของกิจกรรมทั้งหมดตามสมัยนิยมที่เริ่มมีในช่วงครึ่งทศวรรษหลังของคิวบิกครีเอทีฟ

ชื่อกิจกรรม Cubic Mega Project X ถูกตั้งเพื่อล้อกับกิจกรรมโครงงานวิศวกรรมของค่ายซีเอ็ดที่ชื่อว่า Project X โดยเป็นการบอกโดยนัยว่า คือกิจกรรมโครงงานวิศวกรรมที่เหนือกว่า Project X ธรรมดา เพราะมีเรื่องของการลงทุนเข้ามาด้วย

อันดับที่ 1 – Cubic Battlefield

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

ต่อมาเคยมีความพยายามจะนำกิจกรรมนี้กลับมาทำใหม่อีกหลายครั้ง กิจกรรมที่ดูจะประสบความสำเร็จที่สุดคงเป็นของค่าย Cubic-O (ไม่แน่ใจว่า 1 หรือ 2) แต่ตอนนั้นกติกาที่ออกแบบไว้สามารถดำเนินการได้ง่ายเพราะผู้เล่นส่วนใหญ่เป็นน้องโต และด้วยลักษณะค่ายทำให้เรามีจำนวนทีมงานต่อน้องสูงพอที่จะจัดได้

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

จนในคืนหนึ่งก่อนหน้าค่ายไม่กี่วัน ระหว่างที่กำลังนอนเคลิ้มๆ จะหลับ ผมก็คิดอะไรไปเรื่อยเปื่อยเรื่อยๆ ซึ่งตอนนั้นผมเองกำลังเล่นเกม Final Fantasy XIII อยู่ และค่อนข้างประทับใจกับระบบ Paradigm เลยทำให้เป็นโจทย์คิดเล่นๆ ในใจว่า จะทำกิจกรรมอะไรดีที่ทำให้ผู้เล่นสามารถกำหนดกลยุทธ์ในภาพใหญ่ (macro-strategy) ได้โดยไม่ต้องใส่ใจกับเรื่องเล็กๆ (micro-strategy) พร้อมๆ กับบรรยากาศที่รวดเร็ว (fast-paced) แบบระบบการต่อสู้ Paradigm ใน FFXIII

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

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

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

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

ตอนนี้ก็ได้แต่หวังว่า ในไม่ช้านี้จะสามารถคิดกิจกรรมใหม่ที่จะสามารถมาแทนที่ 5 อันดับนี้ได้ ไม่ช้าก็เร็ววันนี้…

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 ไม่มีความเกี่ยวข้องแต่อย่างใด

เย่!