اضافة تأثير الحركة على زر اضغط هنا للطلب للمتجرالالكتروني في منصة يوكان

اضافة تأثير الحركة على زر اضغط هنا للطلب


السلام عليكم ورحمة الله

في موضوع هذا اليوم احببت ان اشارك معكم طريقة اضافة تأثير الحركة لزر اضغط هنا للطلب  في متجركم الالكتروني على منصة يوكان.

والهدف من هذه الاضافة انها تثير انتباه الزائر عند تصفحه للمتجر اضافة الى كونها تعطي جمالية واحترافية لمتجرك الالكتروني.

ولاضافة هذه الحركة الى الزر ما عليك سوى القيام ببعض الخطوات البسيطة والتي هي على النحو التالي :

  1. قم بنسخ الكود الذي ستجده اسفل هذه التدوينة.
  2. قم بالدخول الى حسابك في منصة يوكان.
  3. ادخل في خيار الاعددات.
  4. ادخل في خيارأونلاين ومن تم اختر CSS/JavaScript configs.
  5. انزل قليلا الى الاسفل ثم قم بلصق الكود الذي قمت بنسخه سواءا في خيار رمز العنوان الإضافي او في خيار رمز التذييل الإضافي.

كود الاضافة

<style>
@-webkit-keyframes shake-x{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.single-product .single-submit.shaked {
animation: shake-x 1s ease infinite;
}
.single-product .single-submit.shaked:hover {
animation: none;
}
</style>
<script>
setInterval(function() {
let buttons = document.querySelectorAll('.single-product .single-submit');
buttons.forEach(button => {
button.classList.toggle('shaked');
});
}, 2000);
</script>
تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-