CSS transition : HTML & CSS
 

Forum :: HTML & CSS :: CSS transition

เริ่มต้นด้วยการพูดคุยกันก่อนนะครับ ผมเองเป็นคนหนึ่งครับที่สนใจในการทำเว็บ หรือเขียนโปรแกรมด้วย Javascript, CSS, HTML, PHP ซึ่งผมว่ามันเป็นอะไรที่ลงตัว และน่าศึกษาดีครับ ก่อนหน้านั้นผมเริ่มสนใจ PHP ก่อนเป็นอันดับแรกเพราะได้เรียนที่โรงเรียน ลองเคยหัดเล่นพวก CMS - Joomla, Wordpress อะไรพวกนี้ แต่หลังๆ ในยุคที่ Javascript Framework เบ่งบ่านเฉกเช่นดอกเห็ด ผมเลยมาให้ความสนใจเกี่ยวกับพวก CSS3 และ Javascript มากขึ้น (ผมถนัด jQuery ก่อนเขียน Javascript เพียวๆเป็นซะอีกครับ ฮะฮ่าา) เพราะในยุคนี้ Web app กำลังมาแรงจนรั้งฉุดไม่อยู่ ของพวกนี้มันจำเป็นต้องศึกษาจริงๆ ครับ 

ตอนผมเริ่มศึกษาพวก CSS3 กับ HTML5 อย่างจริงๆ จังๆ นี่ เท่าที่ผมสังเกตเห็น(และคิดเอาเอง) ผมเห็นว่ามีบทความน้อยมากที่เขียนเกี่ยวกับเรื่องพวกนี้ อาจจะมีบ้างแบบแค่ Intro หรือการใช้งานเบื้องต้น ทั้งๆที่ต่างประเทศเขาไปไกลมาก มีโชว์ workshop พลิกแพลง แปดหมื่นตลบแบบเจอครั้งแรกต้องอุทานออกมาว่า เจ๋งค่อดๆๆ ก็เลยอยากจะเห็นแบบนี้ในบ้านเราบ้าง จนมาเจอ function.in.th ผมได้ประโยชน์จากเว็บนี้มากจากในส่วนของ reference ที่จัดทำ Index ของฟังก์ชั่นพวก CSS และ HTML ไว้ ชอบมาเปิดดูบ่อยๆ ก็เลยมีความคิดเล็กๆ เล่นๆ ว่า function.in.th น่าจะเป็นศูนย์รวมของ web developer คนไทยอีกที่หนึ่ง น่าจะมารวมตัวกันได้ จึงอยากจะลองเขียนบทความไว้ที่นี่บางเพื่อเป็นประโยชน์ไม่มาก ก็น้อย
=================================================================================

มาเริ่มเข้าเรื่องของเราดีกว่าครับ เรื่องราวที่ผมจะเอามานำเสนอในวันนี้เป็นเรื่องของ CSS3 Transition ครับเป็นอีกรูปแบบหนึ่งในการแสดงผลหน้าเว็บและเอฟเฟ็คของ Elements แบบเลิศหรู อลังการ งานวัด ด้วย CSS ซึ่งเจ้าคุณสมบัติ Transition นี้รองรับกับ engine ของเบราเซอร์เกือบทุกตัว ยกเว้น เจ้าเดิมครับ Internet Explorer (อ้างอิงจาก http://www.w3schools.com/css3/css3_transitions.asp) มาเริ่มต้นใช้งานกันเลยดีกว่า 

------display.html-----

<div id="box">
</div>

-----------------------

------style.css--------

#box{
border:1px solid #000;
width:100px;
height:100px;
background-color:red;
transition:width 1s ease,background-color 1s ease;
-webkit-transition:width 1s ease,background-color 1s ease;/*chrome safari*/
-moz-transition:width 1s ease,background-color 1s ease;/*firefox*/
-o-transition:width 1s ease,background-color 1s ease;  /*opera*/

}

#box:hover{
width:500px;
background-color:blue;
}
-----------------------

การแสดงผลของ code ด้านบนดูได้จาก http://jsbin.com/axawuc/1/edit
จากโค้ดผมสร้างกล่อง div ขึ้นมาอันหนึ่ง แต่เดิมนั้นเป็นกล่องสีแดง พอเอาเมาส์ไปชี้แล้ว กล่องนั้นจะกว้างขึ้น และจะกลายเป็นกล่องสีน้ำเงิน พอเลื่อนเมาส์ออก กล่อง div ก็จะลดรูปกลายเป็นกล่องสีแดงเหมือนเดิม ซึ่งรูปแบบของการเปลี่ยนแปลง มันช่างดูงดงาม สมูท ในทางกลับกันหากเราเอา property ใน #box ออกเวลาเลื่อนเมาส์ไปชี้ที่กล่อง div มันก็แสดงแบบแว๊บๆ เดี๋ยวยาวเดี๋ยวสั้น

ทีนี้เราจะมาดูกันว่า property นี้มันใช้ยังไง 

รูปแบบที่ 1 สั้นง่าย
transition:transition-property | transition-duration | transition-timing-function |transition-delay,.... ;

- transition-property : คือ property ที่เราจะสั่งให้มันมีการเปลี่ยนแปลงเช่นตัวอย่างด้านบนผมสั่งให้มันเปลี่ยนแปลง 2 ตัวคือ width กับ background-color 
- transition-duration : คือช่วงระยะเวลาของการเปลี่ยนแปลงหน่วยเป็น วินาที(s) ถ้าไม่กำหนด จะไม่เห็นการเปลี่ยนแปลง
- transition-timing-function : รูปแบบของการเปลี่ยนแปลง ( ผมไม่รู้จะอธิบายยังไงดี ) ประกอบไปด้วย linear, ease, ease-in, ease-out, ease-in-out ถ้าไม่กำหนดจะมีค่าเป็น ease
- transition-delay : ระยะเวลาในการหน่วงก่อนเิกิดการเปลี่ยนแปลง

หากมีการกำหนดให้ทำงานกับหลาย property จะต้องคั่นด้วย comma (,) 

transition:[width 1s ease] ,[background-color 1s ease];

หรือจะใช้เป็นแบบ
transition:all 1s ease;
เพื่อสั่งให้ property ทุกตัวทำงานพร้อมกัน
*อาจจะต้องมีการระบุเอนจินของเบราเซอร์รุ่นต่างๆ เพิ่มเข้าไปเพื่อการแสดงผลที่ดีในเบราเซอร์นั้นๆ เช่น
-webkit-transition: all 1s ease;

รูปแบบที่ 2 ยาวมากๆ
การประกาศแบบแยกบรรทัดกันไปเลย 
#box{
....
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 2s;
....
}

สำหรับการวาง property transition นั้นจะต้องวางอยู่ใน id หรือ class ที่กำหนด CSS อันดับแรกก่อนเกิดการเปลี่ยนแปลง (เขียนเองยังงงเอง ดูตัวอย่างดีกว่า)
จากตัวอย่างด้านบนผมวาง transition ไว้ที่ #box หลังจากนั้นรูปแบบการเปลี่ยนแปลงที่เิกิดขึ้นผมจะวางไว้ใน #box:hover เช่น

#box{
...
width:100px;/*ความกล้างเริ่มต้น*/
height:100px;
transition:.............;
...
}
#box:hover{
width:500px;/*ขนาดของ ความกว้างที่เปลี่ยนไป เป็นต้น*/
height:100px;
}

นอกเหนือไปจากนั้นแล้วเรายังสามารถใช้ Javascript เข้ามาช่วยในส่วนนี้ เผื่อใครเอาไปประยุกต์จะสาธิตให้ดูตามตัวอย่างด้านล่าง

------display.html-----


  <div id="box" onmouseover="changeWidth();" onmouseout="changeWidthToBegin()">
</div>

-----------------------

------javascript.js-----

function changeWidth(){
oBox = document.getElementById("box");
  oBox.style.width = "500";
  oBox.style.background = "blue";
}

function changeWidthToBegin(){
oBox = document.getElementById("box");
  oBox.style.width = "100";
   oBox.style.background = "red";
}

-----------------------

แสดงผล -> http://jsbin.com/ewupib/3/edit

- Javascript ด้านบนผมพยายามทำให้เข้าใจง่ายที่สุด แต่ละคนอาจมีวิธีที่ใช้แตกต่างกันออกไป
จากตัวอย่างด้านบนเราจะนำ Style object properties ของ javascript มาใช้งานร่วม หลังจากนี้แล้วแต่ใครจะนำไปประยุต์ในการทำงานนะครับ


ปล. เป็นบทความแรกของผมใน function ผิดพลาดประการใดพร้อมน้อมรับคำติเตือนเสมอครับ
ปล. 2 ผมไม่แน่ใจว่าผู้อ่านใน function.in.th เป็นแนวไหนผมจึงพยายามอธิบายในแบบฉบับภาษาของผม อาจมีศัพท์เทคนิคบ้าง ใช้ไม่ถูกบ้างไม่ว่ากัน อิอิ :)
ปล. 3 เชียร์ให้ function.in.th ใช้พวก SyntaxHighlighter เวลาแสดงโค้ดจะได้เห็นชัดเจน ไม่ก็อนุญาตให้แสดง iframe ที่มาจาก jsfiddle หรือ jsbin เวลาแสดงโค้ด จะง่ายดี อันนี้แล้วแต่พิจารณาครับ :)
ปล. สุดท้ายละ ผมว่าทางเว็บน่าจะมีส่วนบทความที่เป็น tutorial จากทางบ้านแยกจาก discussion ที่เอาไว้ถามตอบนะครับ อันนี้เป็นความคิดเห็นส่วนตัว :) แต่ถ้าเป็นนโยบายของทางเว็บก็มิขัด ครับ...

ขอบคุณครับ

16 Comment

  • Supachai Wongmoon
    #1 Comment By Supachai Wongmoon เมื่อ 19 มกราคม 2013 เวลา 13 นาฬิกา 44 นาที
    อ่าว Delete กับ Edit ตรงไหนครับ งง??
     
  • Nuttapong Suptawepong
    #2 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 14 นาฬิกา 11 นาที
    เด๋วจะรีบเพิ่ม feature ให้โดยด่วนครับ ต้องขออภัยจริง ๆ ครับ ^ ^
     
  • Supachai Wongmoon
    #3 Comment By Supachai Wongmoon เมื่อ 19 มกราคม 2013 เวลา 16 นาฬิกา 6 นาที
    ขอบคุณครับ
     
  • Nuttapong Suptawepong
    #4 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 16 นาฬิกา 15 นาที
    ตอนนี้สามารถแก้ไขได้แล้วนะครับ จะมีปุ่ม edit อยู่ บนขวา ของเนื้อหาครับ
    ส่วน delete จะตามมาภายหลังครับ
     
  • Supachai Wongmoon
    #5 Comment By Supachai Wongmoon เมื่อ 19 มกราคม 2013 เวลา 17 นาฬิกา 9 นาที
    โอ้วว ข้อความหลุดกรอบ ยาวเลยอะครับ ช่วยดูทีครับ
    
    ขอบคุณครับ
     
  • Nuttapong Suptawepong
    #6 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 17 นาฬิกา 14 นาที
    ^ ^
     
  • Nuttapong Suptawepong
    #7 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 17 นาฬิกา 14 นาที
    ^ ^
     
  • Nuttapong Suptawepong
    #8 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 17 นาฬิกา 17 นาที
    เรียบร้อยแล้วครับ ^ ^
     
  • Supachai Wongmoon
    #9 Comment By Supachai Wongmoon เมื่อ 19 มกราคม 2013 เวลา 20 นาฬิกา 55 นาที
    บทความแรกใน function ผิดพลาดประการใดขออภัยด้วยครับ
     
  • Nuttapong Suptawepong
    #10 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 21 นาฬิกา 37 นาที
    ผมไม่เคยเล่น CSS Transition มาก่อนเลยครับ ^ ^
    
    ส่วนเรื่องข้อเสนอแนะในการปรับปรุงเวป 
    
    ผมทยอยปรับเว็บเรื่อย ๆ นะครับ ^ ^
     
  • Nuttapong Suptawepong
    #11 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 21 นาฬิกา 57 นาที
    เรื่อง blog ของแต่ละสมาชิก มีแน่นอนครับ แต่ในช่วงนี้อาจต้องเขียนในนี้ก่อนนะครับ เพราะต้องไปลองคิดก่อนว่าจะให้ออกมาในรูปแบบไหนครับ
     
  • Supachai Wongmoon
    #12 Comment By Supachai Wongmoon เมื่อ 19 มกราคม 2013 เวลา 23 นาฬิกา 24 นาที
    ขอบคุณมากครับ :D
     
  • Nuttapong Suptawepong
    #13 Comment By Nuttapong Suptawepong เมื่อ 19 มกราคม 2013 เวลา 23 นาฬิกา 25 นาที
    ครับ ^ ^
     
  • Nuttapong Suptawepong
    #14 Comment By Nuttapong Suptawepong เมื่อ 5 กุมภาพันธ์ 2013 เวลา 16 นาฬิกา 23 นาที
    มีระบบ Blog แล้วนะครับ ที่ http://blog.function.in.th ^ ^
     
  • Supachai Wongmoon
    #15 Comment By Supachai Wongmoon เมื่อ 5 กุมภาพันธ์ 2013 เวลา 21 นาฬิกา 21 นาที
    ยอดเยี่ยมเลยครับ เดี๋ยวถ้าว่าง จะเอาของมาโชว์ครับ :D
     
  • Nuttapong Suptawepong
    #16 Comment By Nuttapong Suptawepong เมื่อ 5 กุมภาพันธ์ 2013 เวลา 22 นาฬิกา 13 นาที
    ครับ ^ ^
     

Comment Forum

 
 
 
Share This Topic Login with Facebook