บรรดาผู้ที่เคยเขียน HTML เป็นเวลานานอาจจำองค์ประกอบได้ นี่เป็นองค์ประกอบเฉพาะของเบราว์เซอร์ที่สร้างแบนเนอร์ของข้อความที่เลื่อนผ่านหน้าจอ องค์ประกอบนี้ไม่ถูกเพิ่มลงใน ข้อกำหนด HTML และการสนับสนุนสำหรับเบราว์เซอร์นั้นแตกต่างกันไป คนมักมีความคิดเห็นอย่างมากเกี่ยวกับการใช้องค์ประกอบนี้ทั้งด้านบวกและด้านลบ แต่ไม่ว่าคุณจะรักหรือเกลียดมันก็ทำหน้าที่ในการสร้างเนื้อหาที่ล้นไปตามเขตแดนของกล่อง
ส่วนหนึ่งของเหตุผลที่เบราว์เซอร์ไม่เคยใช้งานอย่างเต็มที่นอกจากความเห็นส่วนตัวที่เข้มแข็งแล้วถือว่าเป็นผลภาพและไม่ควรกำหนดโดย HTML ซึ่งจะกำหนดโครงสร้าง ควรใช้ CSS หรือ CSS แทน และ CSS3 เพิ่มโมดูลปะรำเพื่อควบคุมวิธีที่เบราว์เซอร์เพิ่ม ผลกระโจม ให้กับองค์ประกอบต่างๆ
คุณสมบัติ CSS3 ใหม่
CSS3 เพิ่ม คุณสมบัติใหม่ ห้าอย่างเพื่อช่วยควบคุมการแสดงเนื้อหาของคุณในปะรำ: สไตล์ล้น, marquee-style, marquee-play-count, marquee-direction และ marquee-speed
ล้นสไตล์
พร็อพเพอร์ตี้แบบล้น (ซึ่งผมได้กล่าวถึงในบทความ CSS Overflow) จะกำหนดลักษณะที่ต้องการสำหรับเนื้อหาที่มีเนื้อหาล้นเกินในช่องเนื้อหา ถ้าคุณตั้งค่าเป็น marquee-line หรือ marquee-block เนื้อหาของคุณจะเลื่อนเข้าและออกไปทางซ้าย / ขวา (marquee-line) หรือขึ้น / ลง (marquee-block)
กระโจมสไตล์
พร็อพเพอร์ตี้นี้กำหนดว่าเนื้อหาจะถูกย้ายเข้าสู่มุมมอง (และออก) อย่างไร
ตัวเลือกต่างๆคือเลื่อนสไลด์และสลับกัน เลื่อนเริ่มต้นด้วยเนื้อหาที่ปิดหน้าจอโดยสิ้นเชิงจากนั้นจะเลื่อนไปทั่วพื้นที่ที่มองเห็นได้จนกว่าหน้าจอจะปิดลงทั้งหมด สไลด์เริ่มต้นด้วยเนื้อหาที่ปิดหน้าจอโดยสิ้นเชิงจากนั้นจะเลื่อนไปจนกว่าเนื้อหาจะเข้าสู่หน้าจออย่างสมบูรณ์และไม่มีเนื้อหาเหลืออยู่เพื่อสไลด์บนหน้าจอ
สุดท้ายสลับเนื้อหาจากด้านหนึ่งไปข้างหน้าเลื่อนไปมา
ปะรำเล่นนับ
หนึ่งในข้อเสียของการใช้องค์ประกอบของ MARQUEE คือกระโจมไม่เคยหยุดนิ่ง คุณสามารถตั้งค่าพัสดุไปรษณีย์ให้หมุนเพื่อเปิดและปิดเนื้อหาได้หลายครั้ง
ปะรำทิศทาง
นอกจากนี้คุณยังสามารถเลือกทิศทางที่เนื้อหาควรเลื่อนไปบนหน้าจอ ค่า forward และ reverse ขึ้นอยู่กับทิศทางของข้อความเมื่อ overflow-style เป็น marquee-line และขึ้นหรือลงเมื่อ overflow-style เป็น marquee-block
รายละเอียดทิศทาง Marquee-Direction
| ล้นสไตล์ | ทิศทางภาษา | ข้างหน้า | ถอยหลัง |
|---|---|---|---|
| ปะรำเส้น | ltr | ซ้าย | ขวา |
| RTL | ขวา | ซ้าย | |
| ปะรำบล็อก | ขึ้น | ลง |
ความเร็วกระโจม
คุณสมบัตินี้กำหนดความเร็วเนื้อหาที่เลื่อนบนหน้าจอ ค่าจะช้าปกติและรวดเร็ว ความเร็วจริงขึ้นอยู่กับเนื้อหาและเบราว์เซอร์ที่แสดง แต่ค่าต้องช้าช้ากว่าปกติซึ่งช้ากว่าเร็ว
การสนับสนุนเบราเซอร์ของ Marquee Properties
คุณอาจต้องใช้ คำนำหน้าของผู้ขาย เพื่อให้องค์ประกอบ CSS marquee ทำงานได้ มีดังนี้
| CSS3 | คำนำหน้าผู้ขาย |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| กระโจมสไตล์ | -webkit-กระโจมสไตล์ |
| ปะรำเล่นนับ | -webkit-ปะรำซ้ำ |
| กระโจม - ทิศทาง: ไปข้างหน้า | ย้อนกลับ; | - เว็บแคม - กระโจม - ทิศทาง: ไปข้างหน้า | ย้อนหลัง; |
| ความเร็วกระโจม | -webkit-ปะรำความเร็ว |
| ไม่เท่ากัน | -webkit-ปะรำ-เพิ่มขึ้น |
คุณสมบัติสุดท้ายช่วยให้คุณสามารถกำหนดวิธีการที่ใหญ่หรือเล็กขั้นตอนควรเป็นเนื้อหาเลื่อนบนหน้าจอในกระโจม
เพื่อให้การทำงานของกระโจมของคุณเป็นไปได้คุณควรวางค่าที่ตั้งไว้ล่วงหน้าของผู้ขายแล้วทำตามด้วยค่าข้อกำหนด CSS3 ตัวอย่างเช่นนี่คือ CSS สำหรับกระโจมที่เลื่อนข้อความ 5 ครั้งจากด้านซ้ายไปขวาภายในกล่อง 200x50
{
ความกว้าง: 200px; ความสูง: 50px; พื้นที่สีขาว: nowrap;
overflow: hidden;
ล้น-x: -webkit-ปะรำ;
- เว็บแคม - กระโจม - ทิศทาง: ส่งต่อ;
-webkit-marquee-style: เลื่อน;
- เว็บแคม - กะพริบ - ความเร็ว: ปกติ;
- เว็บเบราเซอร์ - ปะรำ - เพิ่มขึ้น: เล็ก;
- เว็บแคม - กระโจม - ซ้ำ: 5;
overflow-x: marquee-line;
กระโจม - ทิศทาง: ไปข้างหน้า;
สไตล์กระโจม: เลื่อน;
กะพริบความเร็ว: ปกติ;
marquee-play-count: 5;
}