Marquee ใน CSS - คู่มือสำหรับผู้เริ่มต้น
Marquee เปิดตัวครั้งแรกใน Internet Explorer และได้รับความนิยมอย่างมากในยุค 90 ก่อนที่ W3C จะตัดสินใจยกเว้นในองค์ประกอบมาตรฐาน HTML เนื่องจากปัญหาการใช้งาน นักออกแบบเว็บไซต์ได้รับการสนับสนุนให้ไม่ใช้แท็ก.
กระนั้นก็ดีที่กระโจมนั้นกำลังทำการคัมแบ็กไม่ใช่ในแท็ก รูปแบบเหมือนที่เคยทำ แต่ใน CSS Module โมดูลนี้พร้อมใช้งานเป็นส่วนหนึ่งของข้อกำหนด Webkit CSS และ W3C กำลังทำงานในโมดูลที่คล้ายกันเช่นกัน อย่างไรก็ตามเนื่องจากรุ่น W3C ยังอยู่ในขั้นตอนการแนะนำผู้สมัครจึงยังไม่สามารถใช้ได้ ดังนั้นในเวลานี้เราจะครอบคลุมเฉพาะจากข้อกำหนด Webkit.
ไวยากรณ์
ประการแรกกระโจมสามารถกำหนดโดยใช้ไวยากรณ์ชวเลขต่อไปนี้.
-webkit-marquee: [ทิศทาง] [เพิ่มขึ้น] [ซ้ำ] [สไตล์] [ความเร็ว]
ฉันเชื่อว่าแต่ละค่าที่จำเป็นในไวยากรณ์ข้างต้นค่อนข้างอธิบายตนเองหรืออื่น ๆ ที่คุณสามารถหาได้อธิบายอย่างเพียงพอในเอกสารนี้ ดังนั้นหากคุณต้องการเรียนรู้ลึกลงไปว่าไวยากรณ์นี้ทำงานอย่างไรคุณสามารถอ้างอิงเอกสารได้เสมอ.
จากนั้นเข้าร่วมกับเราในขณะที่เราดำเนินการสร้างตัวอย่างจริงและดูว่ามันทำงานอย่างไร.
ตัวอย่างที่ 1: การเลื่อนข้อความ
ในตัวอย่างแรกเราจะสร้างการเคลื่อนไหวแบบคลาสสิกของปะรำที่มีการย้ายข้อความจากขวาไปซ้าย.
มาสร้างมาร์กอัพข้อความของเราเหมือนด้านล่าง:
อมยิ้มราดหน้ามะนาวหยดพุทรานำไปใช้ผลไม้ทาร์ตทาร์ตชะเอมงา.
จากนั้นกำหนดปะรำด้วยไวยากรณ์ต่อไปนี้.
-webkit-marquee: เลื่อนอัตโนมัติไม่มีที่สิ้นสุดขนาดกลางปกติ; overflow-x: -webkit-marquee;
เมื่อทิศทางกระโจมถูกตั้งค่าเป็น รถยนต์, โดยค่าเริ่มต้นจะย้ายจากขวาไปซ้าย หรือคุณสามารถเปลี่ยนค่านี้เป็น ซ้าย. ยังสังเกตได้ว่า ล้น-X ต้องตั้งค่าคุณสมบัติเป็น -WebKit-กระโจม เพื่อที่เนื้อหาจะทำตัวเหมือนหนึ่งเสมอ หากคุณไม่ใช้คุณสมบัตินี้ข้อความจะไม่ย้ายไป.
ดูตัวอย่าง.
ตัวอย่างที่ 2: ตีกลับไปมา
ในตัวอย่างที่สองเราจะลองให้สไตล์ที่แตกต่างกับปะรำ เวลานี้เราใช้ สลับกัน แทน เลื่อน และเปลี่ยนค่าทิศทางเป็น ขวา. ด้วยวิธีนี้กระโจมจะย้ายจากด้านซ้ายไปทางขวาแล้วกระดอนไปมา.
-webkit-marquee: รถยนต์ขนาดกลางไม่มีที่สิ้นสุดสลับปกติ; overflow-x: -webkit-marquee;
ดูตัวอย่าง
ตัวอย่างที่ 3: เลื่อนข้อความขึ้นด้านบน
และสำหรับตัวอย่างสุดท้ายเราจะเปลี่ยนทิศทางของกระโจมเพื่อเลื่อนขึ้น มีสอง ทิศทาง ค่าที่ต้องทำ คุณสามารถเปลี่ยนค่าเป็น ขึ้น หรือ ล่วงหน้า.
โดยส่วนตัวแล้วฉันไม่เข้าใจว่าทำไม Webkit จึงให้ค่าสองค่าที่ทำสิ่งเดียวกันเพราะฉันคิดว่ามันอาจนำไปสู่ความสับสนสำหรับบางคน.
-webkit-marquee: เลื่อนขึ้นไปเป็นอนันต์ขนาดกลางปกติ; overflow-x: -webkit-marquee;
ดูตัวอย่าง
นอกจากนี้ฉันได้รวบรวมตัวอย่างเพิ่มเติมบางส่วน แต่พวกเขาจะท่วมท้นหากพวกเขาอธิบายทั้งหมดที่นี่.
แต่คุณสามารถดูการสาธิตทั้งหมดและดาวน์โหลดแหล่งข้อมูลจากลิงค์ด้านล่าง.
- การสาธิต
- แหล่งดาวน์โหลด
ความคิดและการอ้างอิงขั้นสุดท้าย
ฉันประหลาดใจเป็นครั้งแรกว่ายังคงมีความสนใจในปะรำซึ่งฉันคิดว่าได้พบจุดจบ นี่ทำให้ฉันถามว่าโมดูล CSS แบบนี้จะมีประโยชน์อย่างไร ในความเป็นจริงทุกเบราว์เซอร์ยังคงสนับสนุนมรดกของ แท็ก.
ดังนั้นสิ่งที่คุณคิดว่า? กระโจมยังคงมีความเกี่ยวข้องในวัยนี้และจะเป็นประโยชน์ในการออกแบบเว็บไซต์ที่ทันสมัยหรือไม่?
หากคุณยังสงสัยเกี่ยวกับสิ่งของปะรำนี้คุณสามารถเยี่ยมชมข้อมูลอ้างอิงบางส่วนต่อไปนี้:
- การอ้างอิง CSS ของ Safari
- ตัวสร้างปะรำ Webkit
- เอกสารที่ครอบคลุมของเก่า
แท็กจาก Sitepoint. - และยังมีเครื่องกำเนิดไฟฟ้าสำหรับเกือบทุกอย่างรวมถึงตัวสร้าง Marquee นี้ด้วย.
