โฮมเพจ » การเข้ารหัส » Marquee ใน CSS - คู่มือสำหรับผู้เริ่มต้น

    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 แบบนี้จะมีประโยชน์อย่างไร ในความเป็นจริงทุกเบราว์เซอร์ยังคงสนับสนุนมรดกของ แท็ก.

    ดังนั้นสิ่งที่คุณคิดว่า? กระโจมยังคงมีความเกี่ยวข้องในวัยนี้และจะเป็นประโยชน์ในการออกแบบเว็บไซต์ที่ทันสมัยหรือไม่?

    หากคุณยังสงสัยเกี่ยวกับสิ่งของปะรำนี้คุณสามารถเยี่ยมชมข้อมูลอ้างอิงบางส่วนต่อไปนี้: