วิธีการใช้ประโยชน์จากภาพเคลื่อนไหว 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 บริสุทธิ์

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

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

ทำโดย 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 ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ

เชื่อมต่อ: