สร้าง Presentation ให้น่าสนใจด้วย impress.js

impress.js presentation tool

หลายๆ คน คงจะเบื่อกับการทำ presentation ในรูปแบบเดิมๆ ด้วย Powerpoint ใช่มั้ยล่ะครับ วันนี้ผมมีวิธีทำ presentation แบบใหม่ โดยอาศัยทักษะการทำเว็บที่เรามีอยู่แล้วมาใช้ให้เกิดประโยชน์ครับ

impress.js เป็น framework สำหรับทำ presentation ครับ โดยมันจะใช้ css3 transform และ transition เข้ามาช่วยทำให้ presentation ของเรามีความน่าสนใจมากขึ้น ลองเข้าไปดูหน้าตากันก่อนได้ที่ Demo ครับ

เตรียมความพร้อมก่อนใช้ impress.js

ก่อนอื่นให้เราไป Download Impress.js มาก่อนครับ เมื่อแตกไฟล์มาแล้ว ทีนี้เรามาดูขั้นตอนการใช้งานอย่างคร่าวๆ กันดีกว่า เริ่มด้วยการใส่โค้ดดังต่อไปนี้

จะเห็นว่าเราจะต้องสร้าง div#impress ครอบ html elements ของ slides ทั้งหมดของเราเอาไว้ก่อนครับ หลังจากนั้นให้เราใส่ impress.js เข้ามา แล้วเรียกใช้มันด้วยคำสั่ง impress().init(); เท่านี้เราก็พร้อมที่จะใช้ impress.js แล้วล่ะครับ

ต่อมาให้เราเพิ่มหน้า slides ต่างๆ เข้าไปใน div#impress ครับ การเขียน html นั้น ให้เราเขียนเหมือนปกติเลยครับ สมมติโค้ดเราเป็นแบบนี้

จัดตำแหน่งให้กับ Slides

เอาล่ะครับ เมื่อหน้า slides ต่างๆ ของเราพร้อมแล้ว ทีนี้เราก็ค่อยมาจัดตำแหน่งให้กับแต่ละหน้า เราสามารถกำหนดค่าต่างๆ ให้กับ slide แต่ละหน้าโดยใช้ HTML5 data attribute ครับ โดยค่าต่างๆ จะมีดังนี้

  • data-xตำแหน่งในแกน x (แนวนอน)
  • data-yตำแหน่งในแกน y (แนวตั้ง)
  • data-zตำแหน่งในแกน z (แนวลึก)
  • data-rotate-xการหมุนในแกน x
  • data-rotate-yการหมุนในแกน y
  • data-rotate-zการหมุนในแกน z
  • data-scaleขนาด

ให้เราลองกำหนดค่าเหล่านี้ให้กับ slide ในแต่ละหน้าของเราครับ

ตกแต่ง Slides ให้สวยงาม

มาถึงตอนนี้ slideshow ของเราเริ่มเป็นรูปเป็นร่างแล้ว ที่เหลือก็คือตกแต่งให้มันสวยงามเท่านั้นเองครับ ขั้นตอนแรกคือการทำให้ slides ที่ไม่ได้ active อยู่ ดูจางลงด้วย opacity:0.2 ครับ ให้เราใส่โค้ด css ด้านล่างนี้ลงไป

หลังจากนั้น ให้เราตกแต่งหน้าตาของแต่ละ slide ให้สวยงามตามใจชอบเลยครับ เท่านี้ slideshow ของเราก็พร้อมใช้งานแล้วล่ะครับ

สรุปวิธีการใช้ Impress.js

impress.js ช่วยให้ presentation มีความน่าสนใจมากขึ้น แทนที่จะติดกับรูปแบบเดิมๆ ที่จะเลื่อนในแนวเส้นตรงจากซ้ายไปขวา ส่วนการใช้งานนั้นก็ไม่ได้ยากอะไรเลย เพียงแค่เราเขียนโค้ด html แบบเดิม แล้วเพิ่ม data attribute สำหรับจัดตำแหน่งเข้าไปเท่านั้นเอง เพื่อนๆ สามารถดู source code ทั้งหมด ได้ตามด้านล่างนี้ครับ

(Visited 1,948 times, 1 visits today)

6 Responses to “สร้าง Presentation ให้น่าสนใจด้วย impress.js”

  1. Puwadon Sricharoen says:

    ชอบครับ ขอบคุณมาก ผมน่าจะมีโอกาสได้ใช้ … เร็วๆนี้

  2. Natthapong Nartnorakij says:

    ทำสไลด์อย่างกับหนังชอบผุดๆ เดียวเอาไปลองเล่นดูหน่อย

  3. cctv says:

    ขอบคุณครับ

  4. โอ้วดู demo แล้ว รักเลยครัช หัดใช้ก่อน ^_^

  5. โอ้วดู demo แล้ว รักเลยครัช หัดใช้ก่อน ^_^

  6. ลองมาใช้กันดู น่าใช้ไม่แพ้ prezi นะครับ แต่ใช้ความสามารถของ HTML กันหน่อย

Leave a Reply