มาทำหิมะด้วย particles.js บน Vue 3 กัน
สำหรับใครที่กำลังอยากจะเริ่มใช้ Vue 3 วันนี้ผมจะพาทุกคนมาทำหน้าเว็บสวย ๆ และง่ายมาก ๆ กับ particles.js กันครับ
ก่อนอื่นเลยเราจะต้องมาสร้างโปรเจคกันก่อน ซึ่งเราจะมาใช้ @vue/cli กันครับ โดยการเรียกผ่านคำสั่งด้านล่างนี้
$ vue create happy-new-yearโดยใน @vue/cli Version ใหม่นี้ เราสามารถเลือก Template ของ Vue 3 ได้
หลังจากนั้นก็รอให้พี่เขา Install Dependencies ให้ครบถ้วน
และสุดท้ายเราก็จะได้ Project ของ Vue 3 มาใช้กันแล้ว ง่ายมาก ๆ 😁
ขั้นตอนต่อไป เราจะมาลง Dependencies ของ particles.js กัน ซึ่งในครั้งนี้ผมจะสอนใช้ Vue 3 Plugin จาก tsparticles กัน
โดยเราสามารถติดตั้งผ่าน คำสั่งด้านล่างนี้
$ npm i particles.vue3เมื่อเราได้ Plugin มาแล้ว เราก็นำมาใช้ใน main.js ที่เราคุ้นเคย เดิมทีใน Vue 2 เราจะใช้ Plugin ผ่าน Vue.use(<-- MyPlugin --->) แต่ด้วย Vue 3 แยก Instance ออกมา เราจึงต้องเรียก .use จาก createApp
ในที่สุด โปรเจคเราก็พร้อมที่จะสร้าง Particles สวย ๆ แล้ว 😄
โดยเราสามารถ Copy จาก Example มาใส่ที่ App.vue หรือใช้จาก Code ด้านล่างของผมก็ได้เช่นกัน
เพื่อชมความวิ้ง ๆ ของ Particles เราสามารถให้เขา server และดูผ่าน http://localhost:8080/ ได้เลย
$ npm run serveเราก็จะได้ Particles งาม ๆ เหมือนภาพด้านล่างนี้
และเวลาต่อจากนี้ ก็คือช่วงเวลาที่ทุกคนจะได้ละเลง CSS ตามใจชอบได้เลยครับ
สุดท้ายนี้ ก็ขอให้ทุกคนสนุกกับ Coding และขอจบ Tutorial นี้ด้วยคำว่า
สวัสดีปีใหม่ครับทุกท่าน
ใครที่อยากได้หิมะแบบในรูป เราสามารถเปลี่ยน Image Src จาก Shape ได้ซึ่งในตัวอย่าง ผมใช้จากลิงก์ด้านล่างนี้
http://www.dynamicdigital.us/wp-content/uploads/2013/02/starburst_white_300_drop_2.pngและนำไปใส่แบบตัวอย่างด้านล่างนี้ได้เลยครับ
ใครที่อยากดู Code ตัวเต็ม สามารถดูได้จากลิงก์ด้านล่างนี้ได้เลยครับ
