إنشاء رسوم متحركة دائري للتمرير اللانهائي مع التوقف عند التمرير باستخدام CSS فقط. لا حاجة إلى JavaScript.
نحب JavaScript، بالطبع. ولكن من الممتع دائماً رؤية ما يمكننا تحقيقه باستخدام CSS وحده - خاصة عندما يتعلق الأمر بالرسوم المتحركة، لأن الرسوم المتحركة في CSS غالباً ما تكون "أقل ثقلاً" من الرسوم المتحركة في JavaScript.
في هذا المنشور، سأريك كيفية إنشاء رسوم متحركة دائري للتمرير اللانهائي مع تأثير التوقف عند التمرير باستخدام CSS فقط. إليك معاينة لما سنقوم ببنائه:
أولاً، لننشئ الهيكل الأساسي لدائرتنا. فكر في صف من البطاقات:
تبدو جيدة، أليس كذلك؟ يمكن أن تكون البطاقات لافتاتك الرائعة، صور المنتجات، أو أي شيء تريد عرضه في دائرتك.
نظرًا لأننا نريد أن تكون الدائرة لا نهائية، يجب أن تكون متصلة رأساً بذيل. بشكل تلقائي، يمكننا محاولة تكرار البطاقات:
ألقِ نظرة على النتيجة:
فقط المجموعة الأولى من البطاقات مرئية. إذا فحصتِ HTML، سترى أن المجموعة الثانية من البطاقات مخفية وتتبع المجموعة الأولى.
حان الوقت لتحريك الدائرة! نظرًا لأن لدينا مجموعتين من البطاقات متصلتين، يمكننا تحريك الدائرة عن طريق تحويل مجموعات البطاقات. إليك الطريقة:
لا يزال لدينا لمسة أخيرة لإضافتها: وقف الرسوم المتحركة عند التمرير فوق الدائرة. سيمنح هذا المستخدمين فرصة لرؤية المحتوى بوضوح أكبر. نظرًا لأن لدينا مجموعتين من البطاقات، نحتاج إلى إيقاف كلتا المجموعتين عند التمرير فوق الدائرة:
هذا كل شيء! 🎊 الآن ستتوقف الدائرة عند التمرير فوقها.
CSS قوي، ومن الممتع دائمًا استكشاف ما يمكننا تحقيقه معه. هناك أيضًا خصائص CSS أخرى مثل scroll-snap-type و scroll-snap-align التي يمكن أن تساعدك على إنشاء دائري تفاعلي. ترميز سعيد! 🚀