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 สาธารณะอันแรกเลยนะเนี่ย)

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