วิธีการใช้ประโยชน์จากภาพเคลื่อนไหว CSS3: บทแนะนำโค้ดตัวอย่างและตัวอย่าง

บทความที่เขียนโดย:
  • การออกแบบเว็บไซต์
  • อัปเดต: ส.ค. 28, 2013

เมื่อเราใช้ JS และ jQuery เราสามารถควบคุมภาพเคลื่อนไหวได้เต็มที่และเราสามารถสร้างเอฟเฟ็กต์ที่ยอดเยี่ยม แต่ราคาค่อนข้างสูง เวลาในการประมวลผลความเข้ากันได้ข้ามเบราว์เซอร์ (อุปกรณ์เคลื่อนที่เช่นมีความแตกต่างกันมากเมื่อพูดถึง JS) และความซับซ้อนของโค้ดเป็นจุดที่เราควรคำนึงถึงในขณะที่สร้างอินเทอร์เฟซแบบเคลื่อนไหว

ดังนั้นวันนี้เราจะมาดูวิธีหลีกเลี่ยง JS โดยใช้ CSS Animations and Transitions เราจะพูดถึงจากขั้นตอนพื้นฐานเพื่อให้ได้ผลที่น่าประทับใจเช่นการติดตั้งหีบเพลงและเมนูย่อยแบบภาพเคลื่อนไหว

หยิบที่นั่งคุณ Notepad และเบราว์เซอร์จริง (ทุกอย่างยกเว้น IE) และเริ่มต้นใช้งาน

อุ่นเครื่อง

เรามีข้อดี (และข้อเสียเหมือนทุกอย่างในชีวิตของเรา) ในการใช้ภาพเคลื่อนไหว CSS หากคุณจำเป็นต้องขายให้กับเจ้านายหรือลูกค้าของคุณนี่คือสิ่งที่คุณควรคำนึงถึง:

  • เนื่องจากสามารถใช้การเร่งความเร็วด้วยฮาร์ดแวร์ (เช่นการใช้ HTML5)
  • พวกเขาจะทำงานได้ดีขึ้นในโทรศัพท์มือถือและไม่จำเป็นต้องมีรหัสเฉพาะเพื่อติดตามกิจกรรมสัมผัส
  • JS จำเป็นต้องตีความโดยเบราว์เซอร์และความเป็นไปได้ที่จะทำให้เบราว์เซอร์เบราว์เซอร์ใหญ่ขึ้น ดังนั้นเมื่อ CSS ล้มเหลวจะไม่เงียบในขณะที่ JS สามารถแบ่งทั้งหน้า
  • พวกเขามีการสนับสนุนเบราเซอร์ที่ดี (ไซต์นี้จะช่วยให้คุณสามารถตรวจสอบสถิติเฉพาะที่: http://caniuse.com/#search )

ตัวอย่างของภาพเคลื่อนไหว CSS3

ก่อนที่เราจะเริ่มเนื้อของโพสต์นี้เรามาดูภาพเคลื่อนไหวที่สวยงามที่สร้างขึ้นด้วย CSS บริสุทธิ์

Pure CSS Twitter Fail Whale

วาฬที่มีการเคลื่อนไหวล้มเหลว

ทำโดยสตีเวนเดนนิส, ดูการดำเนินการนี้

โครเมี่ยมเลื่อน CSS บริสุทธิ์
CSS 3 ตัวอย่างภาพเคลื่อนไหว: สามารถเลื่อน Coke ได้

ผลิตโดย Roman Cortes, ดูการดำเนินการนี้

คนเดิน CSS บริสุทธิ์

ตัวอย่างภาพเคลื่อนไหว CSS 3: คนเดิน

ทำโดย Andrew Hoyer, ดูการดำเนินการนี้

ทำให้มือของคุณสกปรก

ขอเริ่มต้นโค้ด เราจะใช้ CSS pseudo classes จำนวนมากเพื่อเรียกใช้ภาพเคลื่อนไหว ความซื่อสัตย์นักพัฒนาซอฟต์แวร์จำนวนมากแนะนำให้คุณใช้ JS เพื่อเปิดใช้งานและยกเลิกการใช้งานภาพเคลื่อนไหว แต่ที่นี่เราจะเห็นวิธีที่ง่ายขึ้น:

#test {background: red; } #test: โฮเวอร์ {พื้นหลัง: สีเขียว; } #test: active {background: blue; } #test: target {background: black; }

เรามีอีกสองสามหลอกชั้นอื่น ๆ ที่จะใช้ แต่คุณมีความคิด! นี่คือสิ่งที่เกิดขึ้นหากคุณคลิกที่องค์ประกอบ #test (สมมติว่าเป็นลิงก์):

  • สถานะปกติ: พื้นหลังจะเป็นสีแดง
  • เลื่อนเมาส์: เมื่อเมาส์เข้าสู่พื้นที่องค์ประกอบจะมีพื้นหลังเป็นสีเขียว
  • ใช้งาน: เมื่อคุณคลิกเคอร์เซอร์บนและในขณะที่ปุ่มเมาส์ยังคงถูกกดไว้สีพื้นหลังจะเป็นสีน้ำเงิน
  • เป้าหมาย: เมื่อหน้าปัจจุบันมี #test ใน URL องค์ประกอบนี้จะเป็นสีดำ

หนึ่งในเหล่านี้สามารถใช้สำหรับภาพเคลื่อนไหว CSS เช่นคุณสามารถสร้างการเชื่อมโยง 2 เพื่อเปิดใช้งานและปิดการใช้งานภาพเคลื่อนไหว CSS การใช้องค์ประกอบ pseudo เป้าหมายกับรหัสนี้:

<a href='#test'> เปิดใช้งาน </a> <a href='#'> ปิดการใช้งาน </a>

CSS Transitions

การเปลี่ยน CSS จะเปลี่ยนจากเริ่มต้นไปที่สถานะสิ้นสุดได้อย่างราบรื่น ดังนั้นคุณจะกำหนดในตัวเลือกหลักโดยใช้คุณสมบัติ "transition" เวลาและแต่ละคุณสมบัติที่จะได้รับผลกระทบและควรจะเป็นภาพเคลื่อนไหวอย่างไร ลองดูตัวอย่าง:

.test {/ * ช่วงเวลาการเปลี่ยนคุณสมบัติระยะเวลา, * / สี: สีน้ำเงิน; การเปลี่ยนภาพ: สี 2s, ขนาดตัวอักษร 2 ใช้งานง่าย; } .test: โฮเวอร์ {color: red; } .test: active {font-size: 200%; }

เมื่อคุณวางองค์ประกอบ. test จะเปลี่ยนสีจากสีฟ้าเป็นสีแดงเป็นสีแดง (เป็นสีอะไรดีไหม?) เมื่อคุณคลิกองค์ประกอบขนาดตัวอักษรจะค่อยๆเพิ่มขึ้นเป็น 200% ของขนาดแบบอักษรเริ่มต้น

นอกจากนี้เรายังมีคุณสมบัติ "เปลี่ยนช่วงเวลา" ให้ตั้งค่าว่าง่ายที่จะใช้เวลา "เวลา" ที่ใช้ได้สำหรับภาพเคลื่อนไหว นี่คือค่าที่เป็นไปได้:

  • เชิงเส้น: มีความเร็วเท่าเดิมตั้งแต่ต้นจนจบ
  • ความสะดวกสบาย: เริ่มต้นช้า
  • ผ่อนคลาย: ช้าลง
  • ความง่ายดาย: เริ่มต้นช้าและเร็วกลางคัน
  • ความง่ายในการออก: เริ่มช้าและปลายช้า
  • Cubic-bezier (a, b, c, d): ความเร็วที่กำหนดเอง

ฟังก์ชัน Bezier แบบลูกบาศก์จะสร้างภาพเคลื่อนไหวที่กำหนดเองโดยมีตัวเลข 4 ซึ่งแตกต่างกันไปจาก 0 ถึง 1 ซึ่งเป็นเส้นโค้งทางคณิตศาสตร์สำหรับระยะเวลาภาพเคลื่อนไหวความเร็ว X

เพื่อความเข้ากันได้ของเบราเซอร์ที่ดีขึ้นคุณควรพิจารณาใช้คำนำหน้าผู้จำหน่ายสำหรับโอเปร่า, Firefox และ webkit เช่นนี้

div {width: 400px; -o-transition: ความกว้าง 2s -moz-transition: ความกว้าง 2s; -webkit-transition: ความกว้าง 2s; การเปลี่ยนแปลง: ความกว้าง 2s; }

นอกจากนี้คุณสามารถใช้ข้อความค้นหาสื่อเพื่อกำหนดช่วงการเปลี่ยนที่แตกต่างกันขึ้นอยู่กับความกว้างของเบราว์เซอร์ (โทรศัพท์มือถือแท็บเล็ต) นี่เป็นตัวอย่างง่ายๆ:

body {font-size: 1em; } หน้าจอ @ สื่อและ (ความกว้างสูงสุด: 800px) {เนื้อหา {ขนาดตัวอักษร: 0.8em; }} @media หน้าจอและ (ความกว้างสูงสุด: 400px) {body {ขนาดตัวอักษร: 0.7em; }}

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

เนื้อหา {-o-transition: ฟอนต์ขนาด. 5 เชิงเส้น -moz-transition: font-size .5 เชิงเส้น -webkit-transition: ฟอนต์ขนาด .5 เชิงเส้น การเปลี่ยน: แบบอักษรขนาด. 5 เชิงเส้น }

คุณสามารถใช้ตัวเลือกนี้ได้หากคุณมีจอแสดงผลหรือขนาดต่างๆสำหรับแนวตั้ง / แนวนอนหากต้องการเปลี่ยนความกว้างสีรองพื้นการแสดงเมนู

CSS Animation - สนุกจริงเริ่มต้น

ภาพเคลื่อนไหวคือลำดับของการเปลี่ยนที่กำหนดไว้ในตัวเลือกเดียว ในการกำหนดภาพเคลื่อนไหว CSS คุณต้องทำตามขั้นตอน 2

กฎ @keyframe ใช้เพื่อกำหนดลำดับของขั้นตอนภาพเคลื่อนไหวและกำหนดโดยใช้ชื่อที่ไม่ซ้ำและรูปแบบที่อธิบายว่าการเคลื่อนไหวนี้ทำงานอย่างไร ตามปกติเราจะต้องมีคำนำหน้าผู้ขายบางรายเช่นในตัวอย่างนี้:

/ * รหัสเดียวกันสำหรับผู้ขายแต่ละราย * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * ชื่อแอนิเมชั่น * / @keyframe my-animation {/ * ตัวเลือกเฟรม * / 0% {/ * สไตล์เฟรม * / ซ้าย: 0px; ด้านบน: 0px; } 25% {ซ้าย: 200px; ด้านบน: 0px; } 50% {ซ้าย: 200px; ด้านบน: 200px; } 75% {ซ้าย: 0px; ด้านบน: 200px; } 100% {ซ้าย: 0px; ด้านบน: 0px; }}

ดังนั้นแต่ละรูปแบบจะถูกกำหนดโดยเฟรม / กรอบเวลา (เช่นเฟรมจากภาพเคลื่อนไหว Flash) เป็นเปอร์เซ็นต์และรูปแบบที่ควรใช้ที่นั่น คีย์เฟรมนี้กล่าวว่าองค์ประกอบดังกล่าวจะเลื่อนไปทางซ้ายแล้วไปที่ด้านบนจากนั้นไปทางขวาจากนั้นให้ด้านล่าง

หลังจากที่คุณทำตามขั้นตอน 1 และสร้างคีย์เฟรมแล้วคุณสามารถนำไปใช้กับองค์ประกอบได้ จากนั้นเราจะใช้ตรรกะเดียวกับที่เราทำกับการเปลี่ยน CSS ซึ่งแตกต่างกันคือตอนนี้ "transition" ของเราเป็นภาพเคลื่อนไหวที่ซับซ้อนมาก

หากต้องการใช้งานเราจะใช้พร็อพเพอร์ตี้ภาพเคลื่อนไหวและมีพร็อพเพอร์ตี้ย่อย 7:

  • ชื่อ: ตัวระบุที่ไม่ซ้ำกัน
  • ระยะเวลา: ใช้เวลานานเท่าไรจาก 0% ถึง 100%
  • Timing-function: สวยมากเหมือนกับฟังก์ชั่น timing timing
  • ความล่าช้า: จะใช้เวลานานเท่าใดในการเริ่ม 0%
  • Iteration-count: เราจะทำซ้ำกี่ครั้ง ("infinite" สำหรับ loop แบบ จำกัด )
  • ทิศทาง: ปกติหรือสลับ (ย้อนกลับ)
  • สถานะการเล่น: หากภาพเคลื่อนไหวกำลังทำงานหรือหยุดชั่วคราว

ซึ่งจะนำภาพเคลื่อนไหวของเราไปใช้กับ #test element เมื่อเป็นเป้าหมายของหน้า:

#test: target {/ * animation-name | ระยะเวลา | ฟังก์ชั่นจับเวลา | ดีเลย์ | นับซ้ำ | ทิศทาง | play-state * / animation: my-animation 10s 0 เชิงเส้นของ XNUMX ทำงานแบบไม่มีที่สิ้นสุด }

ด้วยเหตุนี้เราจึงสามารถสร้างตัวอย่างน่ากลัวได้

CSS Only Accordion

เราจะสร้างแผงที่ยุบได้โดยใช้ภาพเคลื่อนไหว CSS นี่คือโครงสร้างพื้นฐาน HTML:

<div class = "หีบเพลง"> <a href="#tab1"> แท็บ 1 </a> <div id = "tab1"> <p> TEXT 1 </p> </div> <a href = "# tab2 "> แท็บ 2 </a> <div id =" tab2 "> <p> TEXT 2 </p> </div> <a href="#tab3"> แท็บ 3 </a> <div id =" tab3 "> <p> TEXT 3 </p> </div> </div>

นี้จะสร้างแผงและลิงค์ที่จะเรียกหนึ่งของพวกเขา และนี่คือที่มายากลเกิดขึ้น:

/ * div ใด ๆ ที่อยู่ภายในหีบเพลง * / .accordion div {/ * ถูกซ่อนโดยปริยาย * / height: 0; ล้น: ซ่อนอยู่; / * the black magic * / transition: height 1s; } / * เมื่อ div ที่กล่าวถึงคือ div * / .accordion: target {/ * height: auto จะไม่ทำงาน แต่จะทำงานได้ดี * / height: 80px; }

ง่ายสวยเหรอ? และคุณใช้เวลาทั้งชีวิตโดยใช้ JS สำหรับเรื่องนี้ :)

เมนู CSS เฉพาะที่มีเมนูย่อย

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

<nav> <ul> <li> <a href='#item1'> รายการ 1 </a> <div> <ul> <ul> <li> <a href='#item11'> รายการ 1.1 </a> </ li> <li> <a href='#item12'> รายการ 1.2 </a> </li> </ul></div> </li> <li> <a href='#item2'> รายการ 2 </a> <div> <ul> <li> <a href='#item21'> รายการ 2.1 </a> </li> <li> <a href='#item22'> รายการ 2.2 </a> </li> </ul></div> </li> </ul> </nav>

และการเล่นกลเริ่มต้นที่นี่:

{/ * เพียงทำให้การเชื่อมโยงดีกว่า * / display: block; การขยาย: 4px; } nav {text-align: center; } / * เมนูใด ๆ (รวมถึงเมนูหลัก) * / nav ul {display: inline-block; รายการสไตล์: ไม่มี; } nav> ul> li {/ * รายการแนวนอน (แนวตั้งจะทำงานได้ดีเช่นกัน) * / float: left; } nav li div {/ * การยุบเมนูย่อย * / height: 0; ล้น: ซ่อนอยู่; / * ความรู้สึกของฮูดินี่ * / การเปลี่ยนแปลง: ความสูง 1s; } nav li: โฮเวอร์> div {height: 56px; }

ข้อสรุปขึ้น

นี่เป็นเพียงคู่มือเริ่มต้นใช้งานเท่านั้น มีผลกระทบอื่น ๆ อีกมากมายที่สามารถทำได้โดยใช้ภาพเคลื่อนไหว CSS เพียงอย่างเดียวและยังมีอีกหลายอย่างที่จะมาถึง

ดังนั้นคุณเคยใช้มาก่อนหรือไม่? คุณนึกถึงแอพพลิเคชันอื่นที่ดีสำหรับภาพเคลื่อนไหว CSS หรือไม่? แบ่งปันความคิดของคุณโดยใช้ความคิดเห็น!

เกี่ยวกับ Rochester Oliveira

ฉันเป็นนักออกแบบเว็บไซต์และผู้ประกอบการจากItajubá (MG), Brasil ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ