10 أمثلة جميلة على الرسوم المتحركة للجسيمات في تصميم الويب

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

كقاعدة عامة ، يمكن رؤية الرسوم المتحركة للجسيمات في أقسام البطل مثل ، على سبيل المثال ، في JetUp Digital.

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

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

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

بشكل عام ، يفضل المطورون المتغيرات الأكثر أناقة ومتواضعة وهادئة. على سبيل المثال ، تحقق من Canvas Particles بواسطة Romswell Roswell Parian Paucar. إنه مزيج من الجسيمات واختلاف المنظر ينتج عنه جمالية جذابة وديناميكية.

ومع ذلك ، فهذا لا يعني أن النهج يقتصر على هذا النوع من الإدراك فقط. ضع في اعتبارك الجسيمات الموجودة في الفضاء بواسطة Dean Wagman ، نظام الجسيمات CSS فقط بواسطة Robin Selmer ، وبالطبع تأثير الدفع بعيدًا يتم إنتاجه بمهارة وظهوره في ملف ترميز لـ Alex Safayan. في حين أن مفهوم Robin Selmer هو مجرد قطعة ممتعة للمشاهدة ؛ يتطلب الاثنان الآخران تفاعل المستخدم ، وهذا أمر مثير دائمًا.

استخدام الرسوم المتحركة للجسيمات لإثارة الإعجاب

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

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

30000 جسيم لجوستين ويندل

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

سمك في الماء - أليكس سفايان

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

بلانكتون - حياة الجسيمات بواسطة ماركو ديلانا

بعد حصولها على جائزة أفضل مشروع في عام 2017 ، فإن Plankton تستحق الاهتمام بالتأكيد. لا يأسر المشروع الفكرة فحسب ، بل أيضًا الإدراك. من التلوين الدقيق الذي يناسب هنا مثل القفازات إلى السلوك الرائع الذي يبدو طبيعيًا بشكل لا يصدق ، Marco Dell'Anna لديه اهتمام بالتفاصيل.

STARDUST من ماركو ديلانا

أعشق الأجواء الرجعية الرائعة ولمسات النيون والتلوين الرائع هنا. من الصعب للغاية أن تغمض عينيك عن ذلك. Stardust هو تعايش بين التصميم والترميز ينتج عنه تحفة ملهمة.

نقاط الجاذبية من Akimitsu Hamamuro

يدعوك Akimitsu Hamamuro لإضافة ما يسمى بـ "نقاط الجاذبية" في ملعبه. يتدخلون في الحركة الفوضوية للنقاط ويسحبونها مثل المغناطيس. على الرغم من أنها لا تؤدي دور مركز المدار ؛ ومع ذلك فإنها تشكل نقاط محورية تجبر الجسيمات على التحرك في اتجاهها.

الجسيم الجرم السماوي CSS بواسطة نيت وايلي

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

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

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

الاستخدامات غير التقليدية

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

شعار الجسيمات التفاعلية بواسطة تامينو مارتينيوس

شعار الجسيمات التفاعلية هو مثال نموذجي على ذلك. يبدو أنه حل مُعاد تخيله لمقتطف Justin Windle الموضح أعلاه. على الرغم من عدم وجود 30000 نقطة ، إلا أنها تتكون من عدد مذهل من الجسيمات التي تشكل بمهارة كلمة "CODEPEN". هذه إحدى الحالات التي وجد فيها المفهوم استخدامًا عمليًا.

نص على الجسيمات بواسطة لويس هوبريغتس

النسخة الملونة من الحل السابق متوفرة في هذا القلم بواسطة Louis Hoebregts. يتشكل النص هنا من خلال آلاف الدوائر الملونة المصمتة التي تثريها نفس التفاعل كما في المثال السابق.

الجسيمات تكتب نصًا لماركو ديلانا

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

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

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

404 نص جسيم بواسطة إنريكو تونياتو

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

تأثير يجذب الانتباه

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