การใช้ JS ในการออกแบบเว็บสามารถบรรลุเอฟเฟกต์พิเศษหลายหน้า แต่หลายคนไม่สนใจเอฟเฟกต์อันทรงพลังของแท็กเมตาในแท็ก HTML ในความเป็นจริง Meta Tags ยังสามารถบรรลุเอฟเฟกต์การเปลี่ยนหน้าเว็บที่สวยงามมากมาย
Meta Tag เป็นแท็กเสริมในพื้นที่ HTML Language Head แท็กเมตาถูกวางไว้บน <head> ... </head> ของแต่ละหน้าเว็บ
ตรงกลางเราคุ้นเคยกับ:
<meta name = content ตัวสร้าง = Microsoft FrontPage 3.0> // คำแนะนำสำหรับการแก้ไขเครื่องมือ;
<meta name = contents contents = ... > // คำหลักคำอธิบาย;
<meta name = คำอธิบายเนื้อหา = ... > // อธิบายคำอธิบายหน้าแรก;
มันให้ข้อมูลที่ผู้ใช้มองไม่เห็น Meta Tags มักจะใช้เพื่อกำหนดหัวข้อหน้าสำหรับหุ่นยนต์ค้นหาเครื่องมือค้นหาหรือเพื่อกำหนดคุกกี้บนเบราว์เซอร์ของผู้ใช้ พวกเขาสามารถใช้เพื่อระบุผู้แต่งตั้งค่ารูปแบบหน้า, สรุปเนื้อหาฉลากและคำหลัก; พวกเขายังสามารถตั้งค่าหน้าเพื่อทำให้พวกเขาเป็นไปได้
รีเฟรชตัวเองตามช่วงเวลาที่คุณกำหนดตั้งค่าระดับเนื้อหา RASC ฯลฯ
บทความนี้ส่วนใหญ่จะอธิบายวิธีการใช้เมตาแท็กเพื่อสร้างเอฟเฟกต์การเปลี่ยนหน้า ...
การใช้งาน:
<meta http-equiv = เนื้อหาหน้าเข้า = BlendTrans (ระยะเวลา = 0.5)>
<meta http-equiv = เนื้อหาหน้าออก = BlendTrans (Duration = 0.5)>
BlendTrans เป็นประเภทของตัวกรอง Dynamic CSS ที่ให้เอฟเฟกต์ซีดจาง นอกจากนี้ยังสามารถใช้ตัวกรองแบบไดนามิกอื่นสำหรับการป้อนหน้าและเอฟเฟกต์ทางออก:
ตัวกรองแบบไดนามิกสามารถเพิ่มเอฟเฟกต์การเคลื่อนที่และการแปลงภาพลงในหน้า พวกเขาสามารถแบ่งออกเป็นสองประเภทของการผสมผสาน (มิกซ์) และเปิดเผย (จอแสดงผล)
อดีตสามารถค่อยๆหายไปหรือปรากฏขึ้นในขณะที่หลังมีเอฟเฟกต์การแปลงภาพ 24 รายการ ...
<meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย trans (duration = x, transition = y)>
<meta http-equiv = เนื้อหาหน้า-ออก = reviewtrans (duration = x, transition = y)>
ระยะเวลา: ระบุระยะเวลาของเอฟเฟกต์ตัวกรอง (หน่วย: วินาที)
การเปลี่ยนแปลง: ประเภทตัวกรอง ระบุว่ามีการใช้เอฟเฟกต์พิเศษใดค่าคือ 0-23
-
0: สี่เหลี่ยมผืนผ้าหดตัว 1: สี่เหลี่ยมผืนผ้าขยายตัว
2: การลดวงกลม 3: การขยายวงกลม
4: รีเฟรชลงสู่อันดับ 5: รีเฟรชขึ้นไปด้านล่าง
6: รีเฟรชจากซ้ายไปขวา 7: รีเฟรชจากซ้ายไปซ้าย
8: มู่ลี่แนวตั้ง 9: มู่ลี่แนวนอน
10: ผ้าม่านแนวนอนที่พลัดถิ่น 11: มู่ลี่แนวตั้งที่พลัดพราก
12: การแพร่จุด 13: รีเฟรชซ้ายและขวาไปกลาง
14: รีเฟรชจากกลางถึงซ้ายและขวา 15: รีเฟรชจากกลางถึงบนและล่าง
16: ขึ้นและลงจนถึงกลาง 17: ลงและขวาไปทางซ้ายบน
18: ขวาบนลงล่างซ้าย 19: จากบนซ้ายไปล่างขวาล่าง
20: ล่างซ้ายไปขวาบน 21: แถบแนวนอน
22: แถบแนวตั้ง 23: เลือกหนึ่งใน 22 แบบสุ่มข้างต้น
-
ตราบใดที่เอฟเฟกต์การแปลงหน้าเว็บถูกจับคู่อย่างถูกต้องเอฟเฟกต์การเปลี่ยนแปลงเหล่านี้จะทำให้เกิดความประทับใจอย่างลึกซึ้งต่อผู้เข้าชมแม้กระทั่งผู้ที่ไม่สนใจเว็บไซต์ของคุณ โดยเฉพาะอย่างยิ่งสำหรับเพื่อนที่ต้องการเรียนรู้การผลิตเว็บเพจพวกเขาอาจคัดลอกหน้าเว็บของคุณเพื่อการศึกษาและการวิจัย ในความเป็นจริงคุณเพิ่งเพิ่มรหัสสั้น ๆ^ _^ เอฟเฟกต์การแปลงเว็บเพจ (ทรานส์) แบ่งออกเป็นสี่หมวดหมู่: เข้าสู่หน้าเว็บ (หน้าเข้า) ออกจากหน้าเว็บ (ออกจากหน้า) เข้าสู่เว็บไซต์ แต่ละหมวดหมู่หลักแบ่งออกเป็น 25 หมวดหมู่ย่อย ก่อนอื่นให้ใช้เอฟเฟกต์ของการเข้าสู่หน้าเว็บเพื่อแสดง:
เอฟเฟกต์เมื่อเข้าสู่หน้าเว็บ
1. รหัสเอฟเฟกต์แบบผสมมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = BlendTrans (ระยะเวลา = 1.0)>
2. รหัสเอฟเฟกต์การหดตัวรูปกล่องมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 0)>
3. รหัสเอฟเฟกต์รูปรังสีรูปกล่องมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, การเปลี่ยนแปลง = 1)>
4. รหัสเอฟเฟกต์การหดตัวแบบวงกลมมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 2)>
5. รหัสเอฟเฟกต์การแผ่รังสีแบบวงกลมมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, การเปลี่ยนแปลง = 3)>
6. รหัสเอฟเฟกต์การลบขึ้นมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 4)>
7. รหัสเอฟเฟกต์การลบลงมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 4)>
8. รหัสสำหรับการลบสิทธิ์ในเอฟเฟกต์มีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = การเปิดเผย (ระยะเวลา = 1.0, transition = 6)>
9. รหัสเอฟเฟกต์ลบซ้ายมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 7)>
10. รหัสเอฟเฟกต์การปิดบังแนวตั้งมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 8)>
11. รหัสเอฟเฟกต์การปิดบังแนวนอนมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 9)>
12. รหัสเอฟเฟกต์กระดานหมากรุกแนวนอนมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 10)>
13. รหัสเอฟเฟกต์บอร์ดแนวตั้งมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, การเปลี่ยนแปลง = 11)>
14. รหัสเอฟเฟกต์การสลายตัวมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 12)>
15. รหัสเอฟเฟกต์ของการเยื้องด้านซ้ายและขวาไปยังศูนย์มีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย review (duration = 1.0, transition = 13)>
16. รหัสเอฟเฟกต์ของศูนย์ไปยังการขยายตัวซ้ายและขวามีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผยข้อมูล (ระยะเวลา = 1.0, การเปลี่ยนแปลง = 14)>
17. รหัสเอฟเฟกต์การเยื้องขึ้นและลงมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 16)>
18. รหัสเอฟเฟกต์ของศูนย์ไปที่ขึ้นและลงมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, การเปลี่ยนแปลง = 17)>
19. แยกรหัสเอฟเฟกต์จากด้านล่างซ้ายดังต่อไปนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 18)>
20. แยกรหัสเอฟเฟกต์จากซ้ายบนดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 19)>
ยี่สิบเอ็ด แยกรหัสเอฟเฟกต์ออกจากด้านล่างขวาดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 20)>
ยี่สิบสอง แยกรหัสเอฟเฟกต์ออกจากขวาบนดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 21)>
ยี่สิบสาม รหัสเอฟเฟกต์ของเส้นแนวนอนแบบสุ่มมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 22)>
ยี่สิบสี่ รหัสเอฟเฟกต์ของเส้นแนวตั้งแบบสุ่มมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 22)>
25. รหัสเอฟเฟกต์แบบสุ่มมีดังนี้: <meta http-equiv = เนื้อหาหน้าเข้า = เปิดเผย (ระยะเวลา = 1.0, transition = 23)>
ตอนนี้มาวิเคราะห์รหัสเหล่านี้กันเถอะ ก่อนอื่นคุณจะเห็นว่ารหัสเหล่านี้ส่วนใหญ่คล้ายกันมาก ในความเป็นจริงแม้ว่าจะมีหลายหมวดหมู่ แต่ 25 หมวดหมู่ย่อยในแต่ละหมวดหมู่หลักสอดคล้องกับเดียวกันและถูกระบุด้วยตัวเลข (ยกเว้นการผสมเอฟเฟกต์ผสม (ระยะเวลา = 1.0)) ดังนั้นจึงไม่จำเป็นต้องให้ตัวอย่างกับหมวดหมู่ที่ไม่ใช่หมวดหมู่ เพียงแทนที่หน้าเข้าหน้าด้วยการออกจากหน้า (ออกจากหน้าเว็บ), ไซต์เข้า (ออกจากเว็บไซต์) และออกจากไซต์ (ออกจากเว็บไซต์) และคุณสามารถบรรลุเอฟเฟกต์ที่ต้องการและยังสะดวกกว่าที่จะจดจำ โดยที่ระยะเวลา = 1.0 สามารถกำหนดระยะเวลาสำหรับแต่ละรอบได้หน่วยคือวินาที (ตอนนี้ตั้งค่าคือ 1 วินาทีต่อรอบ) ควรสังเกตว่าเอฟเฟกต์ของหมวดหมู่หลักทั้งสี่สามารถตั้งค่าได้ในเวลาเดียวกันบนหน้าเว็บ แต่แต่ละหมวดหมู่หลักแต่ละประเภทสามารถกำหนดเอฟเฟกต์เดียวเท่านั้น นอกจากนี้หากหน้าเว็บเป็นหน้าเฟรมจะไม่แสดงผลเอฟเฟกต์