ก่อนจะว่าไปถึงอย่างอื่น ก็ขอสวัสดีกับผู้ชม เอ้ย! ผู้อ่านทุกท่าน
โพสต์ที่ท่านอ่านตอนนี้ เป็นโพสต์แรกของเว็บ itpcc.net โฉมใหม่ หลังจากที่ปิดไปปีหนึ่งเพราะลืมจ่ายค่าโฮสต์ เอ้ย! ยุ่งกับการสอบเข้า ซึ่งตอนนี้ก็เสร็จไปแล้ว ก็เลยขอล้างไพ่แล้วทำใหม่ซะเลย
ยังไงก็ขอฝากผู้อ่านทุกท่านติดตามบล็อกผม เก็บผมไว้ใน bookmark ด้วยนะครับ ขอบคุณครับ 😀
ตอนนี้ผมกำลังทำ portfolio เก็บผลงานแบบ Single Web Page อยู่ครับ
ก็วางแผนว่าช่วงเปลี่ยนหน้าไปหน้าผลงาน จะหมุนโลโก้สักสองรอบ แล้วซูมโลโก้จนส่วนขาวของโลโก้คลุมทั้งหน้า แล้วเฟดเข้าหน้าผลงาน
อันที่จริงจะใช้แฟลชก็ได้ แต่เดี๋ยวนี้แม้แต่ศาสดาจ็อบซึ่งล่วงลับไปแล้วยังไม่เผาผีกับแฟลช แถม CSS3&HTML5 ก็มาแรง ก็ขอจัด CSS3 หน่อยแล้วกัน
ซึ่งวิธีการก็ไม่ได้ยากเลยอย่างที่หลายคนคิดเลยครับ แค่นี้เอง :
.welcome.change-page .logo {
-webkit-animation: spinZoom 2s 1 ease-in-out;
-moz-animation: spinZoom 2s 1 ease-in-out;
-o-animation: spinZoom 2s 1 ease-in-out;
}
@-webkit-keyframes spinZoom {
0% { -webkit-transform: rotate(-720deg) scale(1) skew(1deg) translate(0px); opacity: 0; }
100% { -webkit-transform: rotate(720deg) scale(1000) skew(1deg) translate(0px); opacity: 1; }
}
@-moz-keyframes spinZoom {
0% { -moz-transform: rotate(-720deg) scale(1) skew(1deg) translate(0px); opacity: 0; }
100% { -moz-transform: rotate(720deg) scale(1000) skew(1deg) translate(0px); opacity: 1; }
}
@-o-keyframes spinZoom {
0% { -o-transform: rotate(-720deg) scale(1) skew(1deg) translate(0px); opacity: 0; }
100% { -o-transform: rotate(720deg) scale(1000) skew(1deg) translate(0px); opacity: 1; }
}
จะอธิบายทีละส่วนนะครับ
.welcome.change-page .logo
ผมจะใส่ logo ไว้ใน div คลาส welcome
ทีนี้เวลาคลิกไปหน้าอื่น ผมก็จะสั่งให้ javascript เพิ่มคลาส change-page เข้าไป
มันก็จะเข้ากับ css selector ตัวนี้ครับ
animation: spinZoom 2s 1 ease-in-out;
ซึ่งสั่งให้แสดง animation ชื่อ spinZoom นาน 2 วินาที 1 รอบ โดยค่อยๆ เร็วขึ้น แล้วค่อยๆ ช้าลงจนหยุด
ซึ่ง animation spinZoom ก็มีแค่นี้เองครับ
0% { -webkit-transform: rotate(-720deg) scale(1) skew(1deg) translate(0px); opacity: 0; }
100% { -webkit-transform: rotate(720deg) scale(1000) skew(1deg) translate(0px); opacity: 1; }
คือตอนแรก (0% หรือจะใช้ from ก็ได้ครับ) ให้หมุนไป -720 องศา หรือหมุนทวนเข็มนาฬิกา 2 รอบครบ
ตรงนี้อาจสงสัยว่าทำไมไม่เริ่มที่ 0 ไปล่ะ
ก็ขอตอบแบบเกรียนๆ ว่า ผมอยากลองของครับ แค่นั้นเอง (= =” )
แล้วก็ตอนจบ ให้หมุนไป 720 องศา หรือตามเข็มนาฬิกา 2 รอบนับจาก 0 องศาครับ
สรุปก็คือหมุนไปทั้งหมด 4 รอบนั่นเอง (-720-720 = -1440 องศา)
ในขณะเดียวกันก็ให้ขยายขนาด (หรือหลอกว่าซูมเข้ามา) จาก 1 เท่าเป็น 1000 เท่า เอาให้จอบึ้มไปเลย! 😈
มินาล่ะ ศาสดาจ็อบถึงได้ทิ้งแฟลชได้ลงคอ มันก็ “ใช้ได้อยู่อ่ะนะ (ทำเสียงแบบเฮียเอก HRK ด้วยนะครับ 😛 )”
ขอตัวไปนอนก่อนนะครับ พรุ่งนี้กำนันแกจะยึดประเทศ เอ้ย! เผด็จศึกล่ะ ต้องตามข่าวเร็วหน่อย แล้วถ้ามีทิปอะไรก็จะมาเขียนอีกนะครับ