[baffle.js] ทำให้ข้อความดูงงงวยกัน

วันนี้ผมจะมาแนะนำเจ้า baffle.js กันครับ โดยความสามารถของมันคือทำให้ข้อความดูอ่านยากหรือทำแบบค่อยๆ แสดงข้อความออกมานั้นเอง ดังตัวอย่าง Demo

โดยวิธีการใช้งานคือ

เริ่มจากดาวโหลดไฟล์จากเว็บ https://camwiegert.github.io/baffle/ มาก่อนหรือจะลงจาก npm (ถ้าใครงง ไว้ผมจะมาบอกเจ้า npm คืออะไรละกันครับ)

$ npm install –save baffle

วิธีใช้งานเบื้องต้นทำได้หลายวิธี เลือกมาซักวิธีเดียวก็พอนะครับ

// 1. เลือก tag css ที่ต้องการทำงาน
let b = baffle(‘.headline’);

// 2. เลือกจาก node html
let b = baffle(document.querySelector(‘.headline’));

// 3. เลือกจาก node html ที่ต้องการทั้งหมด
let b = baffle(document.querySelectorAll(‘a’));

//  การปรับแต่งข้อความ
let b = baffle(‘.headline’, {
characters: ‘abcdefghijklmnopqrstuvwxyz’,
speed: 75
});

การใช้งานเบื้องต้นก็มีประมาณนี้นะครับ ลองไปใช้งานกันดู

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s