|
ภาพเงาสะท้อนด้วย JavaScript |
|
|
 | วันนี้มีจาวาสคริปท์เท่ห์ๆ มาฝากกันครับ โดยความเก่งของสคริปท์ที่แนะนำนี้จะสามารถสร้างภาพเงาสะท้อนได้อย่างสวยงามสมจริง ไม่ต้องพึ่ง photoshop กำหนดขนาดของเงาสะท้อน และการจางของภาพได้ผ่านสคริปท์ได้อย่างง่ายดาย คล้ายดังร่ายเวทย์มนต์ยังไงยังงั้น | | | |
สคริปท์โอเพ่นซอร์สตัวนี้มีชื่อว่า reflection.js ได้รับการพัฒนาให้มีความสามารถมากขึ้นเรื่อยๆ จนถึงเวอร์ชั่น 1.5 แล้ว โดยเจ้าของบล็อกไซต์ Romain Guy ตั้งใจเผยแพร่ให้ทุกคนนำไปใช้ และถ้าใครมีไอเดียในการแก้ไขปรับปรุงให้มันดีขึ้นก็สามารถติดต่อกลับไปได้ที่ บล็อกไซต์ ของเขา
แนะนำกันไปเยอะแล้ว เรามาลองดูความสามารถของมันดีกว่า เริ่มต้นด้วยการดาวน์โหลดสคริปท์ reflection.js 1.5
คลายไฟล์สคริปท์ชื่อว่า reflect.js (ขนาดของสคริปท์แค่ 5 กิโลไบต์เท่านั้น) จัดเก็บไฟล์สคริปท์ไว้บนเซิร์ฟเวอร์ของคุณ จากนั้นในหน้าเว็บเพิ่มบรรทัดคำสั่งของสคริปท์เข้าไปในระหว่างแท็ก <head></head>
<script type="text/javascript" src="reflection.js"></script>
หลังจากเซตอัพเสร็จแล้ว เราจะลองสร้างภาพเงาสะท้อนกัน โดยเพิ่ม class=reflect เข้าไป ดังรูปข้างล่างนี้
นอกจากจะกำหนดเงาสะท้อนด้วยค่าดีฟอลต์แล้ว เรายังสามารถปรับแต่งเงาสะท้อนได้ด้วย โดยกำหนด class= reflect rheight33 สำหรับความสูงของเงาสะท้อนที่ 33% ลองดูตัวอย่างเปรียบเทียบข้างล่างนี้
คุณสมบัติในการปรับแต่งอีกอันหนึ่งที่น่าสนใจก็คือ ความทึบแสงของเงาสะท้อน (opacity) เช่นต้องการเงาที่มีความทึบ 30% ก็ใช้คำสั่ง class=reflect ropacity30 ลองดูรูปตัวอย่างข้างล่างนี้
ไม่เพียงเท่านั้น คุณยังสามารถผสมผสานทั้งสอง class เข้าด้วยกันได้อีกต่างหาก เช่น ผมต้องการภาพสะท้อนที่สูง 80% และค่าความทึบแสง 40% ก็ใช้คำสั่ง class = reflect rheight80 ropacity40 เป็นต้น
ความจริงลูกเล่นสำหรับการใช้สคริปท์ reflect.js ยังมีอีกพอสมควร เอาเป็นว่า ลองอ่านเพิ่มเติมจากไฟล์ readme.html ที่มาพร้อมกับสคริปท์ก็แล้วกันนะครับ
|
