Back to notes
Build Note6 กรกฎาคม 25693 min read

Rainy Hero: ทำให้หน้าแรกมีบรรยากาศตามโลกจริง

บันทึกการทดลองเล็ก ๆ ที่ทำให้ hero ของ iamchinnapat.com เปลี่ยนเป็นบรรยากาศฝนตก พร้อมภาพเต็นท์และเอฟเฟกต์ฝนแบบเบา ๆ เมื่อสภาพอากาศจริงเป็นฝน

Living PortalWeatherFrontend

ผมอยากให้เว็บนี้ไม่ใช่หน้า profile ที่นิ่งอยู่ตลอดเวลา แต่เป็น portal ที่มีชีวิตเล็ก ๆ ตามสิ่งที่เกิดขึ้นจริงรอบตัว ทั้งเวลา อากาศ ท้องฟ้า และโปรเจคที่กำลังค่อย ๆ โต

หลังจากมีระบบเปลี่ยนบรรยากาศตามช่วงเวลาแล้ว เราลองต่อยอดอีกขั้นด้วย rainy hero: ถ้าสภาพอากาศเป็นฝน หน้าแรกจะเปลี่ยนไปใช้ภาพเต็นท์กลางฝนแทนภาพท้องฟ้าปกติ พร้อมเอฟเฟกต์ฝนบาง ๆ ที่ช่วยเสริม mood โดยไม่แย่งซีนจากข้อความหลัก

ทำไมเลือกเต็นท์ ไม่ใช่กล้อง

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

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

บทเรียนจากรอบนี้

รอบแรกของ weather effect เคยดูเยอะเกินไป พอใส่ฝนทับ hero ตรง ๆ แล้วภาพเสียสมดุล รอบนี้เลยเริ่มจากภาพนิ่งที่ mood ดีพอก่อน แล้วค่อยเติมเอฟเฟกต์ฝนด้วยความระมัดระวัง

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

ต่อไปอาจทำอะไรได้อีก

ไอเดียที่น่าสนใจแต่ยังไม่รีบทำคือ cloud drift สำหรับวันที่เมฆมาก, storm variant ที่แรงขึ้นนิดเดียว หรือ seasonal mood บางช่วง แต่ทั้งหมดควรผ่าน visual review ก่อน เพราะเว็บนี้ควรมีชีวิตขึ้น ไม่ใช่รกขึ้น

สำหรับตอนนี้ rainy hero ทำหน้าที่พอดีแล้ว: เป็นสัญญาณเล็ก ๆ ว่า iamchinnapat.com กำลังค่อย ๆ กลายเป็นบ้านกลางที่เชื่อมโปรเจค คอนเทนต์ และโลกจริงเข้าด้วยกัน