6 خلفيات موقع ويب تفاعلية رائعة وكيفية صنعها

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

موقع الويب الخاص بك هو معرضك الرئيسي ويجب أن يعكس ثقافتك بأفضل طريقة ممكنة. علاوة على ذلك ، فإن هدفك الرئيسي هو جذب انتباه الزوار وإلهامهم وجذب اهتمامهم بعملك أثناء تقديم منتجاتك و / أو خدماتك. توجد طرق متعددة للقيام بذلك ، ومن بينها توفير خلفية تفاعلية لموقع الويب. في الواقع ، هذا النوع من التأثير له مزايا متعددة: زيادة 25٪ من الوقت الذي يقضيه على الصفحة ، وخفض ما يصل إلى 35٪ من متوسط ​​معدل الارتداد ، وبالتالي جعل الأشخاص يعودون إلى موقعك على الويب (+ 40٪ من معدل المستخدمين العائدين).

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

1. Veritystudios ، جزيئات مضيئة

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

موقع Veritystudios باستخدام Three.js

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

2. HD Rain يجعلها تمطر ️

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

توفر HD-Rain تأثيرًا ممطرًا على موقعها على الويب مع Naker.Back

HD Rain هي شركة ناشئة للتنبؤ بالطقس مقرها في StationF في باريس ، وأرادت إعطاء دفعة تجريبية لموقعها على الويب ، لجعل الطقس باردًا مرة أخرى!

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

3. شبكات فابيو لامانا

تم بناء الموقع بواسطة فابيو لامانا باستخدام Particle.js

يعد استخدام شعارك كمصدر إلهام للخلفية فكرة جيدة دائمًا. لا تعد تجربة الويب الرائعة مجرد مجموعة من الأشياء المختلفة ولكنها تركيبة متماسكة. في هذه الحالة ، استخدم Fabio lamanna جيدًا Particle.js ، مكتبة JS لإنشاء تأثيرات الجسيمات ، والمعروفة جيدًا بتأثيرات الشبكة اللطيفة.

إنه فعال للغاية خاصة لأن فابيو يعمل في مجال شبكات النقل. الخلفية التفاعلية هي تتويج كعكة موقعها / محفظتها!

4. يطير في السماء!

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

سماء تفاعلية باستخدام Vanta.js

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

5. فقاعات بلدي ، فقاعات بلدي! 🧼

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

DDNA باستخدام رمز مخصص لخلفيتهم التفاعلية

DDNA هي شركة مجوهرات قررت اللعب بالأشكال والألوان للحصول على خلفية موقع ويب بسيطة للغاية ولكنها فعالة. فقاعات ، التي يمكن أن تمثل بطريقة ما روح مجوهرات المستقبل ، تطفو في النشوة (لذلك لا تتوقف عني الآن) بألوان جميلة وتأثير ظلال باردة. في الواقع ليس موقع المجوهرات النموذجي الذي اعتدت زيارته ، ولهذا ستتذكره!

6. كون داميان

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

تصميم مكاني لـ Damian Devos ، مع الحفاظ على صورته الخلفية مع Naker.Back الجزيئات

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