เพิ่มพลังให้กับเมนูของคุณโดยใช้ภาพเคลื่อนไหวด้วย CSS

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

อย่างไรก็ตามบนเว็บอย่างไรก็ตามเราได้คุ้นเคยกับสิ่งต่าง ๆ ที่ปรากฏและหายไปในพริบตา เราคลิกที่ลิงค์และการเปลี่ยนแปลงทุกอย่าง มันเหมือนกับการถูกนำไปสู่ห้องปิดตาหมุนรอบสองสามครั้งแล้วถอดผ้าปิดตาเพื่อเข้าสู่สภาพแวดล้อม คุณไม่รู้ด้วยซ้ำว่าคุณเข้าประตูไหน นี่คือและใหญ่ว่าเว็บไซต์ส่วนใหญ่สร้างขึ้นได้อย่างไร เราทำได้ดีกว่า

เมื่อเรียนรู้เกี่ยวกับศักยภาพของ ภาพเคลื่อนไหว CSS , มันเป็นเรื่องง่ายที่จะปล่อยให้จินตนาการของเราเข้าไปในไฮเปอร์ไดรฟ์และโรยแอนิเมชั่นเกี่ยวกับทุกสิ่ง ในขณะที่อนิเมชั่นนั้นยอดเยี่ยมเราต้องระวังและถามตัวเองเสมอ: อนิเมชั่นนี้มีความหมายหรือไม่? เพิ่มค่าใด ๆ นอกเหนือจากความสวยงามหรือไม่? การทำให้ผลิตภัณฑ์ของเราใช้งานง่ายขึ้นหรือไม่?

แอนิเมชันที่มีความหมาย

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

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

แทนที่จะเป็นเพียงแค่แฟลชเป็นไอคอนปิดเราจะเคลื่อนไหวและ morph เส้นแนวตั้งสามบรรทัด (ซึ่งประกอบกันเป็นไอคอนเมนู) เป็น 'x' เพื่อแสดงไอคอนปิด กล่าวอีกนัยหนึ่งเนื่องจากเมนูถูกเปิดเผยไอคอน morphs เป็นปุ่มปิด

องค์ประกอบที่เกี่ยวข้อง

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

ในขณะที่เราปรับขนาดแผ่นพื้นหลังของเมนูให้กลายเป็นเมนูเราแสดงให้เห็นว่าทั้งสองเชื่อมต่อกัน - คล้ายกับวิธีไอคอนแอปเมื่อกดบน iOS หรือ Android, เครื่องชั่งและใช้เวลาผ่านหน้าจอแสดงให้เห็นว่าแอปเปิดตัว ไอคอนมาก ไอคอนเมนูของเราไม่เพียงแค่สลับเมนู: มันเป็นเมนูที่ยุบเท่านั้น

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

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

ดูวิธีการทำเช่นนี้ในบทช่วยสอนวิดีโอด้านบนและขั้นตอนการเขียนด้านล่าง

01. เริ่มต้นใช้งาน

ดาวน์โหลดไฟล์โครงการ . เปิดออก index.html ในเบราว์เซอร์และคุณควรเห็นสามลิงค์ใหญ่กับพื้นหลังสีขาว นี่คือการซ้อนทับเมนูที่เราจะเปิดเผย

ก่อนอื่นเราต้องซ่อนมัน ใน สไตล์. css เพิ่มสไตล์เหล่านี้เพื่อ .mu-overlay :

 ความทึบแสง: 0;
ทัศนวิสัย: ซ่อนเร้น; 

ด้วยการซ้อนทับหายไปปุ่มควรปรากฏที่มุมซ้ายบน ลองวาดไอคอนเมนูของเราที่นี่ดังนั้นจึงมีบางอย่างที่คลิกเพื่อแสดงการซ้อนทับ เพื่อทำให้ง่ายต่อการเคลื่อนไหวเราจะวาดมันโดยใช้ HTML และ CSS; ไม่มีบิตแมปหรือเวกเตอร์ เราได้รับ html แล้ว index.html สำหรับเมนู: ภาชนะ ( .เมนู ) พื้นหลัง ( .mu-circle ) ลิงค์ ( .mu-link ) และไอคอน ( . menu-icon ) กับช่วงหนึ่งสำหรับแต่ละบรรทัด

มีแยก Div สำหรับพื้นหลังเป็นวิธีการที่ค่อนข้างแปลกใหม่ หากเราไม่ได้เพิ่มภาพเคลื่อนไหวในวงนี้เราจะไม่ต้องการแยกต่างหาก Div ; เราสามารถเพิ่ม ชายแดนรัศมี และสีพื้นหลังให้กับเรา ลิงค์เมนู .

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

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

 .menu-line {
 พื้นหลัง - สี: # 333;
 ความสูง: 2px;
 ความกว้าง: 100%;
 เส้นขอบรัศมี: 2px;
 ตำแหน่ง: แน่นอน;
 ซ้าย: 0;
} 

จากนั้นเราสามารถใช้คลาสที่เป็นเอกลักษณ์ของเส้นเพื่อตั้งตำแหน่งแนวตั้ง:

 .menu-line-1 {ยอดนิยม: 0; }

.menu-line-2 {
 ด้านบน: 0;
 ด้านล่าง: 0;
 มาร์จิ้น: อัตโนมัติ;
}

.menu-line-3 {ล่าง: 0; } 

02. เพิ่มเอฟเฟกต์โฉบ

ลองทำให้ไอคอนสามารถคลิกได้อย่างชัดเจนโดยการเพิ่มเอฟเฟกต์โฉบ ใน สไตล์. css สร้างตัวเลือกใหม่สำหรับ เมนูวงกลม ในการปรับขนาดเมื่อคุณวางเมาส์เหนือเมนู:

 .menu: โฮเวอร์. menu-circle {transform: scale (1.4); } 

ตอนนี้เราสามารถเพิ่มภาพเคลื่อนไหวแรกของเรา เพิ่ม "การเปลี่ยนแปลง: ทั้งหมด 0.2 วินาทีเข้าออก" ถึง .menu-circle {} (ไม่ใช่ของรัฐที่โฉบ) เรากำลังบอกเบราว์เซอร์เพื่อสร้างภาพเคลื่อนไหวคุณสมบัติทั้งหมดที่อาจเปลี่ยนไป .mu-circle . ดังนั้นเมื่อเราปรับขนาดบนโฮเวอร์มันจะเคลื่อนไหวในระยะเวลา 0.2 วินาทีในสถานะใหม่ด้วยฟังก์ชั่นเวลาของ ง่ายๆ .

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

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

03. แสดงและซ่อนเมนู

ลองใช้ jquery เพื่อแสดงและซ่อนการซ้อนทับที่สร้างขึ้นใหม่ของเรา ใน script.js สลับชั้นเรียนของ เปิด บน .mu-overlay ภายในตัวจัดการคลิกที่มีอยู่:

  $ ("เมนู - ซ้อนทับ") tognleclass ("เปิด"); 

จากนั้นแสดงการซ้อนทับเมื่อมีคลาสเปิด:

 .menu-overlay.open {
 ความทึบแสง: 1;
 ทัศนวิสัย: มองเห็นได้;
} 

04. เชื่อมต่อไอคอนเมนู

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

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

เราจำเป็นต้องมีสไตล์วงกลมของเมนูเมื่อมีการคลิกเมนู เปิดออก script.js และภายในฟังก์ชั่นการคลิกที่มีอยู่ของเราสลับคลาสเปิดสำหรับเรา .เมนู :

  $ ("เมนู") tognleclass ("เปิด"); 

ตอนนี้เราสามารถกำหนดเป้าหมายคลาสนี้ด้วย CSS และขยายวงกลมเป็นเมนูเปิด ที่ด้านล่างสุดของ style.css ขยาย .mu-circle เมื่อไหร่ .เมนู ยังมีชั้นเรียนของ .เปิด :

 .menu.open. menu-circle {transform: scale (60);
} 

05. แปลงไอคอน

เรามีผลการเปิดเผยที่สวยงามสำหรับเมนูของเรา แต่เราจะเปิดไอคอนเมนูเป็นไอคอนปิดได้อย่างไร มันง่ายอย่างน่าประหลาดใจเมื่อคุณรู้วิธีการ - เราจะต้องตั้งค่าคุณสมบัติ CSS สามตัวเท่านั้น ก่อนอื่นเราต้องซ่อนแถวกลางในขณะที่เมนูกำลังแสดง:

 .menu.open .menu-line-2 {ความทึบ: 0; } 

จากนั้นสิ่งที่เราต้องทำคือพลิกอีกสองบรรทัด 45 องศาในทิศทางตรงกันข้าม (เส้นต้องชี้ไปในทิศทางที่แตกต่างกันเพื่อสร้าง 'x' ดังนั้นโน้ตหนึ่งในบรรทัดที่มีการหมุนเชิงลบของ 45 องศา):

 .menu.open .menu-line-1 {
 แปลง: หมุน (-45deg);
}

.menu.open .menu-line-3 {
 แปลง: หมุน (45deg);
} 

เรียงลำดับของ นอกจากนี้เรายังต้องศูนย์ทั้งสองเส้นเหล่านี้ในแนวตั้ง ณ จุดนี้คุณอาจคิดได้ง่าย! เราแค่ต้องเปลี่ยน ด้านบน และ ด้านล่าง ตำแหน่งที่จะกึ่งกลางพวกเขา ' และคุณจะถูกต้อง - ถ้าเราไม่เคลื่อนไหวไอคอนนี้

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

 .menu.open .menu-line-1 {
 แปลง: Translatey (7px) Rotate (-45%) หมุน (-45deg);
}

.menu.open .menu-line-3 {
 แปลง: Translatey (-7px) Rotate (50%) หมุน (45deg);
} 

การแปลงเหล่านี้จะย้ายทั้งสองบรรทัดเพื่อให้เป็นศูนย์กลางในแนวตั้งภายในคอนเทนเนอร์ไอคอนแล้วหมุนเพื่อสร้างไม้กางเขน

มาทำลายมันกันเถอะ เรามีการแปลสองรายการพร้อมกัน: Translatey (7px) และ Translatey (-50%) . การแปลงครั้งแรก Translatey (7px) ใช้เพื่อย้ายขอบด้านบนของบรรทัดไปยังศูนย์กลางแนวตั้งของผืนผ้าใบ คณิตศาสตร์ที่นี่ง่าย: 14 คือความสูงของไอคอนของเราโดยการหารด้วยสองเราได้รับจุดกลาง: 7.

การแปลงครั้งที่สอง Translatey (-50%) ใช้เพื่อย้ายสายเพื่อให้ศูนย์แนวตั้งของบรรทัดไม่ใช่ขอบด้านบนอยู่บนจุดกึ่งกลางแนวตั้งของผืนผ้าใบ

มักจะใช้เมื่อใช้ % ลงชื่อเข้าใช้ CSS ที่คุณอ้างถึงผู้ปกครองขององค์ประกอบ (การตั้งค่า ความกว้าง: 100% ตรงกับความกว้างขององค์ประกอบเป็นของผู้ปกครอง) แต่ถ้าคุณใช้เปอร์เซ็นต์กับคุณสมบัติการแปลงที่คุณอ้างถึงองค์ประกอบเองไม่ใช่พาเรนต์ ดังนั้นสำหรับเราที่จะพบความสูงของเส้นและเลื่อนขึ้นไปครึ่งหนึ่งของสิ่งที่เราต้องการคือ Translatey (-50%) .

06. Morph ระหว่างไอคอน

แทนที่จะแทนที่จะเปลี่ยนไอคอนเมนูด้วยไอคอนปิดให้ morph ระหว่างสองสถานะ

เริ่มต้นด้วยการเพิ่มการเปลี่ยนไปเป็น .MENU-LINE ใน style.css :

 การเปลี่ยนแปลง: ทั้งหมด 0.25 วินาทีเข้าออก; 

ตา - ดา ไอคอนเมนู morphing ภาพเคลื่อนไหวค่อนข้างน่าเบื่อ ลองแก้ไขว่า เพื่อให้เส้นดูสดใสยิ่งขึ้นเราสามารถหมุนได้ทั้งเพิ่มอีก 90 องศา ไอคอนจะมีลักษณะเหมือนกันในท้ายที่สุด แต่เส้นจะเดินทางต่อไปในช่วงเวลาเดียวกัน เปลี่ยนการหมุนไปที่ หมุน (-135deg) และ หมุน (135deg) .

ตามกฎของนิ้วหัวแม่มือคุณสามารถปรับปรุงภาพเคลื่อนไหวได้เสมอโดยใช้เส้นโค้งBézierที่กำหนดเองที่ปรับให้เข้ากับแอนิเมชั่นของคุณได้ดีขึ้น ขณะนี้เรากำลังใช้ ง่ายๆ - ซึ่งหมายความว่าภาพเคลื่อนไหวจะเริ่มช้าและสิ้นสุดด้วยการก้าวที่เร็วขึ้นในกลาง

ฉันคิดว่าเอฟเฟกต์ที่เหมือนสปริงมากขึ้นมีความเหมาะสมสำหรับไอคอนของเรา มาทำให้มันหมุนเร็วด้วยเอฟเฟกต์เด้งขนาดเล็กตามที่มาถึงจุดสิ้นสุด สำหรับ .MENU-LINE แทนที่ " ease-out " ด้วย curve bézierที่กำหนดเอง:

 การเปลี่ยนแปลง: ทั้งหมด 0.25 วินาที cubic-bezier (0.175, 0.885, 0.32, 1.275); 

ตัวเลขเหล่านี้คืออะไร? ไม่ต้องกังวล: Bézier Curves ไม่ค่อยเขียนด้วยมือ คุณใช้ Cubic-Bezier () เพื่อกำหนดจังหวะของภาพเคลื่อนไหวเมื่อเวลาผ่านไปและแทนที่จะเขียนด้วยตัวคุณเองฉันขอแนะนำให้ใช้เมนูอ้างอิง สิ่งนี้มาจาก easings.net มันเกินขีด จำกัด ในตอนท้ายของภาพเคลื่อนไหวและสร้างเอฟเฟกต์การตีกลับที่ละเอียดอ่อน

ในขณะที่เราอยู่ที่นั่นไปที่ easings.net และคว้ารหัสสำหรับ Easeoutexpo . เราจะใช้สิ่งนี้เพื่อสร้างเอฟเฟกต์ที่กลั่นกรองเพิ่มเติมสำหรับภาพเคลื่อนไหวพื้นหลังของเมนู อัปเดตการเปลี่ยนแปลงของ .mu-circle ในการใช้ Custom Bézier Curve นี้และทำให้ภาพเคลื่อนไหวอีกหน่อย (0.5s):

 การเปลี่ยนแปลง: ทั้งหมด 0.5 วินาที cubic-bezier (0.19, 1, 0.22, 1); 

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

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

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 281 สมัครสมาชิก NET ที่นี่ .

บทความที่เกี่ยวข้อง:

• 10 ตัวอย่างที่น่าประทับใจของภาพเคลื่อนไหว CSS3
• 28 ตัวอย่างที่โดดเด่นของ CSS
• เริ่มต้นกับการเข้าถึงเว็บ