filmora-go-square
Filmora For Mobile

تطبيق تحرير فيديو سهل الاستخدام

appstore
قم بالتحميل من APP STORE
احصل عليه من Google Play

12 مواقع ويب جذابة ذات مؤثرات حركة جذابة وامثلة للتحرك عند التمرير

author

Mar 21, 2023• حلول مجربة

12 مواقع ويب جذابة ذات مؤثرات حركة جذابة وامثلة للتحرك عند التمرير

محرر سهل ولكنه قوي

تأثيرات عديدة للاختيار من بينها

دروس مفصلة تقدمها القناة الرسمية

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

هذا هو المكان الذي تأتي فيه الرسوم المتحركة المشغلة Scroll-Triggered في مواقع الويب. تعد Filmora Pro واحدة من أفضل شركات تطوير مواقع الويب التي تطور مواقع الويب باستخدام تمرير متحرك متحرك للعملاء في جميع أنحاء العالم. Filmora Pro رائع تحريك العناصر في التمرير للمواقع التي يطورونها.

 الجزء 1 ما هي الرسوم المتحركة التي تم تشغيلها بواسطة التمرير؟

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

 الجزء 2 أفضل 12 موقعًا إلكترونيًا مع تنشيط الحركة في أمثلة التمرير

فيما يلي أفضل 12 موقعًا بها حركة صور امثلة التحريك مع التمرير.

01Joey Bada$$ Political MC

joey bada political mc

يُعد موقع الويب الخاص بـ Joey Bada$$ Political MC أحد أكثر الأمثلة الرائعة على كيفية استخدام الرسوم المتحركة التي يتم تشغيلها بالتمرير بشكل فعال لقول قصة. هذا الموقع هو عبارة عن تعاون بين مجلة Shoes Up - The French و American MC. هذا موقع ساخر ويشبه حملة سياسية. لإنشاء هذا الموقع، تم استخدام الرسوم المتحركة التي يتم تشغيلها بالتمرير طوال الوقت. تم تصميم التمرير بطريقة تتغير من أفقي إلى عمودي. تقدم كل مخطوطة العديد من الحقائق المثيرة للاهتمام حول معتقدات جوي السياسية.

02Vincent Saïsset

vincent-saïsset

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

03Home Société

home société

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

04Sally

Sally

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

05Yuto Takahashi

Yuto Takahashi

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

06Editorial New

Editorial New

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

07Danilo De Marco

Danilo De Marco

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

08K24 Moscow

K24 Moscow

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

09Green Chameleon

Green Chameleon

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

10Bewegen

Bewegenn

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

11Wtower

Wtower

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

12Parmigiani Fleurier

Parmigiani Fleurier

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

 الجزء 3 مزايا وعيوب هذه المواقع الـ 12

اسم الموقع
الميزة
العيب
Joey Bada$$ Political MC تم استخدام الرسوم المتحركة المشغلة بالتمرير طوال الوقت. تم تصميم التمرير بطريقة تتغير من أفقي إلى عمودي. يحتاج موارد كثيفة.
Vincent Saïsset إنه يحتوي على تفاعل دقيق مرح موجود بين الحروف والمؤشر. استخدام المكونات مكثف.
Home Société يصور التمرير الأفقي بعدًا جديدًا بالكامل يمنح المستخدمين تجربة التمرير اللانهائي. استخدام الذاكرة مرتفع.
Sally الجزء الجذاب هو نموذج السيارة ثلاثي الأبعاد وسبعين رسمًا متحركًا آخر يعطي مظهرًا أن السيارة تتحرك. تستنفذ جزء كبير من الموارد.
Yuto Takahashi مع كل تمرير جديد، يمكن عرض نوع من الرسوم المتحركة السائلة فوق الصور يتطلب نطاق ترددي عالي.
Editorial New أثناء النقر على الزر Randomize، سيتبين أن الغلاف يتغير ويعرض الخط بأحجام أخرى مختلفة. يحتاج إلى إنترنت جيد.
Danilo De Marco الطباعة المستخدمة هي السائدة للغاية. يحتاج موارد كثيفة.
K24 Moscow يؤدي الجمع بين أقسام اللون الأبيض والأسود والأحمر التي تتحرك وتتداخل مع التغييرات في الحجم إلى إنشاء شكل محرف مميز. يتطلب نطاق ترددي عالي.
Green Chameleon سيشعر المرء وكأنه دخل في كبسولة زمنية. الموقع كثيف الموارد.
Bewegen هناك أيضًا خيار حيث يمكن لأي شخص إنشاء نظام المشاركة الخاص به فقط عن طريق اختيار المدينة وعدد الرؤوس التي سيتم تضمينها في المشروع أثناء اختيار اللون والميزات الأخرى للدراجة. استخدام المكونات مكثف.
Wtower شريط تقدم في الأسفل ويظهر في كل مرة يوجد فيها بعض العناصر المفيدة ليتم تسليمها. الموقع كثيف الموارد.
Parmigiani Fleurier يمكن للمرء استكشاف المجموعة بأكملها باستخدام الصفوف المستخدمة على جانبي الشاشة. كثيفة الاستخدام للموارد

الدروس المستفادة الرئيسية من هذه المقالة

في نهاية هذه المقالة، لقد فهمت ما تدور حوله الرسوم المتحركة التي يتم تشغيلها بواسطة Scroll.

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

يخبرك المقال أيضًا عن أفضل 12 موقعًا جذابًا للرسوم المتحركة التي تم تشغيلها بواسطة Scroll والتي ستمنحك أفكارًا مختلفة لموقعك التالي على الويب.

avatar
Ahmed Absal
Ahmed Absal هو كاتب ومحب لكل شئ الفيديو