شارك المقال

قم بإنشاء تأثير التمرير اللاصق باستخدام Elementor

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

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

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

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

تم تقديم هذا التأثير لأول مرة في فيديو فني سريع لتصميم الويب  أصدرناه في وقت سابق من هذا الأسبوع. يستمر هذا الوهم البصري في القسم التالي حيث يندمج الهاتف المحمول الثاني مع الهاتف المحمول الثالث والأخير.

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

هيا بنا نبدأ!

تعرف على كيفية إنشاء قائمة الشريط الجانبي اللاصقة!

تعرف على كيفية إنشاء رأس لاصق متقلص!

01

تطبيق تأثير التمرير اللاصق

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

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

02

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

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

03

اضبط مؤشر Z.

أولاً ، قم بتكرار القسم الأول. ثم اضبط قيم الفهرس z لصورة الجوال ، بحيث تجعل الهاتف المحمول ينزلق أسفل الهاتف الثاني في القسم التالي.

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

04

أكمل الجزء الأخير من التأثير

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

نظرًا لأن هذا هو القسم الذي تريد أن يتوقف فيه تأثير التمرير اللاصق ، فانتقل إلى تحرير الصورة> متقدم> تأثير التمرير> مثبت ، وحدد بلا.

05

اجعل الهاتف المحمول يختفي

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

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

توضيح

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

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

أرسل تصحيح

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}