8 قصاصات توضح تأثير الطرد في تصميم الويب

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

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

دعنا نستكشف مجموعة من العروض التوضيحية الملهمة مع مقتطفات التعليمات البرمجية حتى تتمكن من رؤية الاتجاه الفريد لنفسك.

صد الخطوط

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

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

شاهد خطوط طرد القلم بقلم دانيال فيلاسكيز

30000 جسيم

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

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

شاهد القلم 30000 جسيم لجوستين ويندل

الجسيمات التفاعلية

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

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

شاهد شعار الجسيمات التفاعلية للقلم من تأليف تامينو مارتينيوس

نص إلى جسيمات

هيا نلعب باللون والحجم لإثراء المفهومين السابقين ببعض التحولات الحية مثل لويس هوبريغتس في مشروعه من النص إلى الجسيمات.

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

انظر نص القلم إلى الجسيمات بواسطة لويس هوبريجتس

الكرات والجاذبية

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

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

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

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

جاذب

تم بناء هذا المشروع بواسطة Marco Dell'Anna أيضًا حول الجاذبية. يمكنك التحكم فيه بمؤشر الفأرة. استخدمه لتحريك الجسيمات وإعادة ترتيب مواقعها.

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

شاهد جاذب القلم - MatterJS بواسطة Marco Dell'Anna

تفعيل

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

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

موار بلازما

يمكن أن يساعد تأثير الصد أيضًا في الرسوم المتحركة للجسيمات. يمكنك جعلهم أكثر إثارة. خذ ذرة في Moar Plasma.

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

شاهد بلازما القلم Moar لجون تشين جيوي

جزيئات ثلجية

Snowy Particles هو مثال ممتاز آخر حيث يتم تعزيز الرسوم المتحركة التقليدية للجسيمات. استخدمت نات ، مؤلفة القلم ، حيلتين.

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

انظر جسيمات القلم. js الثلج بواسطة Nat

مبيدون

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

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

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

شاهد مبيدات القلم التي كتبها Rein van der Woerd

الجاذبية من خلال النفور

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

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