HardcoreGraphic - Thailand Graphic Design Ezine

การสร้างหิมะหล่นหน้าเว็บ
Date : 12:04:03 | By : HardcoreGraphic

เทคนิคนี้บางท่านอาจจะทราบแล้วว่าทำอย่างไร แต่บางคนอาจยังไม่รู้ ก็ลองมาทำกัน การสร้างหิมะ หล่นบนหน้าเว็บ
เหมาะสำหรับเทศกาลอย่าง คริสมาสต์ ปีใหม่ หรือ งานรื่นเริงในฤดูหนาว เพราะจะทำให้คนเข้าชมเว็บรู้สึกถึงบรรยากาศ
ในช่วงเวลาดังกล่าวได้เป็นอย่างดี เราจะใช้วิธีการนำโค้ด Java Scripts ไปแปะยังหน้าเว็บของท่านครับ

1. ให้ทำการ Save ไฟล์ของท่านก่อนเลย ตั้งชื่อให้เรียบร้อย แล้วก็จัดการ Save ภาพหิมะที่ต้องการไปใช้
ภาพที่ Save ไปใช้จะต้องอยู่โฟลเดอร์เดียวกันกับไฟล์ Html

วิธี Save ให้คลิกขวาที่ภาพ เลือก Save Pictures as

2. ให้ Copy Code เหล่านี้ ไปแปะไว้ที่ Tag body ในไฟล์ที่คุณเซฟเมื่อตอนแรก

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) { 
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"><\/layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

</script>

3. สังเกตตรงบบรทัดที่ 3 (var snowsrc="snow1.gif") เป็นชื่อไฟล์ภาพของเรานั่นเอง เพราะฉะนั้นหากคุณลอง
Preview แล้วภาพเป็นกากบาทสีแดง ให้ตรวจสอบว่าชื่อไฟล์ภาพตรงกันหรือไม่

เรียบร้อยแล้ว เย็นยะเยือก!!

อ่านบทความอื่นเพิ่มเติม

+ HardcoreGraphic 7.0 Sponsored by Elife.co.th