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

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

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

 

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

 

في هذا البرنامج التعليمي [Image Clip Animation with Sliders] ، على صفحة الويب ، يوجد إجمالي خمس صور ولكن أربع صور مغطاة بمسار مقطع وهناك أزرار شريط تمرير لعرض الصور أو تحريكها واحدة تلو الأخرى. عند النقر فوق زر شريحة معينة ، ستظهر الصورة مع تأثير مقطع أو رسم متحرك.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج [Image Clip Animation with Sliders].

 

في الفيديو ، شاهدت صورة Image Clip Animation باستخدام Sliders وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا التأثير أو الرسوم المتحركة. إذا كنت مبتدئًا ولا تعرف سوى HTML و CSS الأساسيين ، فيمكنك أيضًا فهم الرموز بسهولة ويمكنك إنشاء هذا النوع من الرسوم المتحركة لأن مقطع الرسوم المتحركة هذا يعتمد فقط على HTML و CSS فقط.

 

لإنشاء عناصر تحكم في شريط التمرير لشريحة الصورة ، استخدمت HTML <input type = ”radio”> وعلامة <label> ، باستخدام سمة علامة التصنيف ، قمت بالتحكم في أزرار الاختيار من التسمية. يمكنك استخدام هذا البرنامج على موقع الويب الخاص بك أو المشاريع حيث يمكن استخدام أشرطة تمرير الصور.

 

صورة مقطع الرسوم المتحركة مع المتزلجون

لإنشاء هذا البرنامج (Image Clip Animation with Sliders). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow