فقاعة! فحص الانفجارات في تصميم المواقع

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

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

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

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

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

قد تسأل كيف تفعل هذا. لدي حل واحد جيد: اجعل الأشياء تنفجر - بالمعنى الحرفي والمجازي.

جزيئات في الفضاء بقلم دين واجمان

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

رؤية القلم
جزيئات في الفضاء بقلم دين واجمان (deanwagman).

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

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

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

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

رؤية القلم
انفجار الجسيمات JS / CSS3 بواسطة Aleksei (alek).

رؤية القلم
#Codevember 5 - كابومرز بقلم كريستوفر ليس (chriscourses).

انفجارات DOM بواسطة David A.

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

رؤية القلم
انفجارات DOM بواسطة David A. (meodai).

WebGL Sparkles بواسطة CreateJS

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

رؤية القلم
CreateJS: WebGL Sparkles بواسطة CreateJS (createjs).

قاذفة الألعاب النارية التلقائية بواسطة كريستوفر ليس

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

رؤية القلم
اليوم 29 - قاذفة الألعاب النارية التلقائية بواسطة كريستوفر ليس (chriscourses).

نافذة مشروطة تدمر مفهوم LegoMushroom

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

رؤية القلم
نافذة مشروطة تدمر مفهوم LegoMushroom (@ sol0mka).

تأثير انفجار SCSS بواسطة Sylvain Garnot / SVG text Explosion بواسطة Kacper Bawol / Canvas text Explosion by Tim Horwood

يمكن أن تكون تأثيرات الانفجار مفيدة للطباعة أيضًا. ضع في اعتبارك تأثير انفجار SCSS بواسطة Sylvain Garnot ، انفجار نص SVG بواسطة Kacper Bawol وتفجير نص Canvas بواسطة Tim Horwood.

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

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

رؤية القلم
SCSS - تأثير الانفجار بواسطة سيلفان جارنوت (سيلفينجارنوت).

رؤية القلم
انفجار نص بتنسيق Svg بواسطة Kacper Bawol (Casperovic).

رؤية القلم
انفجار نص قماش ، انقر لعرضه بواسطة Tim Horwood (tdhorwood).

انفجار منزل من قبل Ko.Yelie

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

رؤية القلم
انفجار المنزل بواسطة Ko.Yelie (@ ko-yelie).

ميزة متفجرة

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

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

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