การแสดงผลข้อความและใส่ลูกเล่นเอฟเฟกลงไปนั้นมีมากมายหลายแบบครับ ไม่ว่าจะเป็น Effect มาตราฐานของ jQuery เช่น Fade Blind Bounce Drop เป็นต้น หรือจะเล่นแสงสีลงไปในข้อความก็เป็นสิ่งที่ชวนให้ผู้เข้าชมติดตามเว็บไซต์เพราะมีความน่าสนใจ
textualizer เป็นชุดคำสั่งที่ทำงานร่วมกับ jQuery ในการแสดงลูกเล่นให้กับข้อความ โดยจะประกอบไปด้วย 4 Effect คือ fadeIn, slideLeft, slideTop, และ random ซึ่งเราสามารถกำหนดค่าได้ตามตั้งการ การแสดงผลของเจ้า textualizer จะเป็นในลักษณะการสลับข้อความหรือคำ
การใช้งาน
- ก่อนอื่นต้องทำการโหลดเจ้า textualizer.min.js มาก่อน
-
จากนั้นทำการเรียกไฟล์ผ่านคำสั่ง
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="textualizer.min.js"></script>
-
เริ่มใช้งานด้วยการใส่คำสั่ง ลงไปในส่วน head
<script type="text/javascript"> var list = ['first blurb', 'second blurb', 'third blurb']; // list of blurbs var txt = $('#txtlzr'); // The container in which to render the list var options = { duration: 1000, // Time (ms) each blurb will remain on screen rearrangeDuration: 1000, // Time (ms) a character takes to reach its position effect: 'random' // Animation effect the characters use to appear } txt.textualizer(list, options); // textualize it! txt.textualizer('start'); // start </script> -
จากนั่นใส่คำสั่งด้านล่างลงใน body
<div id="txtlzr"></div>
การทำงานของชุดคำสั่งคือ เจ้า textualizer จะทำการข้อความที่กำหนดไว้ที่ var list = ['first blurb', 'second blurb', 'third blurb']; เราสามารถกำหนดข้อความที่ต้องการได้ที่นี่ โดยข้อความทั้งหมดจะถูกแสดงผลใน div id="txtlzr"
อธิบายตัวแปร
list คือชุดข้อความของเราที่ต้องการแสดงผล
txt คือตำแหน่งที่เราต้องการจะแสดงผล ซึ่งจะต้องมีตำแหน่งนั้นจริงๆด้วยครับ
options คือ ลูกเล่นออฟชั่นที่จะแสดงเอฟเฟก โดยแยกเป็น
options - duration ระยะเวลาในการเปลี่ยนข้อความแต่ล่ะข้อความ
options - rearrangeDuration ระยะเวลาในการแสดงเอฟเฟกตอนเปลี่ยนข้อความ
options - effect คือเอฟเฟกเวลาเปลี่ยนข้อความ ซึ่งมีให้เลือก 4 แบบคือ fadeIn, slideLeft, slideTop, และ random
เรายังสามารถใช้คำสั่ง API ในการสั่งให้เล่น หยุด หรือยกเลิกเอฟเฟกของข้อความนั้นได้ด้วย ซึ่งได้แก่
.textualizer('start') ให้ textualizer เริ่มทำงาน
.textualizer('pause') หยุดการทำงานชั่วคราวของ textualizer
.textualizer('stop') หยุดการทำงานทั้งหมดของ textualizer
.textualizer('destroy') ยกเลิกการใช้งาน textualizer
สนใจลองโหลดไปเล่นกันได้ที่ http://kiro.me/textualizer/
