[jQuery + CSS] มาทำ Animated Social Icons กัน !!

posted on 21 Feb 2013 17:14 by designil in Webdesign directory Tech, Idea
สวัสดีครับ หลังจากห่างหายไปนาน ตอนนี้ไปฝึกวิชากลับมาอัพบลอคเหมือนเดิมแล้วคร้าบ ปกติผมมีเว็บส่วนตัวอยู่ที่ Designil.com ครับ และคอยอัพเดทข่าวสารต่าง ๆ เกี่ยวกับ Web Design ใน Designil Facebook Page ท่านใดสนใจลองแวะไปเยี่ยมชมกันนะคร้าบ
 
วันนี้จะพูดถึง Animated Social Icons ซึ่งเป็นโค้ดทดลองเล่นกับ jQuery Animation ที่ผมเพิ่งเขียนไว้ล่าสุดครับ มาดูกันเลยว่ามันเป็นยังไง
 
ลองเล่นตัวอย่างด้านล่าง หรือคลิกที่รูปเพื่อเล่นแบบ FullScreen ได้ครับ
Design
 
ก่อนอื่นต้องสารภาพว่าไม่ได้ดีไซน์เองนะครับอันนี้ พอดีไปนั่งหาไฟล์ PSD สำหรับ User Interface สวย ๆ มาเป็นไอเดีย แล้วไปเจอ PSD ตัวนึงน่าสนใจมาก จาก PSDChest ดูแล้วน่าจะเขียนโค้ดได้ไม่ยาก แล้วก็สวยด้วย เลยลองจับมาเขียนโค้ดซะเลย
 
ท่านใดสนใจดาวน์โหลดไฟล์ PSD คลิกที่รูปด้านล่างได้เลยครับ
 
 
Code
 
เวลาคิดเป็นโค้ดผมจะแบ่งเป็น 2 ส่วนหลัก ๆ คือ HTML + CSS เอาไว้เขียนหน้าตาให้ได้ตามดีไซน์ ส่วน Javascript เอาไว้ทำพวก Animation ให้มันขยับตามที่เราต้องการครับ
 
HTML + CSS
หลังจากโหลดไฟล์ PSD มาแล้ว ผมก็เอามาดูครับว่าส่วนไหนต้องดึงรูปจาก PSD บ้าง ส่วนไหนโค้ดขึ้นเองได้บ้าง พวกไอคอน Twitter, Facebook, Dribbble, RSS นี่ผมโค้ดไม่ได้แน่ ๆ ต้องใช้รูป และกรอบที่มีลูกศรด้านขวาอันนี้เคยเห็นคนเขียนด้วย CSS3 อยู่ แต่ผมเขียนไม่เป็น TT เลยใช้รูปดีกว่า
 
ส่วนอื่น ๆ สามารถเขียนด้วย CSS ได้หมดครับ กรอบมน ๆ ก็มี border-radius ให้ใช้ หรือจะวาดวงกลมก็แค่ใส่ border-radius เยอะ ๆ มันก็จะกลายเป็นวงกลมแล้ว
 
Javascript
การเคลื่อนไหวของ UI อันนี้ผมเดาเอาเองจาก PSD เลยครับ ว่าพอชี้แล้วลูกกลม ๆ ต้องเลื่อนจากซ้ายไปขวา แล้วสีปุ่มก็เปลี่ยน
 
การขยับ ๆ บนหน้าเว็บ ถ้าไม่ใช้ Flash หรือรูป .gif เราก็จะทำได้ 2 วิธีครับ:
 
1. CSS3 Keyframe Animation - อันนี้บราวเซอร์ซัพพอร์ทน้อยมาก มีแค่พวก Chrome, Firefox, IE10 ที่รองรับ
2. jQuery Animation - บราวเซอร์ซัพพอร์ทจะเยอะกว่า เพราะรวมไปถึง Internet Explorer 7-8 เลย (ถ้าจำไม่ผิดนะครับ)
 
ผมเลือกวิธีที่ 2 เพราะจะครอบคลุมบราวเซอร์มากกว่า + ยังไม่เคยเล่น jQuery Animation เลยครับ อยากลองเล่นดู ซึ่งโค้ดก็ไม่ยากเลย
 
$('.button').animate({ 'margin-top': '100px' }, 800);
 
.animate จะรับค่า 2 ค่าครับ ค่าแรก คือ CSS ที่เราจะเปลี่ยน ในตัวอย่างอันนี้จะเปลี่ยน margin-top ให้กลายเป็น 100px ส่วนค่าที่ 2 คือระยะเวลาในการ Animate จนถึง CSS เป้าหมายที่ต้องการ ในตัวอย่างนี้คือ 800ms = 0.8 วินาทีครับ

ทีนี้ถ้าเข้าไปดู Source Code ผมจะเห็นว่าผมเขียนแบบนี้
 
$('.button').stop().animate({ 'margin-top': '100px' }, 800);
 
สาเหตุที่ผมมี .stop() เข้ามาก็เพื่อแก้ปัญหา Animate ต่อเนื่องครับ ถ้าใส่โค้ดนี้เข้าไปมันจะหยุด Animate ที่ทำอยู่แล้วเริ่ม Animate ใหม่ทันที แต่ถ้าไม่ใส่มันจะรอ Animate ที่ทำอยู่เสร็จก่อน แล้วค่อย Animate ใหม่อีกรอบ
 
วิธีแก้ปัญหา Animate Background Color
 
ตอนที่กำลังเขียนโค้ดอยู่ เจอปัญหาว่าผมทำให้สี Background ค่อย ๆ เฟดไม่ได้ครับ ทั้งที่โค้ดก็น่าจะถูกต้อง
 
 $('.social').stop().animate({ backgroundColor: '#fcfcfc' }, 500);
 
หลังจากที่ลองไปค้นหาดู ก็พบว่าถ้าใส่ jQuery ไปเฉย ๆ มันจะ animate ได้แค่ค่าที่เป็นตัวเลขครับ เช่น left, right, margin, padding อะไรพวกนี้ วิธีการทำให้มัน animate สีได้ด้วย ก็แค่ใส่ jQuery UI ไปด้วยแค่นั้นเองครับ โค้ดด้านบนก็จะทำงานได้แล้ว
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js">
 
Source Code Download
 
สำหรับท่านใดที่สนใจศึกษา Source Code ก็สามารถเข้าไปที่ Animated Social Share Source Code ได้เลยครับ จะแบ่งเป็น HTML + CSS + Javascript ให้เลยครับ
 
 
 
ถ้าสงสัยโค้ดส่วนไหนสอบถามได้เลยนะครับ ถ้าถูกใจรบกวน กดดาว ให้ด้วยนะคร้าบ ขอบคุณครับ
 
UPDATE
 
 คุณ @limitblog นำไปเขียนเป็นเวอร์ชั่น Pure CSS นะครับ ไปติดตามได้ที่ลิงค์ด้านล่างเลย :D
 
 

หลังๆ ผมไม่เข้า @limitblog มาเขียนโม้อะไรเลย ส่วนเรื่อง css3 ก็น่าจะหาอ่านได้ไม่ยากตามเว็ปทั่วๆไป entry นี้ว่าด้วยการ กันบูด กันลืม การใ...

Comment

Comment:

Tweet

ขอบคุณครับ

#17 By คม (103.7.57.18|203.130.134.132) on 2013-03-22 09:07

Hot! Hot! Hot!

ชอบๆแวะมาให้ดาวนะครับ^^big smile confused smile
Hot! ถูกใจมากๆ ครับ
โหดแสรด ; [] ;)//
Hot! Hot! Hot!

#14 By ๏Luvi๏`KunG on 2013-02-22 11:01

@narathipo
ขอบคุณที่แวะมาเยี่ยมนะคร้าบ >< สงสัยตรงไหนถามได้เลยนะฮะ
@themeavanger
พี่เก่งกว่าผมเยอะคร้าบ sad smile

#13 By Woratana N. on 2013-02-22 10:56

@narathipo
ขอบคุณที่แวะมาเยี่ยมนะคร้าบ >< สงสัยตรงไหนถามได้เลยนะฮะ
@themeavanger
พี่เก่งกว่าผมเยอะคร้าบ sad smile

#12 By Woratana N. on 2013-02-22 10:56

Hot! Hot! โอ้ววว ยอดเลยจังซี่

#11 By themeavanger on 2013-02-22 09:51

Hot! Hot! Hot! ขอบคุณสำหรับความรู้ครับ surprised smile big smile open-mounthed smile confused smile

#10 By บุรุษนิรนาม on 2013-02-22 08:50

@triplesix
ขอบคุณมากคร้าบ ถ้าตรงไหนเขียนไม่ดียังไงบอกได้นะคร้าบ ><
@ozinepank
โอว สะดวกมากฮะระบบนี้ บลอคพี่ก็ข้อมูลเยอะดีฮะ แอบไปส่องมาก่อนหน้านี้แล้ว 555

#9 By Woratana N. on 2013-02-21 23:44

โอว้... มาเป็นสาวกบล็อกอีกคนคร้าบบ ชอบครับชอบ จริงๆ @designil สามารถ mention คนที่คอมเม้นได้ด้วยการพิมพ์ @ นำหน้า username เหมือนๆกับ twitter ได้เลยน่ะครับผม 
Hot! Hot! Hot!

#8 By ozinepank on 2013-02-21 22:56

Hot! Hot! Hot! Hot! Hot! Hot! Hot!
แจ่มโคตรเลยค่ะ =w=b แต่ตอนนี้ยังไม่มีเวลาอ่านโค้ดโดยละเอียด
ไว้จะกลับมาอ่านอีกทีนะคะ
ดีมากๆเลยค่ะ ขอบคุณนะ

#7 By ⑥⑥⑥ on 2013-02-21 21:51

Hot! Hot! Hot!
;w;b

#6 By Jirayu on 2013-02-21 20:31

แวะมาเยี่ยมบ่อย ๆ นะคร้าบ :D

#5 By Woratana N. on 2013-02-21 20:26

ไฮโซมวกกก Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
เข้าใจง่าย จากที่ไม่รู้เรื่องอะไรเลย
มาอ่านแบบนี้ละเอียดมากเลยค่ะ ทำเป็นแล้ว
ขอบคุณมากค่า

#4 By NAT on 2013-02-21 20:25

กำลังเรียนเรื่อง Icon อยู่พอดีเลย ขอบคุณมากฮะ ;w; b

#3 By TenesCross (103.7.57.18|124.120.152.121) on 2013-02-21 19:26

ขอบคุณมากคร้าบ >_<b

#2 By Woratana N. on 2013-02-21 19:18

สุดยอดเลยครับ
confused smile confused smile confused smile confused smile confused smile

#1 By watchapol on 2013-02-21 19:14

Code Here.