เทคนิค CSS สำหรับเอฟเฟกต์ของวัสดุ

คำแนะนำเกี่ยวกับเทคนิคต่าง ๆ สำหรับเอฟเฟกต์ระลอกคลื่นโดยใช้ CSS และ JavaScript

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

ระลอกคลื่นนี้มีผลอย่างไร?

รอคุณไม่ทราบว่ามีผลกระทบระลอกคลื่นจากการออกแบบวัสดุของ Google หรือไม่ คุณเคยอยู่บนถ้ำมานานกี่ปีแล้วหรือยัง?

ระลอกเอฟเฟกต์จะใช้เมื่อคุณกดปุ่ม มันทำงานในลักษณะเดียวกันกับการใช้เมาส์หรือการโต้ตอบแบบสัมผัส

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

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

ระลอกคลื่นที่คุณจะพบบนเว็บ

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

ใช้ :: หลังจากองค์ประกอบหลอก

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

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

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

ใช้องค์ประกอบลูก

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

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

ฉันพบรูปแบบอื่นของสิ่งนี้ซึ่งองค์ประกอบย่อยเป็น svg แทนที่จะเป็นช่วงและ svg นั้นเคลื่อนไหวผ่าน JavaScript การเปลี่ยนแปลงนี้อธิบายโดย Dennis Gaebel แต่โดยพื้นฐานแล้วดูเหมือนว่าจะเหมือนกันและอาจอนุญาตให้ใช้รูปร่างและเอฟเฟกต์ SVG ที่ซับซ้อน

ปัญหาเกี่ยวกับการส่งอินพุต

เทคนิคทั้งสองที่อธิบายไว้ข้างต้นดูดีมาก แต่นี่คือสิ่งที่เกิดขึ้นเมื่อฉันพยายามที่จะนำไปใช้กับองค์ประกอบการป้อนข้อมูลด้วย type = submit:

ทำไมพวกเขาถึงไม่ทำงาน

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

ดังนั้นหากคุณใช้การออกแบบวัสดุคุณควรหลีกเลี่ยงการป้อนข้อมูล [type = submit] และติดองค์ประกอบของปุ่ม หรือเพียงแค่อ่านต่อไป

การเพิ่มระลอกในการส่งอินพุต

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

ใช้ภาชนะห่อ

ฉันรู้ได้อย่างรวดเร็วว่าฉันสามารถห่อปุ่มส่งภายในองค์ประกอบอินไลน์บล็อกและใช้องค์ประกอบอินไลน์บล็อกเป็นพื้นผิวระลอก นี่คือตัวอย่างรวดเร็ว:

ในขณะที่ฉันชอบวิธีนี้สำหรับความเรียบง่าย แต่ฉันก็ยังต้องการเปลี่ยนมาร์กอัปในหลาย ๆ ที่ และฉันรู้ว่ามันจะเป็นทางออกที่เปราะบาง - นักพัฒนาใหม่จะเข้ามาในโครงการและสร้างปุ่มส่งโดยไม่ต้องห่อไว้ในพื้นผิวระลอก ดังนั้นฉันจึงค้นหาโซลูชันอื่น ๆ ที่ไม่ต้องการเปลี่ยน DOM

การไล่ระดับสีแบบเรเดียล

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

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

ฉันลองอีกสองสามอย่างเช่นมีวงกลมเฟดเดอร์เป็นภาพเคลื่อนไหว (ใช้รูปแบบ apng) และนำไปใช้เป็นภาพพื้นหลัง แต่ฉันไม่สามารถควบคุมได้เมื่อลูปอิมเมจเริ่มต้นและสิ้นสุด

ในที่สุดการแก้ปัญหาด้วย JavaScript

สิ่งที่คุณไม่สามารถทำได้ใน CSS คุณสามารถทำได้ใน JavaScript หลังจากใช้เวลามากกว่าที่ฉันยินดีที่จะยอมรับการพยายามทำให้เอฟเฟกต์นี้ทำงานโดยใช้ภาพเคลื่อนไหว CSS ฉันเพิ่งยอมแพ้และตัดสินใจที่จะเขียนภาพเคลื่อนไหวใน JavaScript

ฉันเริ่มต้นด้วยการแก้ปัญหาการไล่ระดับสีเรเดียลข้างต้นและใช้ window.requestAnimationFrame เพื่อสร้างภาพเคลื่อนไหวของเหลวของการไล่ระดับสีแบบรัศมีการเติบโตและการซีดจาง นี่คือทางออกสุดท้ายของฉัน:

ข้อสรุป

ดังนั้นจึงมีความเป็นไปได้ที่จะมีเอฟเฟ็กต์ระลอกคลื่นบนปุ่มส่งเพียงไม่ใช้ CSS เพียงอย่างเดียว

ฉันหาเทคนิคนี้ไม่พบที่ใดก็ได้ในเว็บดังนั้นฉันจึงเรียกมันว่าเป็นของตัวเอง เทคนิคการกระเพื่อมของ Leonardo ไม่ต้องการการเปลี่ยนแปลงใน DOM และใช้ได้กับทุกองค์ประกอบเพราะมันไม่ได้พึ่งพาองค์ประกอบหลอกหรือองค์ประกอบย่อย อย่างไรก็ตามนี่ไม่ใช่วิธีแก้ไขที่ไร้ที่ติ

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

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

ประการที่สามดูเหมือนว่าจะไม่ทำงานใน Internet Explorer อย่างไรก็ตามฉันไม่เห็นเหตุผลใด ๆ ที่จะไม่สามารถทำงานกับ IE10 ขึ้นไป อาจเป็นเพราะ IE ใช้ไวยากรณ์ที่แตกต่างกันสำหรับการไล่ระดับสี แต่ใครจะสนใจเกี่ยวกับ IE ทุกวันนี้ (แก้ไข: วิธีนี้ใช้ได้โดยไม่มีปัญหาใด ๆ ใน Internet Explorer 11)