كيفية انشاء الرسوم المتحركة العمودية للبطاقة باستخدام HTML و CSS فقط

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

 

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

 

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

 

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

 

في الفيديو ، شاهدت الفيديو التعليمي الكامل لـ Vertical Card Slider وعرفت أن هذا برنامج CSS خالص. إذا كنت مبتدئًا وتعرف القليل من HTML و CSS ، فيمكنك أيضًا إنشاء هذا النوع من البطاقات باستخدام الرسوم المتحركة الإبداعية.

 

لإنشاء زر المتابعة هذا لهذه البطاقة ، استخدمت علامة <a> ، لذلك إذا كنت تريد إعادة توجيه المستخدم الخاص بك إلى موقع معين ، فيمكنك ببساطة وضع رابط هذا الموقع داخل سمة href لعلامة الارتساء مثل هذا: <a href = ”your_link_here” target = ”_blank”>

 

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

 

الرسوم المتحركة العمودية انزلاق البطاقة

لإنشاء هذا البرنامج [Vertical Card Sliding Animation]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر لهذه الرسوم المتحركة للبطاقة المنزلقة من زر التنزيل أدناه.