AdvanceDeveloperjQueryMarketing to mobileMobile TechnologyNewbieObject Oriented TechnologyProgramming Language

รวมฮิต jQuery กับการสร้าง Animation Effect บนหน้าเว็บไซต์

ถ้าตอนนี้คนเราเสพสื่อผ่านสมาร์ทโฟนมากขึ้นแล้วโดยเฉพาะ iPad และ iPhone เป็นไปได้ว่า Flash Animation ของ Adobe คงเล่นได้แค่บนเว็บทางเลือกก็คงหนีไม่พ้น jQuery ในการทำ Banner แทนครับ

คราวนี้ Banner โฆษณาที่ต้องไปโชว์บนหน้าจอสมาร์ทโฟนนั้นก็ต้องมี Animation หรือกราฟิกเคลื่อนไหวไปมาเล็กน้อยใช่ไหมครับมันจึงจะดูน่าสนใจ คนออกแบบป้าย Banner เลยต้องหันมาเล่น jQuery มากขึ้นแทนและก็ต้องปวดหัวกับการเฟ้นหาบทความวิธีการ หาหนังสือมานั่งอ่าน ผมเองก็เห็นใจครับอยากจะช่วยเหลือบ้าง ก็เลยไปเฟ้นหา Script และ Effect ของเจ้า jQuery Animation เหล่านี้มาแจกันสักหน่อยแล้วกันครับ

 

Create a Funky Parallax Background Effect using jQuery

Create a Funky Parallax Background Effect using jQuery
Create a Funky Parallax Background Effect using jQuery

ตัวแรกเลยน่าจะเป็น Animation Effect ของ jQuery ที่ผมไปเจอมาจาก Blog ของเว็บไซต์ Themeforest เป็นการสร้าง Animation Effect ของการเลื่อน Content ร่วมกับ Layer ของ DIV ที่วางซ้อนกันอย่างท้องฟ้า เจ้า Script นี้เรียกว่า Parallax Background ครับ ซึ่งถ้าลองทดสอบดูแล้วมันแสดงผลออกมาสวยงามมากๆครับ
หลักการไม่มีอะไรมากเลยครับเน้นที่ HTML และ CSS เป็นหลักส่วนการเคลื่อนไหวนั้น jQuery ล้วนๆ

ดาวน์โหลดได้ที่นี่ Create a Funky Parallax Background Effect using jQuery (Version 1)
หรือ ดูตัวอย่างได้ที่นี่ครับ http://daydev.com/demo/skyjQuery/

Puffing smoke Effect

Puffing snoke Effect
Puffing snoke Effect

ตัวต่อมานั้นผมได้ไปเจอในเว็บไซต์ Gayadesign เกี่ยวกับเจ้า Smoke Effect ตัวนี้ซึ่งเราสามารถสร้าง Animation ของควัน และ ตัวละครที่เพิ่มเข้ามาได้ ตัวอย่างนั้นเป็นรูปตัวละครจากเกม Super Mario ครับ หลักการส่วนนี้ก็ยังอยู่ที่ CSS และ HTML เช่นเดิม และน่าจะเอามาเล่นกับ Banner ได้เต็มรูปแบบเช่นกัน

ดาวน์โหลดได้ที่นี่ Puffing smoke Effect (Version 1)
หรือ ดูตัวอย่างได้ที่นี่ครับ http://daydev.com/demo/smokeEffect/

jQuery Gloss

jQuery Gloss
jQuery Gloss

แสงแว้บๆ วับๆ ที่น่าสนใจเวลาที่เราเอา Mouse ไปวางไว้ที่ภาพกราฟิก นี่เป็นอะไรที่ยังใช้กับ Banner โฆษณาได้ทุกตัว jQuery Gloss มี Library น่าสนใจตัวหนึ่งให้เรานำไปใช้ได้ฟรีๆ จากเว็บไซต์ Freelancer-id เช่นกันลองไปเล่นดูทีนี่ครับ แต่ส่วนตัวแล้วเจ้า jQuery Gloss นี้ผมว่ามันหนักเวลาโหลดอยู่พอควรครับ

ดาวน์โหลดได้ที่นี่ jQuery Gloss (Version 1) 
หรือ ดูตัวอย่างได้ที่นี่ครับ http://daydev.com/demo/jQueryGloss/

Animated Header in jQuery

animated-header
animated-header

ทำภาพเคลื่อนไหว แบบ Adobe Flash Motion Tween ได้เหมือนกันและสมจริงได้ด้วยตัวนี้เลยครับผ่าน jQuery ล้วนๆ ไปเจอมาจากเว็บไซต์ Devirtuoso ดูตัวอย่างก่อนแล้วลองดาวน์โหลดไปใช้งานดูครับว่ามันเป็นแบบไหน เหมาะกับเว็บไซต์ของคุณยังไงก่อน

ดาวน์โหลดได้ที่นี่ jQuery Gloss (Version 1) 
หรือ ดูตัวอย่างได้ที่นี่ครับ http://daydev.com/demo/jQueryHeader/

Animation Robot jQuery

Animation Robot jQuery
Animation Robot jQuery

ตัวสุดท้ายของบทความนี้จากเว็บไซต์ Css-tricks เป็นอะไรที่น่าทึ่งมากเพราะว่ามีการตัด Layer ของ DIV บน HTML ซ้อนหลายตำแหน่ง และใช้ CSS คลุมแบบจริงจังแทบทั้งหน้า เสร็จสรรพจับ Script ของ jQuery มาควบคุมการทำงานแสดงผลออกมาได้เหมือนกับใช้ Adobe Flash ดีๆ เลยครับ

ดาวน์โหลดได้ที่นี่ Animation Robot jQuery (Version 1)
หรือ ดูตัวอย่างได้ที่นี่ครับ http://daydev.com/demo/robot/

ทั้งหมดนี้หวังว่าคงจะเป็นทางเลือกสำหรับทำการตลาด และแคมเปญโฆษณาผ่านอุปกรณ์พกพาอย่าง สมาร์ทโฟนเว็บไซต์ได้สำหรับหลายๆ คนนะครับ 😀

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

One Comment

Leave a Reply

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน