4 الحيل الخلفية الحديثة لتجربة
يبدو أنه ، كمكون من تصميم ، تعيش الخلفيات في الظلال. ومع ذلك ، هذا ليس صحيحا تماما. في الأوقات التي بدأت فيها CSS فقط في اتخاذ خطواتها الأولى نحو غزو العالم ، كانت الخلفية قد أخذت بالفعل دور العنصر الزخرفي الرئيسي للموقع.
في الوقت الحاضر لم يتغير الوضع بشكل جذري. في معظم الحالات ، يعمل كقوة دافعة بصرية أساسية تقدم مساهمة مهمة في الموضوع العام.
تقليديا ، الصور ومقاطع الفيديو هي الخيارات الأولى للخلفية. والحقيقة هي أنها ببساطة عبارة عن أقسام أبطال مكتظة بالسكان: حيث يرحب كل موقع إلكتروني آخر بالجمهور عبر الإنترنت من خلال الخلفية المستندة إلى الصور أو الأفلام. وهذا يجعل الويب (والواجهة الخاصة بك على وجه الخصوص) متشابهين تمامًا مما يؤدي إلى تجربة مستخدم متوقعة.
هناك مخرج واحد هو إيجاد حلول جديدة من خلال استغلال تقنيات العلامة التجارية الجديدة واللعب مع CSS3 و HTML5 وجافا سكريبت. في الواقع ، هناك اتجاه واضح من الذهاب لهذه الخيارات. هناك على الأقل أربع خلفيات ديناميكية حديثة مختلفة تشارك في مسابقة للفوز بمكانها في الشمس هذه الأيام.
دعونا ننظر إليها:
الجسيمات الرسوم المتحركة
الرسوم المتحركة الجسيمات هي واحدة من الخيارات الأكثر شعبية في الوقت الحالي. لقد اعتمدت الكثير من المواقع بنجاح هذا الحل الأنيق المستوحى من الكون. يعمل بشكل جيد مع قماش بلون خالص ، رسم توضيحي ، رسومات متجهة ، وحتى صور.
علاوة على ذلك ، يختلف الرسم المتحرك. يمكن أن يكون حزمة من النقاط تتحرك بشكل متزعزع منتشرة في جميع أنحاء الصفحة لتقليد السماء المرصعة بالنجوم أو المطر من النجوم ، أو حل الكوكبة تحت عنوان حيث يمكنك توصيل الدوائر ذات الخطوط الرفيعة. وهذا ليس كل شيء؛ في بعض الأحيان يتم إقرانها مع التأثيرات التي تسببها أحداث تحوم الماوس: في هذه الحالة ، يمكنك تشغيل الجسيمات بعيدًا ، أو تشكيل دوامات منها ، أو إرفاقها بالمؤشر كمسار ، وما إلى ذلك.
هوب هو مثال على الرسوم المتحركة الجسيمات النموذجية. ويتميز بمجموعة من النقاط النابضة التي تتحرك بشكل جيد مع تلوين داكن وخريطة موضوعة على الظهر. استخدم مؤشر الماوس للحصول على بعض المرح.
نصيحة: إذا كنت ترغب في التعامل مع خلفية رأس ديناميكية Huub ، فعليك إلقاء نظرة على المشروع الذي أنشأه دومينيك كولبي الماوس المنظر التجريبي . يبدو تقريبا نفس الشيء. ولكن إذا كنت بحاجة إلى حل فوري ، فستتم الاستعانة بمكتبة JavaScript بواسطة Vincent Garreau Particles.js هو ما تبحث عنه.
موجات من الجسيمات
في حين أنه في المثال السابق ، يمكن تحقيق التأثير من خلال التلاعب الذكي مع HTML5 و CSS3 وقليل من سحر جافا سكريبت ، هذه التجربة هي تجربة بارعة مع مكتبة Three.js. مع أشكاله المقوسة والحركات المموجة الشبيهة بالتموج ، يذكّر بسهولة واحدة من المد الجزئي الصغير. يخلق شعور من قماش التنفس. يمكنك استخدام مؤشر الماوس لتدويره في اتجاهات مختلفة ، واستكشافه أفقياً وعمودياً.
StuurMen يحتوي على قسم ترحيبي بسيط. إنه الحد الأدنى ، نظيف ، ورائع. يدخل المحتوى بشكل غير ملحوظ إلى مجال الرؤية في حين أن الخلفية النابضة تؤسس مزاجًا صحيحًا للمشروع.
نصيحة: هنا يمكنك العثور عليها النص الأصلي من قبل ThreeJS وتكييفها الناجح من قبل Deathfang مع عرض توضيحي يسمى three.js قماش - الجسيمات - الأمواج .
الماوس تحوم المنظر
الاختلاف في الطبقات هو اتجاه متنامي آخر. جنبا إلى جنب مع الرسوم المتحركة الجسيمات ، فإنه يمكن تحويل خلفية ثابتة مملة في تكوين مع شعور ثلاثي الأبعاد خفية. الشيء العظيم هو أنك لست بحاجة إلى التخلص من اختيارك المفضل للصورة ، استخدم فقط المنظر لتهجينه قليلاً.
ومن المفيد جدا عندما تحتاج لفرح عنوان أو شعار أو مشهد سريالي ، أو التوضيح. كما أنها مناسبة لمختلف الرسوم المتحركة المجردة. فبسبب الحدث القياسي لتحريك الماوس ، فإنه لا يضيف بعدًا آخر فقط ، ولكنه يسمح أيضًا للمستخدمين بالتشغيل مع البيئة.
محفظة شخصية من الكسندر روشيت لديه صفحة البداية المعلقة. لا يكتفي السلوك بالسيطرة على العين فحسب ، بل يتسبب أيضًا في تحريك الماوس عند تحريك الحروف.
نصيحة: هناك العديد من المكتبات ومقتطفات الشفرة القابلة للتطبيق لتوليد اختلاف المنظر. واحدة من أكثر شعبية هو البرنامج المساعد التي أنشأتها ماثيو فاغرفيلد دعا Parallax.js . ومع ذلك ، إذا كنت بحاجة إلى مشاهدتها في الواقع ، وخاصةً المطبقة على الطباعة ، فيمكنك استكشاف القلم من خلال Frontnerd الذي يميزه على 3D المنظر على الماوس .
تجارب WebGL
وبطبيعة الحال ، تعد تجارب WebGL بديلاً للمطورين المتطورة والمتعهدين الذين لديهم ميزانية سخية. يمكن أن تكون رائعة ، ومذهلة ، وأبهة قليلا. يستحق كل بنس. ومع ذلك ، هناك دائما ذبابة في المرهم. مع قوة كبيرة تأتي مسئولية كبيرة ، ومع WebGL يجب عليك ألا تنسى أبدًا مقدار الموارد التي تستهلكها ، وعدم توافق المتصفح الكامل.
Solarin هو كل شيء عن تجربة مستخدم لا تنسى وعقلية تهب. إنها تجربة WebGL ثلاثية الأبعاد غنية بالعديد من الميزات المثيرة والمبتكرة. خلفية الرأس عبارة عن مجال مستقبلي ضخم يستجيب لمؤشر الماوس ويخلق انطباعًا هائلاً.
نصيحة: على الرغم من أن تقليد ما فعله العباقرة في MediaMonks أمرًا معقدًا للغاية ، على الويب ، يمكنك دائمًا العثور على نقطة بداية ستعطيك فكرة للتفكير. النظر في WebGL API ، وهذا codepen من يواشي كوباياشي الذي جاء مع مشروع يسمى "مجال التملص" .
استنتاج
في حين أن استخدام الصور ومقاطع الفيديو هو طريقة أثبتت جدواها وأقل إيلاما لإضفاء الطابع الشخصي على الخلفية ، فلا تزال هناك خيارات واعدة وتجريبية أخرى يمكنها الحصول على النتيجة المرجوة. البقاء بعيدا عن التفاهات أمر صعب ويستهلك الكثير من المال ، ولكن هذه التدابير مبررة ومعقولة جدا.
سواء أكانت هذه الرسوم المتحركة بسيطة أو أنيقة أو تجربة WebGL رائعة ، فإنها تضخ حياة جديدة في التفاصيل الأساسية للواجهة ، مما يمنح موقعك الإلكتروني بداية قوية.