การสร้าง“ Marquee” ขั้นสูงด้วย CSS3 Animation
วันนี้เราจะไปดู “ปะรำ” อีกครั้ง เราได้พูดถึงมันในโพสต์ก่อนหน้าของเราซึ่งพูดคุยเกี่ยวกับการใช้ -WebKit-กระโจม ทรัพย์สิน แต่คราวนี้เราจะนำเรื่องนี้ไปอีกหน่อย.
ในโพสต์นี้เราจะสร้าง ปะรำเหมือน ผลกระทบโดยใช้ CSS3 Animation ด้วยวิธีนี้เราจะสามารถเพิ่มฟังก์ชั่นเพิ่มเติมที่ไม่สามารถเข้าถึงได้ด้วย -WebKit-กระโจม.
นอกจากว่าคุณคุ้นเคยกับโมดูลภาพเคลื่อนไหว CSS3 แล้วเราขอแนะนำให้คุณดูข้อมูลอ้างอิงต่อไปนี้ก่อนที่จะดำเนินการตามเอกสารนี้:
- ภาพเคลื่อนไหว CSS3 - W3School
- ภาพเคลื่อนไหว CSS - Mozilla Dev เครือข่าย
นอกจากนี้โปรดทราบว่าในขณะนี้ภาพเคลื่อนไหว CSS3 สามารถทำงานได้เฉพาะใน Firefox 8+, Chrome 12+ และ Safari 5.0+ กับรุ่นนำหน้า (-moz- และ -WebKit-) อย่างไรก็ตามเราจะใช้เฉพาะรุ่นอย่างเป็นทางการจาก W3C โดยไม่มีคำนำหน้าเพื่อหลีกเลี่ยงการทำเกินบทความนี้ด้วยรหัสฟุ่มเฟือย.
การแก้ไขปัญหาของปะรำ
ปัญหาอย่างหนึ่งของปะรำคือข้อความนั้นเคลื่อนไหวอย่างต่อเนื่อง พฤติกรรมนี้รบกวนการอ่านและข้อความก็อ่านยาก เวลานี้เราจะพยายามสร้างปะรำรุ่นของเราเองและทำให้เป็นมิตรต่อผู้ใช้ ตัวอย่างเช่น; แทนที่จะย้ายข้อความอย่างต่อเนื่อง, เราจะหยุดมันเมื่อมันปรากฏอย่างสมบูรณ์เพื่อให้ผู้ใช้สามารถอ่านข้อความได้สักครู่.
กระดานเรื่องราว (เรียงลำดับ)
การสร้างสรรค์และการออกแบบทุกครั้งเช่นโลโก้ภาพประกอบหรือเว็บไซต์มักเริ่มต้นด้วยร่าง ในด้านการผลิตแอนิเมชั่นเรื่องนี้ทำได้ด้วยกระดานเรื่องราว ก่อนที่เราจะเริ่มการเข้ารหัสใด ๆ เราจะสร้าง a ก่อน เรียงลำดับของกระดานเรื่องราว, เพื่อช่วยให้เราเห็นภาพเคลื่อนไหวของเรา.
ดังที่คุณเห็นจากกระดานเรื่องราวด้านบนเราวางแผนที่จะแสดงข้อความสองบรรทัดเท่านั้นซึ่งทั้งคู่จะย้ายตามลำดับจากขวาไปซ้าย.
กระดานเรื่องราวของเราไม่ซับซ้อนเหมือนกระดานเรื่องราวสำหรับภาพยนตร์อนิเมชั่นจริง แต่ประเด็นคือ: ตอนนี้เราสามารถเห็นภาพว่าปะรำของเราจะมีลักษณะอย่างไร.
HTML Markup
เนื่องจากภาพเคลื่อนไหวของเราเป็นไปอย่างเรียบง่ายมาร์กอัป HTML ก็จะง่ายเหมือน:
วิธีเพิ่มบทความที่เกี่ยวข้องกับ WordPress โดยไม่ต้องใช้ปลั๊กอิน
ทำให้ไฟล์ Dropbox ของคุณทำงานอัตโนมัติ
ลักษณะพื้นฐาน
ก่อนที่จะหลีกเลี่ยงสิ่งต่าง ๆ ของแอนิเมชั่นลองเพิ่มสไตล์พื้นฐานก่อน เริ่มกันเลยโดยการเพิ่มพื้นหลังสำหรับ HTML ธาตุ.
html background: url ('… /images/skewed_print.png'); ต่อไปเราจะวางกระโจมที่กึ่งกลางของหน้าต่างเบราว์เซอร์รวมทั้งเพิ่มรายละเอียดบางอย่างเช่นเงาภายในสีพื้นหลังและเส้นขอบ.
.ปะรำ width: 500px; ความสูง: 50px; กำไร: อัตโนมัติ 25px; ล้น: ซ่อนอยู่; ตำแหน่ง: ญาติ; เส้นขอบ: 1px solid # 000; กำไร: อัตโนมัติ 25px; สีพื้นหลัง: # 222; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; -webkit-box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rpba (250, 250, 250, .2);
จากนั้นเราจะวางตำแหน่งข้อความ - ซึ่งในกรณีนี้ถูกห่อไว้ในแท็กวรรค - อย่างแน่นอนและตั้งแต่ แน่นอน ตำแหน่งจะทำให้องค์ประกอบล่มเราจะต้องกำหนดองค์ประกอบของความกว้าง 100% เพื่อให้ครอบคลุมความกว้างของผู้ปกครอง.
.ปะรำ p ตำแหน่ง: สัมบูรณ์; font-family: Tahoma, Arial, sans-serif; ความกว้าง: 100%; ความสูง: 100%; กำไรขั้นต้น: 0; line-height: 50px; จัดข้อความ: ศูนย์; สี: #fff; ข้อความเงา: 1px 1px 0px # 000000; ตัวกรอง: dropshadow (color = # 000000, offx = 1, offy = 1);
ลองมาดูผลลัพธ์กันสักครู่.
ณ จุดนี้เราได้ทำกับสไตล์พื้นฐานทั้งหมดที่เราต้องการ คุณมีอิสระที่จะเพิ่มสไตล์ให้มากขึ้น แต่เราขอแนะนำให้คุณยึดตามขนาดกระโจมที่ระบุไว้ (ความสูงและความกว้าง) จนถึงตอนท้ายของบทช่วยสอน.
อนิเมชั่น
ในระยะสั้นภาพเคลื่อนไหวเป็นการนำเสนอของวัตถุที่เคลื่อนไหว การเคลื่อนไหวแต่ละครั้งจะถูกกำหนดในกรอบเวลา ดังนั้นเมื่อเราทำงานเกี่ยวกับอนิเมชั่นเราส่วนใหญ่เกี่ยวข้องกับ เวลา. เราคำนึงถึงเรื่องต่างๆเช่น:
- วัตถุเริ่มเคลื่อนที่เมื่อใด?
- วัตถุใช้เวลาในการเคลื่อนย้ายจากจุดหนึ่งไปอีกจุดหนึ่งนานเท่าใด?
- วัตถุควรอยู่ที่จุดใดและนานเท่าไร?
ใน CSS3 Animation, เวลา สามารถกำหนดด้วย @keyframe วากยสัมพันธ์ แต่ก่อนที่จะกระโดดลงในส่วนนี้ก่อนอื่นให้ระบุตำแหน่งเริ่มต้นข้อความปะรำ.
เราได้วางแผนไว้ว่าข้อความจะเริ่มจากด้านขวาจากนั้นเลื่อนไปทางขวา ดังนั้นที่นี่เราจะวางตำแหน่งไปทางขวาก่อนโดยใช้คุณสมบัติการแปลง CSS3.
.marquee p แปรรูป: translateX (100%);
จำไว้ว่า 100% ที่เราได้กำหนดไว้สำหรับองค์ประกอบย่อหน้าของเราเท่ากับผู้ปกครองของมัน ความกว้าง. ดังนั้นจะนำไปใช้เช่นเดียวกันที่นี่; องค์ประกอบวรรคจะเป็น แปล ไปทางขวาสำหรับ 100% ซึ่งในตัวอย่างนี้เท่ากับ 500px.
คีย์เฟรม
@keyframe ซินแท็กซ์อาจเป็นเรื่องที่น่าแปลกใจสำหรับบางคนดังนั้นที่นี่เราได้จัดทำคู่มือภาพง่ายๆเพื่อช่วยให้คุณเข้าใจสิ่งที่เกิดขึ้นใน @keyframe วากยสัมพันธ์.
คลิกที่นี่เพื่อดูรุ่นที่ใหญ่กว่า.
ภาพเคลื่อนไหวทั้งหมดจะมีอายุประมาณ 20 วินาที และแบ่งออกเป็นสองลำดับที่ยั่งยืน 10 วินาที แต่ละ.
ในลำดับแรกข้อความแรกจะเลื่อนเข้ามาจากด้านขวาทันทีและยังคงปรากฏให้เห็นทันทีเพื่อให้ผู้ใช้อ่านข้อความในขณะที่ข้อความที่สองจะยังคงซ่อนอยู่ ในลำดับที่สองข้อความตัวอักษรวิ่งครั้งแรกจะเลื่อนออกไปทางซ้ายและข้อความที่สองจะเลื่อนเข้าจากด้านขวาทันที.
และนี่คือรหัสคีย์เฟรมทั้งหมดที่เราต้องใช้ในการเรียกใช้แอนิเมชัน.
@keyframes เหลือคนเดียว 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes เหลือสอง 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
ซ้ายหนึ่ง คีย์เฟรมจะกำหนดลำดับแรกของภาพเคลื่อนไหวขณะที่ ซ้ายสอง keyframes จะกำหนดลำดับที่สอง.
การใช้ภาพเคลื่อนไหวกับองค์ประกอบ
เพื่อให้แอนิเมชั่นใช้งานได้อย่าลืมที่จะนำแอนิเมชั่นไปใช้กับองค์ประกอบ ลำดับแรกจะถูกนำไปใช้กับข้อความแรกหรือในกรณีนี้วรรคหนึ่งและลำดับที่สองจะถูกนำไปใช้สำหรับวรรคสองเช่นกัน.
.marquee p: nth-child (1) ภาพเคลื่อนไหว: left-one 20s ช่วยให้ไม่มีที่สิ้นสุดได้อย่างง่ายดาย .marquee p: nth-child (2) แอนิเมชัน: ยุค 20 สองซ้ายทำให้ง่ายขึ้นไม่มีที่สิ้นสุด;
เราทำทุกอย่างด้วยอนิเมชั่นของเรา เรามาดูผลลัพธ์ในเบราว์เซอร์กัน.
- การสาธิต
- แหล่งดาวน์โหลด
โบนัส
นอกจากนี้เรายังสามารถกำหนดข้อความปะรำเพื่อย้ายจากบนลงล่างหรือในทางกลับกันเหมือนกับที่เราทำในโพสต์ก่อนหน้าของเรา นี่คือวิธีการทำ แทนที่รหัสภาพเคลื่อนไหวด้านบนด้วยรหัสนี้ด้านล่างเป็น เลื่อนข้อความลง:
.marquee p แปรรูป: แปล Y (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes สองอัน 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
สังเกตว่าเราได้เปลี่ยน แกน X ไปยัง แกน Y และพลิกทั้งหมด การแปล ค่าลบเป็นบวกและกลับกัน.
เรายังมี เปลี่ยนชื่อเป็น Animation ไปยัง ลงหนึ่ง และ ลงสอง, ดังนั้นเราจึงจำเป็นต้องใช้ชื่อแอนิเมชั่นในองค์ประกอบย่อหน้าอีกครั้ง.
.marquee p: nth-child (1) แอนิเมชัน: ยุค 20 ดาวน์ - ดาวน์ทำให้ง่ายขึ้นไม่มีที่สิ้นสุด .marquee p: nth-child (2) แอนิเมชัน: ยุค 20 ลงสองช่วงเวลาที่ไม่มีที่สิ้นสุด;
มิฉะนั้นถ้าคุณต้องการที่จะย้ายมันตรงกันข้าม; จากล่างขึ้นบน. นี่คือรหัสทั้งหมดที่คุณต้องใช้:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) ภาพเคลื่อนไหว: สูงสุด 20 วินาทีทำให้ไม่มีที่สิ้นสุดได้อย่างง่ายดาย .marquee.up p: nth-child (2) แอนิเมชัน: 20 วินาทีขึ้นไปไม่ จำกัด @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes สูงสุดสอง 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- การสาธิต
- แหล่งดาวน์โหลด
ข้อสรุป
แม้จะขาดการสนับสนุนเบราว์เซอร์ปัจจุบัน แต่หากทำอย่างถูกต้อง CSS3 Animation จะแก้ไขปัญหาการใช้งานหลายอย่างในอนาคตอย่างไม่ต้องสงสัยเช่นที่เราเคยทำในตัวอย่างนี้ หากเราต้องการเพียงภาพเคลื่อนไหวสั้น ๆ สำหรับเบราว์เซอร์รุ่นใหม่การใช้ CSS3 Animation น่าจะดีกว่าไม่ต้องโหลดสคริปต์ jQuery.
ท้ายที่สุดเราทราบดีว่าบทความนี้อาจจะค่อนข้างล้นหลามสำหรับบางคนดังนั้นหากคุณมีคำถามเกี่ยวกับบทความนี้คุณสามารถโพสต์ได้ในส่วนความเห็นด้านล่าง.
