ทำการซูมหน้าเว็บด้วย zoom js

การทำซูม Element แบบง่ายๆ เอาไว้แต่งเว็บไซต์ให้มีความแตกต่าง โดย plugin ที่จะใช้ชื่อว่า zoom js ที่ค่อนข้างเล็กและไม่หนักมาก

ตัวอย่างของงานที่เสร็จแล้วครับ  (ลอง click ใน element ดูครับ)

วิธีการ Implement Plugin ครับ

1 ขั้นแรกเราต้องโหลด zoom js มาก่อนครับ ไฟล์ที่ผมใช้เป็น version zoom.js 0.3 สามารถ Download ได้ท้ายบทความ

2 นำมา Include เข้ามาใน Project ในท้ายของ tag body HTML

<script src="js/zoom.js"></script>

3 ทำการเรียกใช้ function zoom.to()

<script>
	// ทำการ query ทุก Element ที่อยู่ใน class content และ add event click เข้าไป 
        document.querySelector( '.content' ).addEventListener( 'click', function( event ) {
				// เช็ค event ว่าสามาถทำงานได้หรือไม่
                                event.preventDefault();
                                //  เรียกใช้ zoom.to โดยการส่งค่า Element เข้าไป
				zoom.to({ element: event.target });
	} );
</script>

เพียงเท่านี้ element ใน class content ทั้งหมด เมื่อ click จะ zoom ไปที่ element นั้นทันที

DOWN LOAD source ครับ