ThMambo.com : แหล่งรวมข่าวสารแมมโบ้และจูมล่าเมืองไทย

Home

ภาพเงาสะท้อนด้วย 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” เป็นต้น