เดิมที ผมได้โปรเจคจากผู้ว่าจ้างให้ทำ floating video เหมือนในเว็บ http://www.radiopublicity.com/ พอได้ลองเข้าไปดู code ที่เค้าเขียน รู้สึกว่ามันช่างซับซ้อนซ่อนเงื่อนเหลือเกิน ไม่ต้องพูดถึงเรื่อง reusability ครับ ยุ่งยากชิบ(หรือความจริงแล้ว ผมอาจจะโง่เกินกว่าจะเข้าใจ code อัน advanced ของมันก็ได้ครับ) พอนึกออกแล้วใช่มั๊ยครับ ว่าผมจะทำอะไรต่อไป… ใช่ครับ ทำเองครับ
ส่วนผสมของผม หลีกหนีไม่พ้น jQuery ครับ ร่วมกับการเขียน plugin โดยมีคอนเซปท์ว่า จับอะไรก็ได้ บนเว็บ เอามาทำเป็น floating layer ได้หมด แล้วก็เลื่อนตาม scrollbar ได้ด้วย คิดไปคิดมาต่อยอดได้อีกว่า จะให้มันอยู่ตรงไหนของหน้าจอก็ได้ snap ซ้าย snap ขวา หรือจะอยู่มันตรงกลาง บนล่าง ได้หมด โอ้ว ชักน่าตื่นเต้นแล้วสิ
ในที่สุด ผมก็ลองทดสอบตัว prototype ของผมกับเว็บของผู้ว่าจ้างทันทีครับ (http://www.brendabence.com/media-room/) เออ พอใช้ได้แฮะ หลังจากนั้นก็เอามานั่งพัฒนาต่อยอดตามที่ตั้งใจไว้จนออกมาให้ได้ใช้งานกัน เสร็จแล้วก็ตั้งชื่อให้มันว่า scrollads plugin สำหรับ jQuery ครับ
รูปแบบการใช้งาน
$.scrollads(options);
โดยที่ options เนี่ย จะใส่หรือไม่ใส่ก็ได้ครับ ถ้าใส่ก็จะเขียนอยู่ในรูปแบบ JSON โดยที่มี key ตามนี้เลยครับ
closer เป็น selector ที่ระบุปุ่มที่ใช้ปิดตัว layer นี้
hsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวนอน มีค่าเป็น
- left ชิดซ้าย
- center อยู่ตรงกลาง
- right ชิดขวา
- custom อยู่ตำแหน่งที่ระบุไว้ใน left
- none อยู่ตำแหน่งตาม html
vsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวตั้ง มีค่าเป็น
- top ชิดด้านบน
- middle อยู่ตรงกลาง
- bottom ชิดด้านล่าง
- custom อยู่ตำแหน่งที่ระบุไว้ใน top
- none อยู่ตำแหน่งตาม html
เช่น
$("#floatme").scrollads();
$("#floatme").scrollads({closer:".close"});
$("#floatme").scrollads({closer:".close",hsnap:"center"});
ลองไปดู LIVE DEMO กันดีกว่าครับ
สำหรับ source code ตัวที่เป็น minified สามารถดาวน์โหลดได้จากที่นี่ครับ
ใช้ดีอย่าลืมมา feedback แล้วบอกต่อนะครับ 
อัพเดท วันที่ 6 สิงหาคม 2552
+ ผมได้เพิ่ม option smooth ลงไปครับ เพื่อให้ scroll ได้ smooth ขึ้นครับ ถ้าไม่ใส่มันก็จะเลื่อนปึ๊ด ๆ แบบเดิม แต่ถ้าใส่ แล้วกำหนดเป็น “true” มันก็จะหยอด effect ลงไปหน่อย ทำให้เลื่อนแล้วดูเนียน ๆ ครับ ลองดูได้ครับ ขอบคุณครับ
เยส
มีปัญหาอะ พี่อู
ถ้ากำหนด ให้อยู่ มุมล่าง
มันจะเลือนตาม scroll ไม่หยุดเลย 555+ ยาวววววววววลงไป…
มุมล่างไหนอ่ะ หรือเป็นทุกตำแหน่งข้างล่าง
banner ใหญ่แค่ไหนอ่ะ มีหน้าตัวอย่างให้ดูมะ
ทุกตำแหน่งข้างล่างอะ
มันไม่ค่อย smooth เลยอ่ะ
ลองดูใหม่ครับ ผมอัพเดทแล้ว ทำให้มัน smooth ได้ด้วยครับ
smooth จริงๆครับ
สุดยอดดดดดดด
ขอบคุณครับ
ผมเอาไปใช้แล้ว ไม่ขอบคุณ ได้ไหมครับ
ด๊ายยยย เคืองนิดเดียวเอง
โอๆๆ ขอบคุณก็ได้ครับ แหม 555+ :p
ฮี่ๆๆๆๆๆ
แหล่มเลย
ถ้าอยากสั่งงานมันด้วย หละครับ แบบว่าให้กดลิงค์แล้ว เจ้าโฟสตัวนี้ถึงจะโผล่มาต้องใช้งานยังไงครับ
อยากกดที่ลิงค์แล้วถึงจะโผล่เจ้าตัวนี้มา ทำยังไงครับ
ลองใช้ $(…).show() กับ $(…).hide() หรือยังครับ (jQuery)
มีวิธีทำ เมนู อยู่ด้านล่างสุดของหน้าต่างแบบ facebook.com ป่าวครับ
ยังไม่เคยลองทำเลยครับ แหะๆ
จะเอาไปใช้ใน wordpress ยังไง ครับ มือใหม่มากๆ ครับ รบกวนด้วยครับ
wordpress นี่หมายถึงในเว็บ wordpress เหรอ
หรือหมายถึงใน host เราเองที่เอา wordpress มาลงครับ