كود انشاء تأثير متحرك عند الانتقال من صفحة الى أخرى

[Admin]

بسم الله الرحمن الرحيم

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

معاينة التأثير​

​

تركيب التأثير​

توجه نحو لوحة ادارة موقعك او ملفات الموقع وفي المكان الخصص لأكواد الـ Css ضع الكود التالي:

      body {
          animation: .2s ease-out 0s 1 slideInLeft;
        margin: 0;
      }
    @keyframes slideInLeft {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
}

ويمكنك التحكم في مدة الحركة من خلال التعديل على الرقم 2 في animation: .2s

ان شاء الله يكون عجبكم
بالتوفيق للجميع
والسلام ختام​