تقنيات CSS لتأثير تموج المواد

دليل لتقنيات مختلفة لتأثير التموج باستخدام CSS و JavaScript

اضطررت مؤخرًا إلى تنفيذ تأثير ripple من تصميم المواد إلى تطبيق ويب. ثم أدركت أنه ليس لدي أي فكرة عن كيفية تنفيذ ذلك. قادني هذا إلى رحلة لدراسة التطبيقات الحالية ، وحتى استنبطت تقنية جديدة قد تكون مفيدة لك.

ما هو هذا التأثير تموج؟

مهلا ، ألا تعرف تأثير تموج تصميم المواد من Google؟ هل كنت تعيش على كهف منذ كم سنة؟

يتم استخدام تأثير تموج عند الضغط على زر. إنه يعمل بنفس طريقة تفاعلات الماوس أو اللمس.

يطلق على الموضع الذي تنقر فوقه أو تلمسه نقطة الاتصال. من هناك ، يتم إرسال تموج تتحرك إلى الخارج ، وفقدان العتامة لأنها تنمو أكبر حتى يملأ الزر بأكمله. ثم تختفي تماما.

تشبه ديناميكيات تأثير التموج تلك التموجات التي تحصل عليها عند لمس سطح سائل ، أو عندما تسقط صخرة في البحيرة.

تموجات ستجدها على شبكة الإنترنت

بعد القيام ببعض الأبحاث ، يمكن أن أجد تقنيتين رئيسيتين تُستخدمان في تطبيق تأثير ripple على تطبيقات الويب.

باستخدام :: بعد العنصر الزائف

باستخدام هذه التقنية ، يتم تصميم العنصر التالي بعد الزر الزائف كدائرة شبه شفافة ويتم تحريكه لينمو ويتلاشى. يجب أن يكون زر الحاوية فائضًا: مخفيًا حتى لا تفيض الدائرة أبدًا خارج سطح الزر ، والموضع: نسبيًا لتسهيل وضع الدائرة داخل الزر. يمكنك قراءة المزيد من التفاصيل حول هذه التقنية على هذه المقالة من قبل Ionuț Colceriu.

أحد الأشياء الرائعة في هذه التقنية هو أنها حل CSS خالص للتأثير المموج. ومع ذلك ، يبدأ تأثير التموج دائمًا من وسط الزر ، بدلاً من نقطة الاتصال. هذه ليست التعليقات الأكثر طبيعية.

يمكن تحسينه باستخدام جافا سكريبت لتخزين نقطة الاتصال ، واستخدامه لوضع التموج. هذا بالضبط ما فعلته material.io لمكون تموج الويب الخاص بهم. يستخدم متغيرات CSS لتخزين نقطة الاتصال ، ويستخدم العنصر التالي بعد المتغير هذه المتغيرات لتحديد المواقع.

باستخدام العناصر التابعة

في جوهرها ، يستخدم هذا الأسلوب نفس الاستراتيجية كما كان من قبل. ولكن بدلاً من العنصر الزائف ، فإنه يضيف عنصر امتداد داخل الزر ، والذي يمكن بعد ذلك وضعه عبر JavaScript. هذه التقنية موصوفة في هذا المقال من قبل Jhey Tompkins.

أبسط تطبيق ينشئ فترة لكل نقرة على الزر ، ويستخدم موضع الماوس في حدث النقرة لتغيير موضع النطاق. الرسوم المتحركة CSS تجعل المدى ينمو ويتلاشى حتى يصبح شفافاً بالكامل. يمكننا اختيار إزالة النطاق من DOM بمجرد انتهاء الرسوم المتحركة ، أو مجرد تركه تحت السجادة - لن يلاحظ أحد حقًا وجود فترة شفافة تتدحرج.

لقد وجدت تنوعًا آخر في هذا الأمر ، حيث يكون العنصر التابع هو svg بدلاً من span ، ويتم تنشيط svg من خلال JavaScript. يشرح دينيس غايبل هذا الاختلاف ، لكن في جوهره يبدو أنه نفسه ، وربما يسمح باستخدام أشكال وتأثيرات SVG المعقدة.

مشكلة في تقديم المدخلات

كلا التقنيات المذكورة أعلاه تبدو كبيرة. ولكن هذا ما يحدث عندما حاولت تطبيقها على عناصر الإدخال بالنوع = إرسال:

لماذا لا يعملون؟

عنصر الإدخال هو عنصر تم استبداله. باختصار ، هذا يعني أنه لا يمكنك فعل الكثير مع هذه العناصر ، فيما يتعلق بـ DOM و CSS. على وجه التحديد ، لا يمكن أن يكون لديهم عناصر فرعية ، ولا عناصر زائفة أيضًا. أصبح من الواضح الآن سبب فشل هذه التقنيات.

لذلك ، إذا كنت تستخدم تصميم المواد ، فمن الأفضل الابتعاد عن الإدخال [type = submit] ، والالتزام بعناصر الزر. أو مجرد الحفاظ على القراءة.

مضيفا تموجات لتقديم المدخلات

في تطبيق الويب الذي كنت أعمل عليه ، كان لدينا بالفعل الكثير من أزرار الإرسال. يتطلب تغييرها لتصبح عنصرًا مختلفًا الكثير من العمل ، وخطر كبير في كسر أوراق الأنماط ومنطق جافا سكريبت. لذلك اضطررت لمعرفة كيفية إضافة تموجات لأزرار الإرسال الحالية.

باستخدام حاوية التغليف

لقد أدركت بسرعة أنه يمكنني التفاف زر الإرسال داخل عنصر كتلة مضمنة ، واستخدام عنصر كتلة مضمنة كسطح تموج. إليك عرض سريع:

على الرغم من أنني أحب هذا الحل بسبب بساطته ، إلا أنه لا يزال يطلب مني تغيير العلامات في العديد من الأماكن. وكنت أعلم أنه سيكون حلاً هشًا - سيأتي المطورون الجدد إلى المشروع ، ويقومون بإنشاء أزرار إرسال دون لفهم بشكل صحيح في سطح تموج. لذلك واصلت البحث عن حلول أخرى لا تتطلب تغيير DOM.

التدرجات شعاعي

يسمح لي بناء جملة التدرج الكعبري بالتحكم في كل من مركز التدرج وحجمه. بالطبع ، يسمح لي أيضًا بالتحكم في لون التدرج اللوني ، بما في ذلك الألوان شبه الشفافة. وهو لا يفيض أبدًا على العنصر الذي تم تطبيقه عليه. لذلك يبدو أنه يفعل بالفعل كل ما أحتاجه!

ليس بهذه السرعة ... هناك شيء واحد مفقود: خاصية صورة الخلفية غير قابلة للتغيير. لم أستطع جعل التدرج ينمو ويتلاشى ليصبح شفافًا باستخدام الرسوم المتحركة لـ CSS. لقد نجحت في جعلها تنمو من خلال تنشيط خاصية حجم الخلفية ، لكن هذا كان كل ما يمكنني فعله.

جربت بعض الأشياء الأخرى ، مثل وجود دائرة باهتة كصورة متحركة (باستخدام تنسيق apng) ، وتطبيقها كصورة خلفية. ولكن بعد ذلك لم أستطع التحكم عندما بدأت حلقة الصورة وانتهت.

وأخيرا ، حل مع جافا سكريبت

ما لا يمكنك فعله في CSS ، يمكنك القيام بذلك في JavaScript. بعد قضاء وقت أطول مما أرغب في الاعتراف بمحاولة جعل هذا التأثير يعمل باستخدام الرسوم المتحركة لـ CSS ، استسلمت للتو وقررت أن أكتب الرسوم المتحركة في JavaScript.

لقد بدأت مع حل التدرج الشعاعي أعلاه ، واستخدمت window.requestAnimationFrame لإنشاء رسم متحرك سائل للتدرج الشعاعي ، ينمو ويتلاشى. إليكم الحل النهائي:

خاتمة

لذلك من الممكن أن يكون هناك تأثيرات تموج على أزرار الإرسال ، وليس فقط مع CSS وحده.

لم أتمكن من العثور على هذه التقنية موثقة في أي مكان على الويب ، لذلك أنا أسميها الخاصة بي. لا تتطلب تقنية تموج ليوناردو تغييرات على DOM ، وتعمل مع أي عنصر لأنها لا تعتمد على العناصر الزائفة أو العناصر الفرعية. ومع ذلك ، فهو ليس حلاً لا تشوبه شائبة.

أولاً ، هناك أداء. من خلال تنشيط التدرج اللوني باستخدام JavaScript ، تفقد الكثير من تحسينات المتصفح. ولكن نظرًا لأن الخاصية الوحيدة التي يتم تغييرها هي صورة الخلفية ، فإنني أظن أن المتصفحات لن تحتاج إلى إعادة التدفق ، وستتطلب فقط إعادة تطبيق الأنماط وإعادة طلاء العنصر. في الممارسة العملية ، هذا هو بالضبط ما يحدث ، والأداء جيد حقًا. استثناء هذا البيان هو Firefox Mobile ، والذي لا يواكب الرسوم المتحركة لسبب ما. (تحرير: الرسوم المتحركة سلسة على إصدارات Firefox Mobile الحديثة)

ثانياً ، تستخدم التقنية خاصية صورة الخلفية للزر. إذا كان التصميم الخاص بك يتطلب وجود أزرار مطبقة على خلفيته ، فإن تأثير التموج سيتجاوز ذلك. إذا كنت تحتاج حقًا إلى تلك الصورة على التصميم الخاص بك ، فيمكنك تعديل JavaScript لرسم التدرج الشعاعي أعلى صورة الخلفية الحالية.

ثالثًا ، لا يبدو أن هذا يعمل في برنامج Internet Explorer. ومع ذلك ، لا أرى أي سبب يمنعها من العمل مع IE10 وما فوق. ربما يرجع السبب في ذلك إلى استخدام IE لبناء جملة مختلف للتدرج الشعاعي. ولكن ، من يهتم IE nowdays؟ (تحرير: تعمل هذه الطريقة دون أي مشاكل في Internet Explorer 11)