الهجوم على الخلفيات المتحركة المستندة إلى Blob في تصميم الويب

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

هناك أنواع مختلفة من الرسوم المتحركة. يمكنك أن تتعثر في:

• الرسوم المتحركة الجسيمات.
• الرسوم المتحركة متلألئة.
• رسوم متحركة مجردة ثلاثية الأبعاد ؛
• رسوم متحركة هندسية سلسة ، وأكثر من ذلك بكثير.

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

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

الرسوم المتحركة Blob بواسطة Uwe Chardon

يعتبر رأي Uwe Chardon في هذا الحل الشائع عمليًا وملهمًا. إنه يتميز بنقطة بسيطة ومسطحة مع لون برتقالي جميل وحواف ناعمة موضوعة في بيئة نظيفة. تمكن من تقليد السلوك السائل بشكل جيد.

والنتيجة هي مزيج فائز من الشكل البسيط والسلوك المعقد الذي يبدو مثيرًا للإعجاب.

شاهد الرسوم المتحركة لـ Pen Blob Pure CSS بواسطة Uwe Chardon

Blob بواسطة أشتون هولجيت

المثال السابق يصور نوعًا تقليديًا من النقطة ذات الشكل غير المنتظم والتحول المعبر نسبيًا. ومع ذلك ، فإن هذا المشروع من قبل Ashton Holgate يتمسك بشكل أكثر إلهي ، والذي يكاد يكون على حدود الدائرة ، والتغييرات بالكاد ملحوظة. ومع ذلك ، يبدو أيضًا رائعًا.

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

شاهدْ القلمَ Blob بواسطة Ashton Holgate

كذاب محمل سائل بواسطة فابيو أوتافياني

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

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

شاهد اللودر السائل المرتد للقلم من قبل فابيو أوتافياني

اختبار النقطة القماشية بواسطة Shaw

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

إنه عالمي ومحايد. وبالتالي ، يمكن أن تصبح خلفية متحركة مثالية للعديد من المشاريع.

شاهد اختبار القلم على شكل نقطة قماشية بواسطة Shaw

Blob بواسطة جيفري

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

يتم إنشاء مقتطف الشفرة باستخدام HTML و CSS و JavaScript. يبدو متسقًا عبر المتصفحات والأجهزة المختلفة. يستخدم الفنان خوارزمية الربيع الأساسية التي تجعل التفاعل مع النقطة الضخمة شعورًا حقيقيًا وغير مصطنع.

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

انظر القلم Blob بواسطة جيفري

النقط بواسطة شارلوت دان

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

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

شاهد القلم النقطي من تأليف شارلوت دان

الآن ، دعنا ننتقل من العالم المسطح إلى عالم ثلاثي الأبعاد.

Blob بواسطة جورجي نيكولوف

Blob بواسطة جورجي نيكولوف هو نقطة في القضية. إنه يلفت الأنظار على الفور بألوانه الزاهية ومظهره عالي التقنية وسلوكه الديناميكي. يحقق المطور أقصى استفادة من التقنيات المتقدمة ، باستخدام WebGL و GLSL و shaders لصالحه. على الرغم من أن الحل يخضع لتوافق المتصفح ، إلا أنه يبدو ملهمًا.

مشاهدة القلم blob بواسطة جورجي نيكولوف

التجربة رقم 6 بواسطة دانيال ديل كور

يوضح Daniel Del Core للجمهور عبر الإنترنت كيفية اللعب بضوضاء Simplex وتجميله ببعض التركيبات المستنسخة بيقظة. والنتيجة هي كرة شبيهة بالطلاء مستوحاة من الحلوى. على الرغم من أنه يتحرك بسرعة كبيرة ، إلا أنه مذهل لدرجة أنه من الصعب أن تغمض عينيك عنه على الفور.

شاهد تجربة القلم رقم 6 بقلم دانيال ديل كور

فقاعة جزيئية مزيفة بواسطة إيلي فيتش

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

كما هو متوقع ، يستخدم الفنان سحر Three.js وبعض الأعمال البارعة مع نسيج إجرائي لسحب هذا المفهوم.

شاهد قلم # 3_ديسمبر من الجسيمات المزيفة بواسطة إيلي فيتش

CSS Blob Generator بواسطة Edwin Chen

سننهي مجموعتنا باستخدام CSS Blob Generator بواسطة Edwin Chen. كما يوضح العنوان ، يتميز هذا القلم بملعب صغير حيث يمكنك إنشاء شكل blob.

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

شاهد أداة Pen CSS Blob Generator بواسطة Edwin Chen

الشكل المثالي لجو هادئ

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

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

ستثري التجربة وتزين الخلفية وفي نفس الوقت تفسح المجال للمحتوى. ستساعدك هذه الخلفيات في الحفاظ على التوازن بين البيانات المرئية والنصية.